@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap");

.s-wrp-btn .btn:not(:first-child) {
  margin-top: 24px
}

a.btn {
  text-decoration: none
}

a.btn:hover, a.btn:focus, a.btn:active {
  text-decoration: none
}

.btn {
  position: relative;
  display: block;
  width: 100%;
  max-width: 470px;
  margin: auto;
  color: #fff;
  text-align: center;
  text-transform: uppercase
}

.btn span {
  background: #52a0fd;
  background: linear-gradient(to right, #52a0fd 0%, #00e2fa 80%, #00e2fa 100%)
}

.btn::before {
  position: absolute;
  right: 30px;
  bottom: -5px;
  left: 30px;
  z-index: 0;
  display: inline-block;
  height: 40px;
  background: #52a0fd;
  background: linear-gradient(to right, #52a0fd 0%, #00e2fa 80%, #00e2fa 100%);
  border-radius: 30em;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-filter: blur(20px) brightness(0.95);
  filter: blur(20px) brightness(0.95);
  transition: all 0.3s ease-out;
  content: ""
}

.btn span {
  position: relative;
  z-index: 2;
  display: inline-block;
  width: 100%;
  max-width: 470px;
  font-weight: bold;
  border-radius: 50em;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: all 0.3s ease-out;
  will-change: transform, filter
}

.btn:focus, .btn:active {
  color: #fff
}

.btn:hover {
  color: #fff
}

.btn:hover span {
  -webkit-transform: scale(0.95);
  transform: scale(0.95);
  -webkit-filter: brightness(1.05) contrast(1.05);
  filter: brightness(1.05) contrast(1.05)
}

.btn:hover::before {
  bottom: 0;
  -webkit-filter: blur(10px) brightness(0.95);
  filter: blur(10px) brightness(0.95)
}

.btn.pop-onhover::before {
  bottom: 10px;
  opacity: 0
}

.btn.pop-onhover:hover::before {
  bottom: -7px;
  opacity: 1;
  -webkit-filter: blur(20px);
  filter: blur(20px)
}

.btn.pop-onhover:hover span {
  -webkit-transform: scale(1.04);
  transform: scale(1.04)
}

.btn.pop-onhover:hover:active span {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-filter: brightness(1) contrast(1);
  filter: brightness(1) contrast(1);
  transition: all 0.15s ease-out
}

.btn.pop-onhover:hover:active::before {
  bottom: 0;
  -webkit-filter: blur(10px) brightness(0.95);
  filter: blur(10px) brightness(0.95);
  transition: all 0.2s ease-out
}

@media screen and (min-width: 761px) {
  .btn {
    height: 80px;
    font-size: 20px;
    line-height: 80px
  }
}

@media screen and (max-width: 761px) {
  .btn {
    line-height: 60px
  }
}

.anker-link {
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 40px
}

@media screen and (max-width: 767px) {
  .anker-link .s-wrp-btn {
    margin-top: 50px;
    margin-bottom: 20px
  }
}

.anker-link .s-btn-cv {
  color: #fff !important;
  text-decoration: none !important
}

@media screen and (max-width: 767px) {
  .anker-link .s-btn-cv {
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    padding-top: 25px !important;
    padding-bottom: 25px !important
  }
  .anker-link .s-btn-cv .s-ico--mail {
    margin-left: 0px !important
  }
}

.btn span, #form input[type="submit"], .btn.pop-onhover:before, .ad_contact-box .btn:before {
  background: -webkit-gradient(linear, left top, right top, from(#fa80d2), to(#fed757));
  background: linear-gradient(to right, #fa80d2 0, #fed757 100%)
}

@media (min-width: 767px) {
  #members #leaders #box01 .txt_wrap {
    top: 50%;
    transform: translateY(-56.1%)
  }
}

.s-ico {
  position: relative;
  background: center center no-repeat;
  display: inline-block;
  vertical-align: middle
}

.s-ico--mail {
  background-image: url("../../img/lp/icon_mail.svg");
  width: 36px;
  height: 27px
}

body {
  line-height: 1.9
}

#footer a.arrow {
  position: relative;
  display: inline-block
}

#footer .block ul li {
  font-size: 14px
}

#footer #adress p {
  font-size: 14px;
  display: inline-block
}

#footer #adress li {
  display: inline-block
}

#footer #adress li a {
  font-size: 14px
}

#footer #adress li img {
  display: inline-block;
  margin: 0 10px 5px 0;
  vertical-align: middle
}

#footer #adress img[src$=".svg"] {
  width: 12px
}

.hs_submit input[type="submit"] {
  box-shadow: none !important
}

.ta_c {
  text-align: center
}

.telBox img[src$=".svg"] {
  width: 30px
}

h2 .en {
  font-weight: bold !important
}

.glitch::after {
  left: -1px;
  -webkit-filter: drop-shadow(-1px 0 #00fff9) drop-shadow(1px 1px #ff00c1);
  filter: drop-shadow(-1px 0 #00fff9) drop-shadow(1px 1px #ff00c1);
  -webkit-animation: glitch-anim2 1s infinite linear alternate-reverse;
  animation: glitch-anim2 1s infinite linear alternate-reverse
}

.fnt_osw {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  -webkit-transform: skewX(-8deg);
  transform: skewX(-8deg)
}

#footer_navi * {
  box-sizing: content-box
}

#footer_navi li {
  margin-bottom: 3px
}

.hs-ex.arrow {
  color: #34c1ca
}

.hs-ex.arrow::before {
  right: -33px;
  height: 0;
  transform: rotate(45deg)
}

a.arrow::before {
  top: 50%;
  right: -30px;
  width: 7px;
  height: 7px;
  margin-top: -2px;
  margin-right: 3px;
  border-top: 2px solid #34c1ca;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  position: absolute;
  content: ""
}

.hs-ex.arrow::after {
  transform: rotate(0deg)
}

a.arrow::after {
  position: absolute;
  top: 50%;
  right: -30px;
  width: 15px;
  height: 2px;
  vertical-align: middle;
  background: #34c1ca;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  content: ""
}

#content ul, #footer ul {
  letter-spacing: -0.4em
}

#content li, #footer li {
  letter-spacing: normal
}

#content div, #content th, #content td, #content ul, #content li, #content a {
  box-sizing: border-box
}

#footer div, #footer li {
  box-sizing: border-box
}

.pc-diamond-row {
  width: 100%;
  max-width: 1172px;
  margin: 30px auto
}

.pc-diamond-row .diamond-col {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto
}

.pc-diamond-row .diamond-col-3 {
  max-width: 876px
}

.pc-diamond-row .diamond-col-3:last-child {
  margin-top: -140px
}

.pc-diamond-row .diamond-col-4 {
  max-width: 1173px;
  margin-top: -140px
}

.pc-diamond-row .diamond-item {
  max-width: 284px;
  margin-right: 12px
}

.pc-diamond-row .diamond-item a {
  display: block
}

.pc-diamond-row .diamond-col-3 li:last-child, .pc-diamond-row .diamond-col-4 li:last-child {
  margin-right: 0
}

.diamond-item img {
  width: 100%;
  height: auto;
  overflow: hidden
}

.diamond-item a:hover img {
  opacity: 1;
  -webkit-animation: flash 0.5s;
  animation: flash 0.5s
}

@-webkit-keyframes flash {
  0% {
    opacity: 0.4
  }
  100% {
    opacity: 1
  }
}

@keyframes flash {
  0% {
    opacity: 0.4
  }
  100% {
    opacity: 1
  }
}

.sp-diamond-row {
  display: none
}

#footer {
  position: relative;

}

#footer::before {
  position: absolute;
  left: 0;
  width: 100%;
  content: "";
}

#footer .block .header a {
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: bold
}

#footer .block:nth-child(2) .header {
  color: transparent
}

#footer .block .service_type {
  color: #fff
}

#footer .block a {
  position: relative;
  display: inline-block;
  color: #fff
}

#footer #footer_navi ul a::before, #footer #footer_navi ul a::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
  -webkit-transform: scale3d(0, 1, 1);
  transform: scale3d(0, 1, 1);
  -webkit-transform-origin: right top;
  transform-origin: right top;
  transition-timing-function: cubic-bezier(0.29, 0.18, 0.26, 0.83);
  transition-duration: 0.3s;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  content: ""
}

#footer #footer_navi ul a::before {
  background-color: #0ff;
  transition-delay: 0.1s;
  transition-timing-function: cubic-bezier(0.51, 0.18, 0, 0.88)
}

#footer a:hover {
  text-decoration: none
}

#footer #footer_navi ul a:hover::before, #footer #footer_navi ul a:hover::after {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transform-origin: left top;
  transform-origin: left top
}

#footer_contact {
  position: relative;
  margin: auto;
  text-align: center;
  background: #fff
  padding: 40px 0 100px;
}

#footer_contact::after {
  position: absolute;
  left: 50%;
  display: block;
  background: url(../../img/common/f_contact.png) no-repeat 0 0;
  content: ""
}

#footer_contact .footer_contact_description {
  margin-top: 20px;
  font-size: 14px
}

#footer_contact img {
  display: inline-block;
  height: 22px;
  margin: 0 5px 5px 10px;
  vertical-align: middle
}

#footer_contact .footer_contact_tel_title {
  font-size: 19px
}

#footer_contact .tel {
  margin-left: 20px
}

#footer_contact .tel img {
  position: relative;
  top: -5px
}

#footer_contact .fs18 img {
  height: 15px;
  margin: 0 5px 2px 20px
}

#footer_contact .telme {
  display: inline;
  color: #000;
  font-weight: bold;
  font-size: 28px
}

#footer_navi .ta_c a::after {
  display: none
}

#footer_navi .ta_c svg g {
  fill: #fff
}

#footer_navi li {
  margin-bottom: 3px
}

#footer #adress {
  color: #fff
}

#footer #adress p {
  display: inline-block
}

#footer #adress li {
  display: inline-block
}

#footer #adress li a {
  color: #fff
}

#footer #adress li img {
  display: inline-block;
  margin: 0 10px 5px 0;
  vertical-align: middle
}

#footer #copy {
	color: #fff;
    font-size: 12px;
    text-align: center;
    background: #333;
    padding: 30px 0;
	border-top: 1px solid #fff;
}

#footer #copy span:not(:target) {

}

h2 {
  line-height: 1.3;
  text-align: center
}

h2 span {
  position: relative;
  display: inline-block;
  margin: auto;
  line-height: 1.4
}

h2 .en {
  font-family: "Oswald", sans-serif;
  line-height: 1.8
}

h2 .jp {
  font-weight: bold;
  font-size: 20px
}

@media (max-width: 767px) {
  h2 .jp {
    font-size: 16px
  }
}

h2 .en::after, h2 .jp::after {
  display: block;
  height: 3px;
  background: #000;
  content: ""
}

h2 .en::after {
  position: absolute;
  top: 68%
}

h2 .jp::after {
  position: absolute;
  top: 50%
}

.rltv {
  position: relative
}

.innr {
  width: 100%;
  margin: auto
}

.innr_wrap {
  display: table
}

.left, .right {
  display: table-cell;
  vertical-align: middle
}

#post_footer a.arrow::after, #form a.arrow::after {
  top: 50%;
  right: -30px;
  width: 15px;
  height: 2px;
  vertical-align: middle;
  background: #34c1ca;
  -webkit-transform: rotate(0);
  transform: rotate(0)
}

#post_footer a.arrow::before, #form a.arrow::before {
  top: 50%;
  right: -30px;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-top: 2px solid #34c1ca;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg)
}

:placeholder-shown, ::-webkit-input-placeholder {
  color: #a4a4a4
}

:-moz-placeholder, ::-moz-placeholder {
  color: #a4a4a4;
  opacity: 1
}

:-ms-input-placeholder {
  color: #a4a4a4
}

.scale {
  overflow: hidden
}

.scale img {
  transition: -webkit-transform 0.3s linear;
  transition: transform 0.3s linear;
  transition: transform 0.3s linear, -webkit-transform 0.3s linear
}

#blog a:hover .scale img {
  -webkit-transform: scale(1.04);
  transform: scale(1.04)
}

.contact-Box {
  margin: 40px 0 0;
  padding: 20px 30px;
  color: #f98e84;
  border: 2px solid #f98e84;
  border-radius: 8px
}

#form p {
  position: relative;
  font-weight: bold
}

#form .hissu {
  width: 40px;
  height: 20px;
  color: #fff;
  font-weight: normal;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  background: #e8193b
}

#form p a {
  position: absolute;
  font-weight: normal;
  text-decoration: underline
}

#form input[type="text"], #form input[type="email"] {
  box-sizing: border-box;
  width: 100%;
  max-width: 640px;
  font-size: 15px;
  border: none;
  border: 1px solid #ddd;
  border-radius: 5px
}

#form textarea, #form select {
  box-sizing: border-box;
  width: 100%;
  max-width: 640px;
  font-size: 15px;
  border: none;
  border: 1px solid #ddd;
  border-radius: 5px
}

#form input[type="file"] {
  font-size: 16px
}

#form textarea {
  line-height: 1.5
}

.btn_form {
  position: relative;
  z-index: 30;
  width: 100%;
  max-width: 320px
}

#contact input[type="submit"], #form input[type="submit"] {
  display: block;
  width: 100%;
  max-width: 320px;
  height: 60px;
  margin: auto;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  line-height: 60px;
  text-align: center;
  background: #52a0fd;
  background: linear-gradient(to right, #52a0fd 0%, #00e2fa 80%, #00e2fa 100%);
  border: none;
  border-radius: 40px;
  transition: all 0.3s ease-in-out 0s
}

#contact input[type="submit"]:hover, #form input[type="submit"]:hover {
  background-position: right center;
}

#contact #form {
  background: #fafafa
}

#contact #form input[type="text"], #contact #form input[type="email"] {
  background: #fff
}

#contact #form textarea, #contact #form select {
  background: #fff
}

#entry #form input[type="text"], #entry #form textarea, #entry #form select {
  margin-bottom: 25px;
  background: #f9f9f9
}

#contact #form select {
  height: 60px;
  line-height: 57px;
  border-radius: none
}

#contact #form input.error-pink {
  background: pink !important
}

#contact #form .input--filled input.error-pink {
  background: #fff !important
}

#entry #form select {
  height: 57px;
  line-height: 57px;
  border-radius: none
}

#entry #form #select_wrap select {
  display: inline-block;
  width: auto;
  margin: 0
}

#entry #form #select_wrap span {
  display: inline-block
}

#hearing-sheet .intro-title {
  margin-bottom: 30px;
  font-weight: bold;
  font-size: 35px
}

#thanks .fnt_B {
  font-weight: bold
}

#company #mission .txt01 {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl
}

#company #value .txt01, #company #value .txt02, #company #value .txt03, #company #value .txt04 {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl
}

#company #mission .innr {
  position: relative
}

#company #value .box01, #company #value .box02 {
  position: relative
}

#company #value .box01 {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  justify-content: space-between
}

#company #mission p, #company #value p {
  display: table;
  font-weight: bold;
  line-height: 1;
  background: #fcff11
}

#company #credo .fl_l p {
  color: #2ec1d3;
  text-align: center
}

#company #credo .fl_l .fnt_vs {
  margin-bottom: 20px;
  font-size: 55px
}

#company #credo .fl_l img {
  display: block
}

#company #credo .fl_l svg {
  display: block;
  display: block;
  max-width: 100px;
  margin: 0 auto 40px
}

#company #credo .credo_icon01, #company #credo .credo_icon02 {
  height: 91.8167px
}

#company #credo .credo_icon03 {
  height: 93.4333px
}

#company #credo .credo_icon04 {
  height: 121.567px
}

#company #credo .fl_l p:nth-last-child(1) {
  color: #000 !important
}

#company #profile {
  background: url(../img/company/company_profile_bg_new.jpg) no-repeat top;
  background-size: cover
}

#company #profile table {
  float: left;
  width: 62%
}

#company #profile figure {
  float: right;
  width: 33%
}

#company #profile th {
  font-weight: bold;
  text-align: right;
  vertical-align: top
}

#company #profile td {
  vertical-align: top
}

#company #owned .title {
  font-weight: bold;
  text-align: center
}

#company #owned .title span {
  display: block;
  font-weight: normal;
  font-family: "Oswald", sans-serif;
  letter-spacing: 1px
}

#company #profile .box1 {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  -webkit-box-pack: justify;
  -webkit-box-align: start
}

#company #profile .box1 figure {
  width: 100%;
  text-align: center
}

#company #profile .box1 table {
  width: 50%
}

#company #mission {
  margin-bottom: 120px
}

#company #mission .txt01, #company #mission .txt02, #company #mission .txt03, #company #mission .txt04, #company #mission .txt05 {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl
}

#company #mission .innr .txt01 {
  position: relative;
  top: -280px;
  left: auto;
  margin-left: 0
}

#company #mission .innr .box01 {
  position: absolute;
  left: 50%;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-box-pack: justify
}

#company #mission .innr .txt02 {
  position: relative;
  top: -180px;
  order: -2;
  -webkit-box-ordinal-group: -1
}

#company #mission .innr img {
  margin-top: -100px
}

#company #mission .innr .txt02 p {
  margin: 0 13px;
  padding: 25px 13px 30px;
  font-size: 18px
}

#company #mission .innr .txt03 {
  position: relative;
  top: -255px;
  order: -1;
  -webkit-box-ordinal-group: 0
}

#company #mission .innr .txt03 p {
  margin: 0 13px;
  padding: 25px 13px 30px;
  font-size: 18px
}

#company #mission .innr .txt04 {
  position: relative;
  top: -170px
}

#company #mission .innr .txt04 p {
  margin: 0 13px;
  padding: 25px 13px 30px;
  font-size: 18px
}

#company #mission .innr .txt05 {
  position: relative;
  top: -240px
}

#company #mission .innr .txt05 p {
  margin: 0 13px;
  padding: 25px 13px 30px;
  font-size: 18px
}

#modal-content1, #modal-content2 {
  position: absolute;
  z-index: 201;
  display: none;
  margin: 0 auto;
  background: #fff
}

#modal-content-innar {
  position: relative
}

#modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  display: none;
  width: 100%;
  height: 120%;
  background-color: rgba(0, 0, 0, 0.6)
}

#modal-close {
  position: absolute;
  top: -70px;
  right: 0
}

.modal-title {
  margin-bottom: 20px;
  font-weight: bold;
  text-align: center
}

#modal-open:hover, #modal-close:hover {
  opacity: 0.8
}

#modal-content1 table {
  width: 100%;
  border: 1px solid #ccc;
  border-collapse: collapse
}

#modal-content1 th, #modal-content1 td {
  padding: 10px;
  text-align: center;
  border: 1px solid #ccc
}

#modal-content1 th {
  font-weight: bold;
  background: #eee
}

#modal-content1 tr th:nth-child(1), #modal-content1 tr td:nth-child(1) {
  text-align: left
}

#modal-content2 textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
  font-size: 16px
}

@media screen and (max-width: 760px) {
  #modal-content2 textarea {
    font-size: 13px
  }
}

#form .radio_wrap .radio:not(:first-child) {
  margin-top: 13px
}

#form .radio_wrap .radio label {
  font-size: 16px
}

#form .radio_wrap .slide, #form .radio_wrap input[type="radio"] {
  display: none
}

#form .radio_wrap .mwform-radio-field-text::before {
  display: inline-block;
  width: 28px;
  height: 28px;
  margin: -2px 5px 0 0;
  vertical-align: middle;
  background-color: #f0f0f0;
  border: 2px solid #ddd;
  border-radius: 17px;
  transition: 0.1s;
  content: ""
}

#form .radio_wrap input[type="radio"]:checked+.mwform-radio-field-text::before {
  background-color: #5482f7 !important;
  border-color: #5482f7 !important;
  box-shadow: inset 0 0 0 8px #fff
}

#form .radio_wrap .radio.error-pink .mwform-radio-field-text::before {
  background-color: pink
}

#form .check_wrap label {
  font-size: 16px
}

#form .check_wrap input[type="hidden"]+.mwform-checkbox-field {
  margin-top: 5px
}

#form input[type="checkbox"] {
  display: none
}

#form .mwform-checkbox-field {
  min-height: 29px
}

#form .mwform-checkbox-field-text {
  position: relative;
  margin-right: 28px;
  padding: 5px 0 0 35px
}

#form .mwform-checkbox-field-text::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 25px;
  height: 25px;
  border: 2px solid #ccc;
  border-radius: 4px;
  content: ""
}

#form .mwform-checkbox-field input[type="checkbox"]:checked+.mwform-checkbox-field-text::after {
  position: absolute;
  top: 2px;
  left: 9px;
  display: block;
  width: 7px;
  height: 16px;
  border-right: 3px solid #5482f7;
  border-bottom: 3px solid #5482f7;
  transform: rotate(40deg);
  content: ""
}

#form .check.error-pink .mwform-checkbox-field-text::before {
  background-color: pink
}

#form p.small {
  font-weight: normal;
  font-size: 13px
}

#hearing-sheet #form .radio:not(:first-child) {
  margin-top: 5px
}

#hearing-sheet #form .submit.ta_c p {
  margin-top: 10px;
  font-size: 13px
}

@media screen and (min-width: 761px) {
  #form .radio_wrap, #form .check_wrap {
    margin: 5px 0 10px 60px
  }
  #hearing-sheet #form .check_wrap .error, #hearing-sheet #form .radio_wrap .error {
    margin-left: 0
  }
  #hearing-sheet #form .check_wrap .txt_box .error, #hearing-sheet #form .radio_wrap .txt_box .error {
    margin-left: 35px
  }
  #hearing-sheet #form input[type="text"].other-txt {
    max-width: 605px;
    margin: 5px 0 0 95px
  }
  #modal-content-innar {
    width: 700px;
    padding: 30px
  }
  .modal-title {
    font-size: 25px
  }
}

@media screen and (max-width: 760px) {
  #modal-content1, #modal-content2 {
    width: calc(100% - 20px)
  }
  #modal-content-innar {
    padding: 10px
  }
  .modal-title {
    font-size: 18px
  }
  #form .innr .input:nth-child(5) p {
    padding-bottom: 30px
  }
  #form .innr .input:nth-child(5) p a {
    top: 30px
  }
  #hearing-sheet #form .innr .input:nth-child(5) p {
    padding-bottom: 0
  }
}

@media screen and (min-width: 761px) {
  #content {
    font-size: 15px
  }
  #top_logo {
    display: none
  }
  #logo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    max-width: 960px;
    height: 88px;
    margin: auto;
    padding: 0;
    text-align: center;
    text-align: right;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    transition-duration: 1s;
    transition-property: transform
  }
  #logo.fire {
    transform: translateX(-100vw)
  }
  #logo a {
    display: block;
    width: 142px;
    height: 60px
  }
  #logo a img {
    width: auto;
    height: 100%
  }
  #content #intro {
    padding-top: 120px;
    padding-bottom: 80px;
    font-size: 16px;
    text-align: center
  }
  #content #intro p {
    font-weight: bold
  }
  #footer {
    margin-top: 10%;
    padding: 0 0 0px;
    background-size: cover
  }
  #footer_contact {
    width: 91.25%;
    max-width: 1168px;
	padding: 40px 0 100px;
  }
  #footer_contact::after {
    top: -85px;
    width: 309px;
    height: 108px;
    margin-left: -153px
  }
  #footer_contact h2 {
    margin-bottom: 40px
  }
  #footer_contact .innr {
    font-size: 19px
  }
  #footer_contact .fl_l, #footer_contact .fl_r {
    float: none;
    width: 48%;
    margin: 50px auto 40px
  }
  #footer_contact .telme {
    display: inline;
    color: #000;
    font-weight: bold;
    font-size: 30px
  }
  #footer_navi .ta_c img {
    margin: 60px 0
  }
  #footer_navi .w960 {
    max-width: 844px
  }
  #footer_navi .block {
    display: inline-block;
    margin: 0 20px 20px;
    text-align: left;
    vertical-align: top
  }
  #footer_navi .block p {
    margin-bottom: 10px;
    font-size: 17px;
    letter-spacing: 1px
  }
  #footer #adress {
    height: 80px;
    margin: 45px 0 20px;
    line-height: 80px;
    border-top: 1px solid #272727;
    border-bottom: 1px solid #272727
  }
  #footer #adress ul {
    float: right
  }
  #footer #adress li {
    padding: 0 10px;
    border-left: 1px solid #272727
  }
  #side_navi {
    position: fixed;
    top: 380px;
    left: -235px;
    z-index: 1;
    display: inline-block;
    width: 560px;
    padding-left: 20px;
    font-size: 13px;
    font-family: "Oswald", sans-serif;
    letter-spacing: 2px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
  }
  #side_navi img {
    height: 15px;
    margin: 0 10px 5px 0;
    vertical-align: middle
  }
  #side_navi p {
    display: inline-block;
    -webkit-transform: skewX(-8deg);
    transform: skewX(-8deg)
  }
  #side_navi a {
    color: #000
  }
  #side_navi p a {
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff
  }
  #side_navi a img {
    margin-right: 5px
  }
  #side_navi span {
    display: inline-block;
    margin: 0 15px;
    color: #c0c9d8
  }
  #side_navi span::before {
    display: inline-block;
    margin-right: 15px;
    color: #43badc;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "|"
  }
  #main_img .recruit_img img {
    position: relative;
    margin-top: 0
  }
  #main_img figure img {
    position: relative;
    margin-top: -280px
  }
  #main_img figure .people_img {
    position: relative;
    margin-top: -390px
  }
  #main_img .innr {
    top: -80px
  }
  #main_img h1 {
    width: 90%;
    max-width: 960px;
    margin: auto
  }
  #main_img h1 .en {
    font-size: 110px
  }
  h2 .en, #blog_list h2, #works_detail h2, #blog_detail h2 {
    font-size: 50px;
    letter-spacing: 8px
  }
  h2 .en::after, h2 .jp::after {
    width: 0;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    transition-duration: 0.6s
  }
  h2.fire .en::after, h2.fire .jp::after {
    width: 200px
  }
  h2 .en::after {
    right: -220px
  }
  h2 .jp::after {
    left: -220px
  }
  .w700 {
    width: 91.25%;
    max-width: 700px
  }
  .w800 {
    width: 91.25%;
    max-width: 800px
  }
  .w960 {
    width: 91.25%;
    max-width: 960px
  }
  .w1050 {
    width: 91.25%;
    max-width: 1050px
  }
  .w1100 {
    width: 91.25%;
    max-width: 1100px
  }
  #works .w1100, #works.w1100 {
    width: 91.25%;
    max-width: 2000px;
    padding-top: 5%
  }
  #blog .w1050 {
    width: 91.25%;
    max-width: 2000px
  }
  #blog .w960 {
    width: 91.25%;
    max-width: 960px
  }
  .w1180 {
    width: 91.25%;
    max-width: 1168px
  }
  .w1280 {
    width: 90%;
    max-width: 1280px
  }
  .sp {
    display: none
  }
  .fnt_vs {
    font-size: 5vw
  }
  .btn {
    height: 80px;
    font-size: 20px;
    line-height: 80px
  }
  #mv .btn {
	max-width: 520px;  
  }
  
  #mv .btn span{
	max-width: 520px;  
  }
  
  .btn_more {
    margin-top: 35px;
    padding-bottom: 133px
  }
  .btn_more a {
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    height: 58px;
    padding-left: 55px;
    line-height: 58px;
    border-radius: 29px 0 0 29px;
    opacity: 0
  }
  .btn_more.fire a {
    top: 0;
    opacity: 1
  }
  #sub_btn {
    display: none
  }
  #sub_navi {
    width: 100%;
    padding-top: 120px;
    text-align: center;
    border-bottom: 5px solid #000
  }
  #sub_navi li {
    display: inline-block;
    margin: 0 25px
  }
  #sub_navi a {
    position: relative;
    display: block;
    height: 50px;
    color: #000;
    font-weight: bold;
    font-size: 16px;
    line-height: 1
  }
  #sub_navi li.actv a::after, #sub_navi a:hover::after {
    position: absolute;
    bottom: -19px;
    left: 50%;
    display: block;
    box-sizing: border-box;
    margin-left: -8px;
    border: 7px solid transparent;
    border-left: 7px solid #000;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    content: ""
  }
  #office {
    padding: 90px 0
  }
  #office .fl_l, #office .fl_r {
    width: 48.8%
  }
  #office .map {
    width: 100%;
    height: 420px
  }
  #office .title {
    margin: 65px 0 20px
  }
  #office .title span {
    font-size: 26px
  }
  #blog li .category {
    position: absolute;
    top: 0;
    right: 0
  }
  #blog #col2_wrap {
    padding: 100px 0;
    background-position: center 100px, center 0
  }
  #blog #col2_wrap h2 {
    margin-bottom: 60px
  }
  #blog #col3_wrap h2 {
    margin-bottom: 60px
  }
  #blog #col2_wrap h2 span, #blog #col3_wrap h2 span {
    position: relative;
    display: inline-block
  }
  #blog #col2_wrap h2 span::after {
    top: 15px;
    right: -110px;
    width: 70px;
    height: 65px
  }
  #blog #col3_wrap h2 span::after {
    top: 12px;
    left: -50px;
    width: 70px;
    height: 65px
  }
  #blog #col2 li {
    float: left;
    width: 48%
  }
  #blog #col2 li:nth-child(2n-1) {
    margin: 70px 4% 0 0
  }
  #blog .bx-wrapper #col2 li:nth-child(2n-1) {
    margin: 0
  }
  #blog #col2 li .txt {
    width: 74%;
    margin: 6% auto 14%
  }
  #blog_list #col3_wrap h2 {
    margin: -45px 0 30px;
    padding-top: 90px
  }
  #blog #col3 li {
    float: left;
    width: 31.6666666%;
    margin-bottom: 4%
  }
  #blog #col3 li:nth-child(3n-1) {
    margin: 0 2.5% 4%
  }
  #blog #col3 li:nth-child(3n+1) {
    clear: both
  }
  #blog #col3 li .scale {
    margin-bottom: 6%
  }
  #blog_list #blog {
    position: relative
  }
  #blog_list #intro {
    padding-top: 120px !important;
    padding-bottom: 80px !important
  }
  #blog_detail {
    padding: 60px 0 100px
  }
  #blog_detail .w1280 h2 {
    font-size: 28px;
    letter-spacing: 2px
  }
  #blog_detail #col3_wrap {
    margin-top: -65px;
    padding-top: 65px
  }
  #blog_detail #col3_wrap h2 {
    margin-bottom: 65px
  }
  #post_detail h2 {
    font-weight: bold;
    font-size: 26px
  }
  #blog_detail #blog #col3 li:nth-child(3n-1) {
    margin: 0 2.5% 4%
  }
  #blog_detail #blog #col3 li:nth-child(3n+1) {
    clear: both
  }
  #post_header {
    padding: 30px 0 20px
  }
  #post_header .date {
    font-size: 17px
  }
  #post_header .category {
    margin: 10px auto;
    font-size: 14px
  }
  #post_header .author {
    font-size: 22px
  }
  #post_detail {
    margin: 40px auto 0
  }
  #post_detail p {
    margin-bottom: 30px
  }
  #post_detail .title1 {
    margin: 40px 0 60px;
    font-size: 22px
  }
  #post_footer {
    font-size: 18px
  }
  #post_footer .bg {
    padding: 30px;
    font-size: 18px;
    line-height: 1.5
  }
  #post_footer .left {
    width: 130px
  }
  #post_footer .author {
    color: #000;
    font-size: 22px
  }
  #post_footer .arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: 200px;
    font-size: 15px
  }
  #pagenation {
    margin: 40px 0 60px
  }
  #pagenation li {
    width: 220px
  }
  #pagenation li:nth-child(2) {
    width: 330px
  }
  #sns {
    margin-bottom: 100px
  }
  #sns li {
    width: 155px;
    margin: 0 5px
  }
  #sns a {
    font-size: 16px
  }
  #recruit {
    padding-bottom: 76px
  }
  #recruit #intro {
    padding-bottom: 100px
  }
  #recruit #box {
    margin: 100px auto 0;
    padding: 65px 80px 100px
  }
  #recruit #box h3 {
    margin-bottom: 40px;
    font-weight: bold;
    font-size: 28px
  }
  #recruit #box li a {
    padding: 12px 40px;
    font-size: 20px
  }
  #recruit h2 {
    margin-bottom: 80px
  }
  #recruit #system {
    padding-top: 70px
  }
  #recruit #system .w1100 li {
    float: left;
    width: 29%;
    margin-bottom: 7%
  }
  #recruit #system .w1100 li:nth-child(3n-1) {
    margin: 0 6.5% 7%
  }
  #recruit #system .w1100 li:nth-child(3n+1) {
    clear: both
  }
  #recruit #system li .txt {
    width: 85%;
    margin: 20px auto
  }
  #recruit #system li:nth-child(5) .txt, #recruit #system li:nth-child(7) .txt, #recruit #system li:nth-child(8) .txt {
    margin-top: 20px
  }
  #recruit .rltv {
    padding: 120px 0 60px
  }
  #recruit .rltv #txt {
    margin-left: -200px
  }
  #recruit .btn {
    height: 60px;
    line-height: 60px
  }
  #tab_wrap {
    margin-top: 50px
  }
  #tab_menu {
    width: 100%
  }
  #tab_menu li.tab_btn {
    width: 25%;
    margin: 0 0.5%
  }
  #tab_menu li.tab_btn:nth-child(2) {
    margin: 0 0.5% 20px
  }
}

@media screen and (max-width: 1200px) {
	
	.btn {
		height: 70px;
		font-size: 16px;
		line-height: 70px;
	}
}

@media screen and (min-width: 761px) and (max-width: 767px) {
  #tab_menu li.tab_btn:nth-child(2) {
    margin: 0 0.5%
  }
}

@media screen and (min-width: 761px) {
  #tab_menu li a {
    height: 45px;
    font-size: 18px;
    line-height: 45px;
    border-radius: 23px
  }
  #tab_menu li a:hover {
    background: #06ddfa
  }
  #tab_menu li.current a {
    background: #06ddfa
  }
  #tab_contents {
    padding: 55px 0 30px
  }
  #tab_contents th, #tab_contents td {
    padding: 35px 0;
    font-size: 16px;
    vertical-align: top
  }
  #tab_contents th {
    width: 220px;
    padding-left: 80px
  }
  #tab_contents td {
    padding-right: 80px
  }
  #works .works_items li {
    position: relative;
    float: left;
    width: 28%;
    margin: 0 0 8%
  }
  #works .works_items li img {
    width: 100%;
    height: auto
  }
  #works li:nth-child(3n-1) {
    margin: 0 8% 8%
  }
  #works li:nth-child(3n+1) {
    clear: both
  }
  #works_list {
    margin-top: 120px;
    padding-top: 20px
  }
  #works_list .ta_c {
    margin-bottom: 155px;
    font-weight: bold;
    font-size: 16px
  }
  #detail {
    width: 790px;
    margin: auto
  }
  #detail_header {
    margin: 0 0 35px
  }
  #works_detail {
    padding: 140px 0
  }
  #detail_header .date {
    margin: 5px 0 30px
  }
  #detail #work_category {
    margin-top: 25px
  }
  #detail #work_category img {
    width: 26px;
    margin: 35px 20px 0
  }
  #works_detail #image1 {
    margin-top: -20px;
    padding: 155px 0
  }
  #works_detail #image1 img {
    margin: 0 auto
  }
  #works_detail #image2 {
    margin-bottom: 80px
  }
  #works_detail #col3_wrap {
    margin-top: 120px;
    padding-top: 100px;
    padding-bottom: 40px;
    background-position: center 10px, center 0;
    background-size: auto auto, 100% auto
  }
  #works_detail #col3_wrap h2 {
    margin-bottom: 80px
  }
  #works_detail #col3_wrap h2 span::after {
    top: 12px;
    left: -50px;
    width: 70px;
    height: 65px
  }
  #works_detail #works .works_items li {
    clear: none;
    margin: 0
  }
  #flow .step_wrap .txt {
    width: 870px
  }
  #flow .step_wrap .txt .right {
    width: 340px
  }
  #flow .step_wrap .txt .right img, #flow .step_wrap .txt .right svg {
    display: block;
    max-width: 270px;
    margin: auto
  }
  #flow .step_wrap .txt .left {
    width: 530px
  }
  #flow .step_wrap .txt p {
    margin-bottom: 60px
  }
  #flow .step_wrap .txt p.title {
    position: relative;
    margin-bottom: 30px;
    padding-left: 60px;
    font-weight: bold;
    font-size: 20px;
    line-height: 100px
  }
  #flow .step_wrap .txt .innr_wrap:last-child p:last-child {
    margin-bottom: 40px
  }
  #flow .step_wrap .txt .title span {
    margin-right: 55px;
    font-size: 30px
  }
  #flow #third {
    margin-bottom: 80px
  }
  #services section {
    padding-top: 55px
  }
  #services section:nth-of-type(1n), #services section:nth-of-type(2n) {
    padding: 0 0 70px
  }
  #services section:nth-of-type(5) {
    margin-bottom: -50px
  }
  #services section:last-of-type {
    padding: 0 0 100px
  }
  #services .image {
    margin: 105px auto
  }
  #services h2 {
    margin: 55px 0
  }
  #services .innr .ta_c:first-child {
    margin-bottom: 50px
  }
  #services .seo-txt-rank {
    margin-bottom: 50px;
    font-weight: bold;
    text-align: center;
    text-decoration: underline
  }
  #services .innr .item {
    margin-bottom: 50px
  }
  #services .clearfix div {
    width: 48%
  }
  #services li {
    display: inline-block;
    width: 30%;
    margin-bottom: 5%;
    line-height: 1.7;
    vertical-align: top
  }
  #services li:nth-child(2), #services li:nth-child(5) {
    margin: 0 5% 5%
  }
  #services .title {
    margin-bottom: 20px;
    padding: 40px 0
  }
  #services li .title {
    margin: 20px 0;
    padding: 20px 0
  }
  #members #leaders #box01 {
    position: relative;
    margin-top: -60px;
    padding: 100px 0 180px;
    text-align: right
  }
  #members #leaders #box02 {
    position: relative;
    margin-top: -60px;
    padding: 110px 0 170px
  }
  #members #leaders .txt_wrap {
    position: absolute;
    width: 55%;
    text-align: center
  }
  #members #leaders #box01 .txt_wrap {
    top: 150px;
    left: 0;
    margin-top: 70px;
    padding: 0 60px;
    background: #fff
  }
  #members #leaders #box02 .txt_wrap {
    top: 280px;
    right: 0
  }
  #members #leaders #box02 .txt_wrap .txt {
    margin-top: -177px;
    padding: 180px 0 100px 60px;
    background: #fff
  }
  #members #leaders .txt {
    width: 475px;
    margin: auto;
    line-height: 1.7;
    text-align: left
  }
  #members #leaders .txt p {
    margin-bottom: 25px
  }
  #members #leaders .title {
    margin-bottom: 20px;
    font-size: 6.1vw
  }
  #members #leaders #box01 .title {
    padding-top: 30px;
    letter-spacing: 3px
  }
  #members #members h2 {
    margin-bottom: 50px
  }
  #members #members .clearfix {
    margin-bottom: 95px
  }
  #members #members .clearfix div {
    width: 47%
  }
  #members #partner .clearfix div {
    width: 47%;
    margin-bottom: 30px
  }
  #members #members .title, #members #partner .title {
    margin: 10px 0 20px;
    font-size: 3vw;
    letter-spacing: 2px
  }
  #members #members .title span {
    margin-top: -5px;
    font-size: 17px
  }
  #members .fnt_osw {
    margin-top: 20px
  }
  #members #partner {
    padding: 107px 0 95px
  }
  #members #partner h2 {
    margin-bottom: 50px
  }
  #members #partner .bold {
    margin: -10px 0 15px
  }
  #members .rltv {
    padding: 120px 0 110px
  }
  #members .rltv #txt {
    margin-left: -200px
  }
  #form {
    padding-bottom: 120px
  }
  #form p {
    padding-left: 60px;
    font-size: 18px
  }
  #form .ta_c p {
    padding-left: 0
  }
  #form .hissu {
    position: absolute;
    top: 8px;
    left: 0
  }
  #form p a {
    top: 3px;
    left: 165px;
    font-size: 15px
  }
  #hearing-sheet div+p {
    padding-left: 0
  }
  #hearing-sheet .txt_box input, #hearing-sheet .check_box input {
    margin-left: 40px !important
  }
  #hearing-sheet #form p .error {
    font-weight: 400;
    font-size: 93%
  }
  .emp {
    margin-bottom: 40px
  }
  #form input[type="text"], #form input[type="email"] {
    margin: 5px 0 0 60px;
    padding: 19px 29px
  }
  #form textarea, #form select {
    margin: 5px 0 0 60px;
    padding: 19px 29px
  }
  #form input[type="file"] {
    margin: 5px 0 0 60px
  }
  #contact #form textarea {
    margin-bottom: 10px
  }
  #form .error {
    margin-left: 60px
  }
  #contact #form .bg {
    padding: 65px 0
  }
  #contact #form .ta_c p {
    margin-top: 50px;
    font-weight: normal
  }
  #entry #form {
    margin-top: 140px
  }
  #entry #form #select_wrap {
    margin: 5px 0 25px 60px
  }
  #entry #form #select_wrap select {
    width: 140px
  }
  #entry #form #select_wrap span {
    margin: 0 10px
  }
  #content #hearing-sheet #intro {
    padding-top: 60px
  }
  #company #mission {
    margin-top: 100px
  }
  #company #mission h2 {
    margin-bottom: 340px
  }
  #company #mission p {
    margin: 0 25px;
    padding: 50px 18px 35px;
    font-size: 27px
  }
  #company #mission p:nth-child(2) {
    padding-top: 35px
  }
  #company #value {
    margin: 50px 0 150px;
    padding-top: 180px
  }
  #company #value h2 {
    margin-bottom: 112px
  }
  #company #value p {
    margin: 0 13px;
    padding: 25px 13px 30px;
    font-size: 21px
  }
  #company #value .box02 {
    margin-top: 55px
  }
  #company #value .box01 .txt01 {
    margin-top: -5%
  }
  #company #value .txt03 {
    margin-top: -5%
  }
  #company #credo h2, #company #profile h2 {
    margin-bottom: 20px
  }
  #company #credo .fl_l {
    width: 33.2%;
    height: 465px;
    font-size: 18px
  }
  #company #credo .clearfix:nth-child(1) .fl_l {
    padding-top: 70px
  }
  #company #credo .clearfix:nth-child(1) .fl_l:nth-child(2) {
    padding-top: 95px
  }
  #company #credo .clearfix:nth-child(2) .fl_l:nth-child(2) {
    padding-top: 30px
  }
  #company #credo .fl_l img {
    margin: 0 auto 40px
  }
  #company #credo .fnt_vs {
    margin-bottom: 30px;
    font-size: 44px
  }
  #company #credo .clearfix:nth-child(2) .fl_l:nth-child(1) .fnt_vs {
    margin: 65px 0 50px
  }
  #company #credo .clearfix:nth-child(2) .fl_l:nth-child(2) .fnt_vs {
    margin-bottom: 55px
  }
  #company #office {
    padding-top: 0
  }
  #company #office h2 {
    margin-bottom: 60px
  }
  #company #profile {
    padding: 105px 0 120px
  }
  #company #profile th {
    min-width: 115px;
    padding-right: 25px
  }
  #company #owned {
    padding: 100px 0 110px
  }
  #company #owned h2 {
    margin-bottom: 45px
  }
  #company #owned .clearfix>div {
    width: 46%
  }
  #company #owned .title {
    margin: 30px 0 15px
  }
  #company #owned .title span {
    font-size: 25px
  }
  #company #owned a {
    display: block;
    margin-top: 40px;
    font-size: 18px
  }
  #top h2 {
    margin-bottom: 65px
  }
  #top #idx_service {
    padding-top: 70px
  }
  #top #idx_service li {
    float: left;
    width: 31%
  }
  #top #idx_service li:nth-child(3n-1) {
    margin: 0 3.5%
  }
  #top #idx_service li:nth-child(4) {
    clear: both
  }
  #top #idx_service li .txt {
    width: 275px;
    margin: 40px auto 45px
  }
  #top #idx_service li:nth-child(4) .txt, #top #idx_service li:nth-child(5) .txt, #top #idx_service li:nth-child(6) .txt {
    margin-top: 20px
  }
  #top #works {
    margin-top: -40px;
    padding-top: 60px
  }
  #top #idx_people .bg_image h2 {
    top: 100px
  }
  #top #idx_people .innr h2 {
    margin: 55px 0 40px;
    font-size: 25px;
    letter-spacing: 3px
  }
  #top #idx_people .fl_l, #top #idx_people .fl_r {
    width: 48%;
    font-size: 16px
  }
  #top #idx_people .btn_more {
    margin-top: 50px
  }
  #top #blog {
    padding-top: 45px
  }
  #top #middle_image {
    height: 450px
  }
}

.ol_gnav {
  position: absolute;
  top: 0;
  left: 0;
  height: 0
}

@media screen and (min-width: 1100px) {
  #recruit .fnt_vs {
    font-size: 55px
  }
}

@media screen and (max-width: 1700px) {
  #main_img figure img {
    position: relative;
    margin-top: -100px
  }
  #main_img figure .people_img {
    position: relative;
    margin-top: -200px
  }
}

@media screen and (max-width: 1188px) {
  .pc-diamond-row .diamond-col-3 {
    max-width: 720px
  }
  .pc-diamond-row .diamond-col-4 {
    max-width: 965px
  }
  .pc-diamond-row .diamond-col-3:last-child, .pc-diamond-row .diamond-col-4 {
    margin-top: -105px
  }
  .pc-diamond-row .diamond-item {
    max-width: 232px
  }
}

@media screen and (max-width: 1024px) {
  .pc-diamond-row {
    max-width: 768px
  }
  .pc-diamond-row .diamond-col-3 {
    max-width: 573px
  }
  .pc-diamond-row .diamond-col-4 {
    max-width: 768px
  }
  .pc-diamond-row .diamond-col-3:last-child, .pc-diamond-row .diamond-col-4 {
    margin-top: -87px
  }
  .pc-diamond-row .diamond-item {
    max-width: 183px
  }
  #main_img figure img, #main_img figure .people_img {
    position: relative;
    margin-top: 0
  }
}

@media screen and (max-width: 768px) {
  .pc-diamond-row {
    display: none
  }
  .sp-diamond-row {
    display: block;
    width: 100%;
    max-width: 580px;
    margin: 20px auto
  }
  .sp-diamond-row .diamond-col {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto
  }
  .sp-diamond-row .diamond-col-2 {
    max-width: 580px
  }
  .sp-diamond-row .diamond-col-2:last-child {
    margin-top: -130px
  }
  .sp-diamond-row .diamond-col-1 {
    max-width: 284px;
    margin-top: -130px
  }
  .sp-diamond-row .diamond-item {
    max-width: 284px;
    margin-right: 12px
  }
  .sp-diamond-row .diamond-item a {
    display: block
  }
  .sp-diamond-row .diamond-col-2 li:last-child, .sp-diamond-row .diamond-col-1 li:last-child {
    margin-right: 0
  }
  #main_img figure img, #main_img figure .people_img {
    position: relative;
    margin-top: 0
  }
  
  .support-list-image img {
	  display: block;
      margin: auto;
  }
}

@media screen and (max-width: 760px) {
  .ol_gnav {
    z-index: 100;
    width: 100%;
    height: 100%;
  }
  .logo_nav {
    height: 50px
  }
  .logo_nav img {
    top: 5px;
    height: 40px
  }
  .nav_wrap {
    top: 50px;
    width: calc(100% - 100px);
    min-width: auto;
    height: calc(100% - 50px)
  }
  .nav_wrap2 {
    top: 50px;
    left: 50px;
    width: calc(100% - 100px);
    min-width: auto;
    height: calc(100% - 50px)
  }
  .gnavi_btn {
    z-index: 100;
    width: 50px;
    height: 50px
  }
  .gnavi_btn::before {
    top: 25px;
    left: 15px;
    width: 15px;
    height: 2px
  }
  .gnavi_btn::after {
    top: 25px;
    left: 15px;
    width: 15px;
    width: 10px;
    height: 2px;
    margin-top: 6px
  }
  .gnavi li:nth-child(2n) {
    border-left: none
  }
  .gnavi li a, .gnavi li .has_c_link {
    display: block;
    padding: 13px 20px 13px 10px
  }
  .gnavi #close {
    top: 5px;
    right: 5px;
    width: 30px
  }
  .gnavi_innr {
    padding: 30px 30px 30px 50px
  }
  .gnavi li .has_c {
    left: -40px
  }
  #logo, #top_logo {
    position: fixed;
    z-index: 98;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    padding: 0;
    text-align: center;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    transition-duration: 1s;
    transition-property: transform
  }
  #logo.fire {
    transform: translateX(-100vw)
  }
  #logo img {
    z-index: 1;
    display: block;
    width: auto;
    height: 40px;
    opacity: 1;
    transition-delay: 0.1s;
    transition-duration: 0.6s
  }
  #top_logo img {
    position: fixed;
    z-index: 1;
    display: block;
    width: 100%;
    height: 40px;
    margin: 0 auto 10px;
    padding-top: 5px;
    opacity: 1;
    transition-delay: 0.1s;
    transition-duration: 0.6s
  }
  #main_img figure .people_img {
    position: relative;
    margin-top: 0
  }
  #content {
    padding-top: 55px
  }
  #content #intro {
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: center
  }
  #content #intro p {
    text-align: left
  }
  #content #services .ta_c {
    text-align: left
  }
  .sp-diamond-row {
    max-width: 320px
  }
  .sp-diamond-row .diamond-col-2 {
    max-width: 320px
  }
  .sp-diamond-row .diamond-col-2:last-child {
    margin-top: -60px
  }
  .sp-diamond-row .diamond-col-1 {
    max-width: 154px;
    margin-top: -60px
  }
  .sp-diamond-row .diamond-item {
    max-width: 154px
  }
  #footer {
    padding: 30px 0 20px;
    background-size: cover
  }
  #footer::before {

  }
  #footer_contact {
    margin: 2% 5%;
    padding: 20px 0
  }
  #footer_contact::after {
    top: -45px;
    width: 155px;
    height: 54px;
    margin-left: -77px;
    background-size: 100% auto
  }
  #footer_contact .fl_l, #footer_contact .fl_r {
    float: none;
    margin: 10px 0
  }
  #footer_contact .btn {
    width: 100%;
    height: 50px;
    font-size: 12px;
    line-height: 50px
  }
  #footer_contact img {
    margin-right: 10px
  }
  #footer_contact .footer_contact_description {
    font-size: 12px
  }
  #footer_contact .footer_contact_tel_title {
    font-size: 13px
  }
  #footer_contact .telme {
    display: inline;
    color: #000;
    font-weight: bold;
    font-size: 28px
  }
  #footer_navi .ta_c img, #footer_navi .ta_c svg {
    margin: 30px auto
  }
  #footer_navi .innr {
    letter-spacing: -0.4em;
    text-align: left
  }
  #footer_navi .block {
    display: inline-block;
    width: 20%;
    margin-bottom: 10px;
    letter-spacing: normal;
    text-align: center
  }
  #footer_navi .block:nth-child(2), #footer_navi .block ul, #footer_navi .block .service_type {
    display: none
  }
  #footer #adress {
    margin: 30px 0;
    text-align: center
  }
  #footer #adress p {
    font-size: 12px
  }
  #footer #adress li {
    width: 33.3%
  }
  #side_navi {
    display: none
  }
  #brdcrmb {
    margin: 20px auto
  }
  #main_img figure img {
    position: relative;
    margin-top: 0
  }
  #main_img .innr {
    top: -50px
  }
  #main_img h1 .en {
    font-size: 33px
  }
  #intro {
    padding-right: 5%;
    padding-left: 5%
  }
  h2 {
    margin-bottom: 30px
  }
  h2 .en {
    font-size: 25px;
    letter-spacing: 2px
  }
  #blog_list h2 {
    font-size: 25px;
    letter-spacing: 2px
  }
  h2 .en::after, h2 .jp::after {
    width: 0;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    transition-duration: 0.6s
  }
  h2.fire .en::after, h2.fire .jp::after {
    width: 40px
  }
  h2 .en::after {
    right: -50px
  }
  h2 .jp::after {
    left: -50px
  }
  img {
    display: block;
    margin: auto
  }
  
  .functionDetail__list__img {
	margin: initial;  
  }
  .fnt_vs {
    font-size: 77px
  }
  .innr, #brdcrmb {
    padding-right: 5%;
    padding-left: 5%;
    font-size: 12px
  }
  .innr.w1280 {
    padding-right: 0;
    padding-left: 0
  }
  #blog_detail .w1280 {
    padding-right: 5%;
    padding-left: 5%
  }
  .sp {
    display: block
  }
  .sp.sp550 {
    display: none
  }
  .btn {
    height: 60px;
    font-size: 18px;
    line-height: 60px
  }
  #sub_navi {
    margin: 50px 5% 0;
    font-size: 13px;
    font-style: italic;
    border: 1px solid #eee
  }
  #sub_btn {
    position: relative;
    display: block;
    padding: 6px 10px;
    text-align: center
  }
  #sub_btn span {
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    width: 20px;
    height: 20px;
    margin: auto
  }
  #sub_btn span i {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 10px;
    height: 2px;
    margin: auto;
    background-color: #ccc;
    transition: -webkit-transform 500ms;
    transition: transform 500ms;
    transition: transform 500ms, -webkit-transform 500ms
  }
  #sub_btn span i:nth-child(2n) {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
  }
  #sub_btn.open span i:nth-child(2n) {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }
  #sub_btn.open span i:first-child {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
  }
  #sub_navi ul {
    display: none
  }
  #sub_navi li {
    display: inline-block;
    width: 100%;
    background: #fff;
    border-top: 1px solid #eee
  }
  #sub_navi li.actv {
    background: #f2f2f2
  }
  #sub_navi li a {
    position: relative;
    display: block;
    padding: 6px 10px;
    color: #000;
    text-decoration: none
  }
  #sub_navi li a::after {
    position: absolute;
    top: 0;
    right: 5%;
    bottom: 0;
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: auto;
    border-right: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    content: ""
  }
  #office {
    padding: 50px 0 90px
  }
  #office .fl_l, #office .fl_r {
    float: none
  }
  #office .map {
    width: 100%;
    height: 420px
  }
  #office .title {
    margin: 20px 0
  }
  #office .title span {
    font-size: 23px
  }
  #office .fl_l {
    margin-bottom: 15px
  }
  #blog #col2_wrap, #blog #col3_wrap {
    padding: 10px 0 30px;
    background-size: 100% auto
  }
  #blog #col2_wrap {
    margin-bottom: 30px;
    background-position: center 20px, center 0;
    background-size: 100% auto, 100% auto
  }
  #blog #col2 li {
    margin: 10px 0 30px
  }
  #blog li .txt {
    margin-top: 10px;
    margin-bottom: 20px
  }
  #blog_list #col3 li {
    margin-bottom: 15px
  }
  #blog_list li .category {
    position: absolute;
    top: 0;
    right: 0
  }
  #blog_detail li .category {
    position: absolute;
    top: 0;
    right: 0
  }
  .bx-wrapper li {
    margin: 0 !important
  }
  .bx-wrapper li .category {
    right: 6% !important
  }
  #blog_detail {
    padding: 30px 0
  }
  #blog_detail #col3_wrap h2 {
    margin-bottom: 65px
  }
  #blog #col2_wrap h2 span::after {
    top: 5px;
    right: -50px;
    width: 35px;
    height: 32px
  }
  #blog #col3_wrap h2 span::after {
    top: 2px;
    left: -20px;
    width: 35px;
    height: 32px
  }
  #post_header {
    margin-bottom: 20px;
    font-size: 16px
  }
  #post_header .category {
    margin: 5px auto;
    font-size: 14px
  }
  #post_detail {
    margin-top: 20px
  }
  #post_detail p {
    margin-bottom: 15px
  }
  #post_detail .title1 {
    margin: 20px 0 30px;
    font-size: 16px
  }
  #post_detail .fs22, #post_detail .fs20 {
    font-size: 16px
  }
  #post_footer {
    font-size: 16px
  }
  #post_footer .bg {
    padding: 15px 5%;
    line-height: 1.5
  }
  #post_footer .left {
    padding-right: 10px
  }
  #post_footer .arrow {
    position: absolute;
    right: 13%;
    bottom: 8px;
    font-size: 14px
  }
  #pagenation {
    margin: 20px 0;
    padding: 0 5%
  }
  #pagenation li {
    width: 33.3%
  }
  #pagenation li a {
    padding: 10px 0;
    font-size: 12px;
    line-height: 1
  }
  #sns {
    padding: 0 5%
  }
  #sns li {
    width: 31%;
    margin: 0 1% 10px;
    font-size: 12px
  }
  #works .works_items {
    margin-bottom: 0;
    padding-top: 0 !important
  }
  #works .works_items li {
    text-align: center
  }
  #works .works_items li .fnt_osw {
    font-size: 10px
  }
  #works .works_items li .outerttl {
    display: none
  }
  #works .works_items li .works_items_content {
    position: relative;
    display: inline-block;
    margin: 0 auto 50px;
    padding: 0
  }
  #works .works_items li .works_items_content a {
    padding: 0;
    border: none
  }
  #works .works_items li .date {
    display: none
  }
  #works_list {
    padding: 30px 0
  }
  #works_list .ta_c {
    margin-bottom: 30px;
    font-weight: bold
  }
  #works_detail {
    padding: 30px 0
  }
  #detail_header {
    padding: 30px 0
  }
  #detail_header .fs25 {
    font-size: 20px
  }
  #detail_header .date {
    margin: 5px 0 10px
  }
  #detail #work_category {
    margin-top: 15px
  }
  #detail #work_category img {
    width: 26px;
    margin: 10px
  }
  #works_detail #image1 {
    padding: 30px 5%;
    background-size: 100% auto
  }
  #works_detail #image1 img {
    margin: 0 auto
  }
  #works_detail #image2 {
    margin-bottom: 40px
  }
  #works_detail #col3_wrap {
    margin-top: 30px;
    padding-top: 30px;
    background-position: center 10px, center 0;
    background-size: 100% auto, 100% auto
  }
  #works_detail #col3_wrap h2 {
    margin-bottom: 30px
  }
  #works_detail #col3_wrap h2 span::after {
    top: 2px;
    left: -20px;
    width: 35px;
    height: 32px
  }
  #works_detail #col3_wrap #works .works_items li div::after {
    left: 0
  }
  #works_detail #works .works_items li .works_items_content {
    padding: 0
  }
  #recruit #intro {
    background: url(../img/common/bg6.gif) no-repeat center 60px;
    background-size: 100% auto
  }
  #recruit #intro .intro-title {
    font-size: 26px
  }
  #recruit #box {
    margin: 30px auto 0;
    padding: 20px 5%
  }
  #recruit #box h3 {
    margin-bottom: 15px;
    font-weight: bold;
    font-size: 20px
  }
  #recruit #box li a {
    padding: 10px 15px;
    font-size: 16px
  }
  a.arrow::before, a.arrow::after {
    display: none
  }
  #recruit h2 {
    margin-bottom: 30px
  }
  #recruit #system {
    padding-top: 30px
  }
  #recruit #system .w1100 li {
    margin-bottom: 30px;
    padding-top: 10px
  }
  #recruit #system .w1100 li:nth-shild(5), #recruit #system .w1100 li:nth-shild(9), #recruit #system .w1100 li:nth-shild(11), #recruit #system .w1100 li:nth-shild(13), #recruit #system .w1100 li:nth-shild(14) {
    margin-bottom: 20px
  }
  #recruit #system .w1100 li .image_wrap {
    margin-bottom: 15px
  }
  #recruit #system li:nth-shild(5) .image_wrap, #recruit #system li:nth-shild(9) .image_wrap, #recruit #system li:nth-shild(11) .image_wrap, #recruit #system li:nth-shild(13) .image_wrap, #recruit #system li:nth-shild(14) .image_wrap {
    margin-bottom: 0
  }
  #recruit #system li .image_wrap img {
    margin-top: -70px
  }
  #tab_menu li {
    display: none
  }
  #tab_menu li#prev, #tab_menu li#next, #tab_menu li.current {
    display: block
  }
  #tab_menu li#prev {
    left: 3%;
    margin-top: -14px
  }
  #tab_menu li#next {
    right: 3%;
    margin-top: -14px
  }
  #tab_menu li a {
    width: 80%;
    height: 35px;
    margin: auto;
    font-size: 16px;
    line-height: 35px;
    background: #06ddfa;
    border-radius: 18px
  }
  #tab_contents {
    padding: 20px 5%
  }
  #tab_contents th, #tab_contents td {
    display: block;
    padding: 5px
  }
  #tab_contents th {
    margin-top: 10px;
    border: none
  }
  #recruit .rltv {
    padding: 60px 0
  }
  #recruit .rltv #txt {
    width: 230px;
    margin-left: -115px;
    font-size: 47px
  }
  #flow .step_wrap .price img {
    max-width: 70%
  }
  #flow .step_wrap .txt {
    width: calc(100% - 30px);
    padding-right: 10px
  }
  #flow .price {
    width: 30px !important
  }
  #flow .step_wrap .price p {
    width: 30px;
    line-height: 30px
  }
  #flow .step_wrap .txt .right {
    padding: 0 5% 20px
  }
  #flow .step_wrap .txt .left, #flow .step_wrap .txt .right {
    display: block;
    width: 100%
  }
  #flow .step_wrap .txt p {
    margin-bottom: 30px
  }
  #flow .step_wrap .txt p.title {
    position: relative;
    margin-bottom: 15px;
    padding: 10px 20px;
    font-weight: bold;
    font-size: 18px;
    line-height: 1.3
  }
  #flow .step_wrap .price p {
    position: relative;
    left: 0;
    font-weight: 700;
    font-size: 14px;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl
  }
  #flow .step_wrap .txt .innr_wrap:last-child p:last-child {
    margin-bottom: 20px
  }
  #flow .step_wrap .txt .title span {
    display: block;
    font-size: 23px
  }
  #flow #third {
    margin-bottom: 30px
  }
  p.step3_free {
    margin-top: -20px
  }
  #members #leaders #box01, #members #leaders #box02 {
    background-size: 100px auto
  }
  #members #leaders #box01 {
    margin-top: -80px;
    padding: 100px 0 50px
  }
  #members #leaders #box02 {
    position: relative;
    margin-top: -50px;
    padding: 80px 0 30px
  }
  #members #leaders .txt_wrap {
    margin: 15px 5%
  }
  #members #leaders .txt {
    text-align: left
  }
  #members #leaders .txt p {
    margin-bottom: 15px
  }
  #members .title {
    margin: 10px 0;
    font-size: 40px
  }
  #members #leaders #box02 .title, #members #members .fl_r:last-child .title, #members #partner .title {
    font-size: 36px
  }
  #members #members h2, #members #partner h2, #members #members .clearfix div, #members #partner .clearfix div {
    margin-bottom: 30px
  }
  #members .fnt_osw {
    margin-top: 10px
  }
  #members #partner {
    padding: 30px 0
  }
  #members #partner .bold {
    margin: 10px 0 15px
  }
  #members .rltv {
    padding: 60px 5% 50px
  }
  #members .rltv #txt {
    width: 230px;
    margin-left: -115px;
    font-size: 47px
  }
  #services section {
    padding: 30px 0;
    background-size: 100% auto
  }
  #services section:nth-of-type(5) {
    padding-bottom: 15px
  }
  #services .image {
    margin-bottom: 30px
  }
  #services h2 {
    margin: 20px 0 30px
  }
  #services .innr .ta_c:first-child, #services .fl_l, #services li {
    margin-bottom: 40px
  }
  #services .title {
    margin-bottom: 15px;
    padding: 20px 0
  }
  #services li .title {
    margin: 15px 0;
    margin-bottom: 15px;
    padding: 20px 0
  }
  #services .fl_m {
    margin: 0 auto 30px auto
  }
  #services .seo-txt-rank {
    margin-bottom: 50px;
    font-weight: bold;
    text-align: center;
    text-decoration: underline
  }
  #form {
    padding-bottom: 30px
  }
  #form p {
    font-size: 16px
  }
  #form p.blue {
    font-weight: normal
  }
  #form .hissu {
    display: inline-block;
    margin-right: 10px
  }
  #form p a {
    top: 2px;
    right: 13%;
    font-size: 13px
  }
  #form input[type="text"], #form input[type="email"] {
    margin: 5px 0 15px;
    padding: 13px;
    font-size: 14px
  }
  #form textarea, #form select {
    margin: 5px 0 15px;
    padding: 13px;
    font-size: 14px
  }
  #form textarea {
    height: 150px
  }
  #contact #form .bg, #entry #form {
    margin-bottom: 40px
  }
  #contact #form .ta_c p {
    margin: 20px 0 15px;
    padding: 15px 5% 0
  }
  #entry #form #select_wrap {
    margin: 5px 0 15px
  }
  #entry #form #select_wrap span {
    margin: 0 5px
  }
  #hearing-sheet .intro-title {
    font-size: 22px
  }
}

@media screen and (max-width: 760px) and (max-width: 760px) {
  #company section {
    padding: 30px 0
  }
  #company #mission h2.ttl {
    margin-bottom: 220px;
    padding-top: 0;
    background: none;
    background-size: 100px
  }
  .android #company #mission p {
    padding: 20px 9px 30px 6px !important
  }
}

@media screen and (max-width: 760px) {
  #company #mission p {
    margin: 0 15px;
    padding: 20px 8px 30px;
    font-size: 18px;
    white-space: nowrap
  }
  #company #mission p:nth-child(2) {
    padding-top: 10px
  }
  #company #value h2 {
    margin-bottom: 80px
  }
  #company #value p {
    margin: 0 10px;
    padding: 10px 8px
  }
  #company #value .box01 {
    justify-content: space-around;
    padding: 0 5% 50px
  }
  #company #value .box02 {
    margin-top: 50px;
    padding: 0 5% 50px 0
  }
  #company #value .box01 .txt01 {
    margin-top: -5%;
    margin-bottom: 10%
  }
  #company #value .txt03 {
    margin-top: -5%
  }
  #company #credo .fl_l {
    float: none;
    width: 100%;
    padding: 35px 0
  }
  #company #credo .fl_l img {
    margin: 0 auto 20px
  }
  #company #profile table {
    float: none;
    width: 100%
  }
  #company #profile th {
    display: block;
    text-align: left
  }
  #company #profile td {
    display: block;
    margin-bottom: 10px;
    text-align: left
  }
  #company #owned .fl_l, #company #owned .fl_r {
    float: none;
    width: 100%;
    margin-bottom: 30px
  }
  #company #owned .title {
    margin: 15px 0
  }
  #company #owned .title span {
    font-size: 20px
  }
  #company #owned .ta_c {
    margin-top: 20px;
    text-align: left
  }
  #company #mission {
    margin-bottom: 320px
  }
  #company #mission .innr .box01 {
    -webkit-box-pack: center;
    justify-content: center
  }
  #company #mission .innr .txt01 {
    top: -200px;
    order: -2;
    margin-right: calc((100% - 162px) / 2);
    margin-left: calc((100% - 162px) / 2);
    -webkit-box-ordinal-group: -1
  }
  #company #mission .innr .txt02 {
    top: 0;
    order: -1;
    margin-right: 1em;
    margin-bottom: 1em;
    margin-left: 1em;
    -webkit-box-ordinal-group: 0
  }
  #company #mission .innr .txt03, #company #mission .innr .txt04, #company #mission .innr .txt05 {
    top: 0;
    margin-right: 1em;
    margin-bottom: 1em;
    margin-left: 1em
  }
  #company #mission .innr .txt02 p, #company #mission .innr .txt03 p, #company #mission .innr .txt04 p, #company #mission .innr .txt05 p {
    margin: 0 10px;
    padding: 10px 8px;
    font-size: 12px
  }
  #company #mission .innr img {
    margin-top: 0
  }
}

#load {
  top: 0;
  width: 50%;
  max-width: 200px
}

#top_logo {
  top: 0;
  left: 0;
  display: none
}

#top #works, #top #blog {
  background-size: 100% auto
}

#top #idx_service li, #top #blog li {
  margin-bottom: 30px
}

#top #idx_people .bg_image h2 {
  top: 8%
}

#top #idx_people .innr h2 {
  margin: 100px 0 40px;
  font-size: 20px;
  line-height: 1.3
}

#top #middle_image {
  height: 80vh
}

#works .works_items {
  width: 100%;
  padding-top: 60px
}

#works .works_items li .works_items_content {
  min-width: 100%
}

#works .works_items li a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #fff;
  transition: all 0.3s ease-in-out 0s
}

#works .works_items li a::before {
  position: absolute;
  top: -9%;
  right: -21%;
  display: block;
  width: 24%;
  height: 1px;
  background: #fff;
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  transition: all 0.3s ease-in-out 0s;
  content: ""
}

#works .works_items li a::after {
  position: absolute;
  bottom: -9%;
  left: -21%;
  display: block;
  width: 24%;
  height: 1px;
  background: #fff;
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  transition: all 0.3s ease-in-out 0s;
  content: ""
}

#works .works_items li a .works_link_bg {
  position: absolute;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  margin: auto;
  background: #fff
}

#works .works_items li a .works_link_bg::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  margin: auto;
  background: #29e6e2;
  background: linear-gradient(90deg, #00e2fa 0, #52a0fd 100%, #52a0fd 100%);
  opacity: 0;
  transition: all 0.3s ease-in-out 0s;
  content: ""
}

#works .works_items li a h3 {
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -1.4em;
  font-size: 0.8vw;
  text-align: center;
  opacity: 0;
  transition: all 0.3s ease-in-out 0s
}

#works .works_items li a figure {
  position: relative;
  min-width: 100%;
  padding-top: 100%
}

#works .works_items li a figure img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  left: 50%;
  width: auto;
  max-width: 200%;
  height: 100%;
  margin: auto;
  transform: translateX(-50%);
  transition: all 0.3s ease-in-out 0s
}

#works .works_items li a:hover .works_link_bg::after {
  opacity: 1
}

#works .works_items li a:hover h3 {
  opacity: 1
}

#works .works_items li a:hover img {
  opacity: 0.08 !important
}

#works .works_items li a:hover::before {
  top: 16%;
  right: 4%
}

#works .works_items li a:hover::after {
  bottom: 17%;
  left: 6%
}

.pagination {
  letter-spacing: -0.4em;
  text-align: center
}

.pagination>a {
  display: inline-block;
  *display: inline;
  width: 40px;
  height: 40px;
  margin: 0 5.5px;
  color: #000;
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 40px;
  letter-spacing: normal;
  vertical-align: middle;
  *zoom: 1
}

.pagination span {
  display: inline-block;
  *display: inline;
  display: inline-block;
  *display: inline;
  width: 40px;
  width: 40px;
  height: 40px;
  height: 40px;
  margin: 0 5.5px;
  margin: 0 5.5px;
  color: #000;
  color: #000;
  font-size: 18px;
  font-size: 1.8rem;
  font-size: 18px;
  line-height: 40px;
  line-height: 40px;
  letter-spacing: normal;
  letter-spacing: normal;
  vertical-align: middle;
  vertical-align: middle;
  background: #fafafa;
  *zoom: 1;
  *zoom: 1
}

.pagination span.is_is_disable {
  color: #f3f3f3 !important;
  color: #f3f3f3 !important;
  background: #eee !important;
  background: #eee !important;
  border: 0;
  border: 0;
}

.pagination>a.is_is_disable {
  color: #f3f3f3 !important;
  background: #eee !important;
  border: 0;
}

.pagination>a {
  display: inline-block;
  *display: inline;
  width: 40px;
  height: 40px;
  margin: 0 5.5px;
  color: #000;
  font-size: 18px;
  line-height: 40px;
  letter-spacing: normal;
  vertical-align: middle;
  background: #fafafa;
  *zoom: 1
}

.pagination>a.is_is_disable {
  color: #f3f3f3 !important;
  background: #eee !important;
  border: 0;
}

.pagination>a {
  transition: color 0.35s, background-color 0.35s
}

.pagination>a:hover {
  color: #fff;
  text-decoration: none;
  background: linear-gradient(to right, #52a0fd 0%, #00e2fa 80%, #00e2fa 100%)
}

.pagination>span {
  border: 1px solid #434343
}

.pagination>span.current {
  color: #fff;
  background: linear-gradient(to right, #52a0fd 0%, #00e2fa 80%, #00e2fa 100%);
  border: 0
}

.pagination .nextpostslink>i, .pagination .prevpostslink>i {
  font-size: 15px;
  font-size: 1.5rem
}

.pagination .nextpostslink.is_disable, .pagination .prevpostslink.is_disable {
  color: #fff;
  background: #e1e1e1;
  border: 0;
}

@media screen and (min-width: 761px) {
  .pagination {
    margin-bottom: 100px
  }
}

.pg_next {
  position: relative
}

.pg_next::before, .pg_next::after {
  position: absolute;
  top: calc(22em / 20);
  right: 0;
  height: calc(2em / 18);
  margin-right: auto;
  margin-left: auto;
  background-color: #000;
  transition: 0.3s transform ease-in-out;
  content: ""
}

.pg_next::before {
  left: calc(9em / 18);
  width: calc(9em / 18);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom
}

.pg_next::after {
  left: 0;
  width: calc(16em / 18);
  -webkit-transform-origin: left center;
  transform-origin: left center
}

.pg_next:hover::before, .pg_next:hover::after {
  background-color: #ffff
}

.pg_pre {
  position: relative
}

.pg_pre::before, .pg_pre::after {
  position: absolute;
  top: calc(22em / 20);
  right: 0;
  height: calc(2em / 18);
  margin-right: auto;
  margin-left: auto;
  background-color: #000;
  transition: 0.3s transform ease-in-out;
  content: ""
}

.pg_pre::before {
  left: calc(-3em / 18);
  width: calc(9em / 18);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom
}

.pg_pre::after {
  left: 0;
  width: calc(16em / 18);
  -webkit-transform-origin: left center;
  transform-origin: left center
}

.pg_pre:hover::before, .pg_pre:hover::after {
  background-color: #ffff
}

#detail_header h2 {
  font-size: 30px
}

@media screen and (max-width: 760px) {
  #works .works_items li a figure h3 {
    font-size: 3vw
  }
  #detail_header h2 {
    font-size: 20px
  }
  #top #idx_people .bg_image {
    background-position-y: 0 !important;
    background-size: cover
  }
  #top #idx_people .bg_image h2 {
    top: 6%;
    margin-top: 0
  }
  h2 .en, #blog_list h2, #blog_detail h2, #works_detail h2 {
    line-height: 1.4
  }
  #top #idx_people .innr h2 {
    margin: 0 0 40px
  }
  #members #leaders #box01 img, #members #leaders #box02 img {
    width: 100%
  }
  #top #middle_image {
    height: 200px
  }
  #works_list .pagination {
    padding-bottom: 60px
  }
  .pagination {
    letter-spacing: -0.4em;
    text-align: center
  }
  .pagination>a {
    display: inline-block;
    *display: inline;
    width: 40px;
    height: 40px;
    margin: 0 5.5px;
    color: #000;
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 40px;
    letter-spacing: normal;
    vertical-align: middle;
    *zoom: 1
  }
  .pagination span {
    display: inline-block;
    *display: inline;
    display: inline-block;
    *display: inline;
    width: 40px;
    width: 30px;
    height: 40px;
    height: 30px;
    margin: 0 5.5px;
    margin: 0 4px;
    color: #000;
    color: #000;
    font-size: 18px;
    font-size: 1.8rem;
    font-size: 14px;
    line-height: 40px;
    line-height: 30px;
    letter-spacing: normal;
    letter-spacing: normal;
    vertical-align: middle;
    vertical-align: middle;
    *zoom: 1;
    *zoom: 1
  }
  .pagination span.is_is_disable {
    color: #f3f3f3 !important;
    color: #f3f3f3 !important;
    background: #eee !important;
    background: #eee !important;
    border: 0;
    border: 0;
  }
  .pagination>a.is_is_disable {
    color: #f3f3f3 !important;
    background: #eee !important;
    border: 0;
  }
  .pagination>a {
    display: inline-block;
    *display: inline;
    width: 30px;
    height: 30px;
    margin: 0 4px;
    color: #000;
    font-size: 14px;
    line-height: 30px;
    letter-spacing: normal;
    vertical-align: middle;
    *zoom: 1
  }
  .pagination>a.is_is_disable {
    color: #f3f3f3 !important;
    background: #eee !important;
    border: 0;
  }
  .pagination>a {
    transition: color 0.35s, background-color 0.35s
  }
  .pagination>a:hover {
    color: #fff;
    transition: color 0.35s, background-color 0.35s
  }
  .pagination>span {
    border: 1px solid #434343
  }
  .pagination>span.current {
    color: #fff;
    border: 0
  }
  .pagination .nextpostslink>i, .pagination .prevpostslink>i {
    font-size: 15px;
    font-size: 1.5rem
  }
  .pagination .nextpostslink.is_disable, .pagination .prevpostslink.is_disable {
    color: #fff;
    background: #e1e1e1;
    border: 0;
  }
  .pg_next {
    position: relative
  }
  .pg_next::before, .pg_next::after {
    position: absolute;
    top: 15px;
    right: 0;
    height: 2px;
    margin-right: auto;
    margin-left: auto;
    background-color: #000;
    transition: 0.3s transform ease-in-out;
    content: ""
  }
  .pg_next::before {
    left: 7px;
    width: 7px;
    height: 2px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom
  }
  .pg_next::after {
    left: 0;
    width: 14px;
    -webkit-transform-origin: left center;
    transform-origin: left center
  }
  .pg_next:hover::before, .pg_next:hover::after {
    background-color: #ffff
  }
  .pg_pre {
    position: relative
  }
  .pg_pre::before, .pg_pre::after {
    position: absolute;
    top: 15px;
    right: 0;
    height: 2px;
    margin-right: auto;
    margin-left: auto;
    background-color: #000;
    transition: 0.3s transform ease-in-out;
    content: ""
  }
  .pg_pre::before {
    left: -3px;
    width: 7px;
    height: 2px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom
  }
  .pg_pre::after {
    left: 0;
    width: 14px;
    -webkit-transform-origin: left center;
    transform-origin: left center
  }
  .pg_pre:hover::before, .pg_pre:hover::after {
    background-color: #ffff
  }
}

@media screen and (max-width: 550px) {
  .sp.sp550 {
    display: block
  }
  #footer_navi .block {
    width: 33.3%
  }
  #footer #adress li {
    width: 50%
  }
  #footer #adress li:first-child {
    width: 100%;
    margin: 15px 0;
    font-size: 18px
  }
}

@media screen and (max-width: 480px) {
  .sp_only {
    display: block
  }
  .pc_only {
    display: none
  }
  #mv {
    background-position: 92% 70%
  }
  #top #idx_people .bg_image {
    background-image: url("../img/top/img_201909-sp.jpg");
  }
  #top #idx_people .bg_image h2 {
    top: 4%
  }
}

.btn_mask {
  transition: transform 0.425s ease-in-out
}

.sp_pic_list {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  justify-content: center
}

.sp_pic_list li {
  position: relative;
  box-sizing: border-box;
  width: 46%;
  max-width: 235px;
  margin: 2%
}

.sp_pic_list li .sp_pic {
  position: absolute;
  top: 12.2%;
  left: 7.65%;
  width: 85.1%
}

#tab_contents table {
  margin-bottom: 30px
}

.input {
  display: block;
  margin-bottom: 25px
}

@media screen and (max-width: 320px) {
  #members .title {
    font-size: 38px
  }
}

body, td, th {
  font-family: 'Noto Sans JP', Hiragino Sans, Meiryo, sans-serif
}

#blog_detail .w1280 #post_detail h2 {
  margin: 6% 0 3%;
  font-weight: bold;
  font-size: 28px;
  text-align: left
}

#blog_detail .w1280 #post_detail h3 {
  margin: 6% 0 3%;
  font-weight: bold;
  font-size: 24px;
  line-height: 1.6;
  text-align: left
}

#blog_detail .w1280 #post_detail h4 {
  margin: 6% 0 3%;
  font-weight: bold;
  font-size: 20px;
  line-height: 1.6;
  text-align: left
}

#blog_detail .w1280 #post_detail p {
  font-size: 18px
}

#blog_detail .w1280 #post_detail li {
  margin: 0 0 10px 20px;
  font-size: 110%;
  list-style: disc outside
}

.ttl_author {
  margin: 6% 0;
  font-size: 36px
}

.works_eye {
  max-width: 600px;
  margin: 0 auto 6%;
  box-shadow: 0 10px 12px -1px #ccc
}

#works .works_items li .outerttl {
  padding-top: 5px;
  color: #333;
  font-size: 15px
}

#idx_people .innr {
  margin-bottom: 80px
}

#policy section {
  margin-bottom: 80px
}

#policy section h2 {
  margin-bottom: 20px;
  font-size: 24px;
  text-align: left
}

#policy section p {
  margin-bottom: 14px
}

.flex_comp {
  display: -webkit-box;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  -webkit-box-pack: justify;
  -webkit-box-align: end
}

#post_detail figure.alignright {
  float: right;
  margin: 0 0 20px 20px
}

#post_detail figure.alignleft {
  float: left;
  margin: 0 20px 20px 0
}

#post_detail .detail-sub {
  margin: 10px 0;
  padding: 20px;
  background: #f1f1f1
}

@media screen and (max-width: 650px) {
  .ttl_author {
    font-size: 20px
  }
  #idx_people .innr {
    margin-bottom: 40px
  }
  #works .works_items li .outerttl {
    padding-top: 8px;
    font-size: 12px
  }
  #top #blog {
    background: none
  }
  #members .rltv #txt, #recruit .rltv #txt {
    top: 2px
  }
  #policy section {
    margin-bottom: 50px
  }
  #policy section h2 {
    font-size: 18px
  }
  #post_detail figure.alignright, #post_detail figure.alignleft {
    float: none;
    margin: 0 auto 20px;
    text-align: center
  }
  #recruit #intro .intro-title {
    font-size: 22px
  }
}

.l-pjax-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none
}

.l-pjax-overlay__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.l-pjax-overlay__bg .line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 20.1%;
  background: #fff;
  -webkit-transform: translateX(100%);
  transform: translateX(100%)
}

.l-pjax-overlay__bg .line:nth-child(0) {
  top: -20%
}

.l-pjax-overlay__bg .line:nth-child(1) {
  top: 0
}

.l-pjax-overlay__bg .line:nth-child(2) {
  top: 20%
}

.l-pjax-overlay__bg .line:nth-child(3) {
  top: 40%
}

.l-pjax-overlay__bg .line:nth-child(4) {
  top: 60%
}

.l-pjax-overlay__bg .line:nth-child(5) {
  top: 80%
}

.l-pjax-overlay__bg .line:nth-child(6) {
  top: 100%
}

.l-pjax-overlay__bg .line:nth-child(7) {
  top: 120%
}

.l-pjax-overlay__bg .line:nth-child(8) {
  top: 140%
}

.l-pjax-overlay__bg .line:nth-child(9) {
  top: 160%
}

.l-pjax-overlay__bg .line:nth-child(10) {
  top: 180%
}

.l-pjax-overlay__contents {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}

@media all and (max-width: 767px) {
  .l-pjax-overlay__contents {
    width: 80%
  }
}

.l-pjax-overlay__line-items {
  position: relative;
  width: 100%;
  height: 12px;
  margin: 12px 0 0;
  overflow: hidden;
  opacity: 0
}

@media all and (max-width: 767px) {
  .l-pjax-overlay__line-items {
    height: 8px
  }
}

.l-pjax-overlay__line-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 12px;
  background: linear-gradient(to right, #30c9d1 0%, #2ab0d6 100%);
  -webkit-transform: translateX(200%);
  transform: translateX(200%)
}

.home .l-pjax-overlay__line-item {
  display: none
}

.l-pjax-overlay.on {
  z-index: 1000;
  z-index: 99
}

.l-pjax-overlay.on .l-pjax-overlay__bg .line {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  transition: -webkit-transform 0.6s cubic-bezier(0.45, 0.05, 0.3, 0.93) 0s;
  transition: transform 0.6s cubic-bezier(0.45, 0.05, 0.3, 0.93) 0s;
  transition: transform 0.6s cubic-bezier(0.45, 0.05, 0.3, 0.93) 0s, -webkit-transform 0.6s cubic-bezier(0.45, 0.05, 0.3, 0.93) 0s;
  will-change: transition
}

.l-pjax-overlay.on .l-pjax-overlay__bg .line:nth-child(0) {
  transition-delay: 0.5s
}

.l-pjax-overlay.on .l-pjax-overlay__bg .line:nth-child(1) {
  transition-delay: 0.45s
}

.l-pjax-overlay.on .l-pjax-overlay__bg .line:nth-child(2) {
  transition-delay: 0.4s
}

.l-pjax-overlay.on .l-pjax-overlay__bg .line:nth-child(3) {
  transition-delay: 0.35s
}

.l-pjax-overlay.on .l-pjax-overlay__bg .line:nth-child(4) {
  transition-delay: 0.3s
}

.l-pjax-overlay.on .l-pjax-overlay__bg .line:nth-child(5) {
  transition-delay: 0.25s
}

.l-pjax-overlay.on:not(.go) .l-pjax-overlay__line-items {
  opacity: 1
}

.l-pjax-overlay.on .l-pjax-overlay__line-item--0 {
  -webkit-animation: pjax-overlay-line 1.3s cubic-bezier(0.45, 0.05, 0.3, 0.93) 0.3s infinite;
  animation: pjax-overlay-line 1.3s cubic-bezier(0.45, 0.05, 0.3, 0.93) 0.3s infinite
}

.l-pjax-overlay.off {
  z-index: 1000
}

.l-pjax-overlay.off .l-pjax-overlay__bg .line {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  transition: -webkit-transform 0.6s cubic-bezier(0.45, 0.05, 0.3, 0.93) 0s;
  transition: transform 0.6s cubic-bezier(0.45, 0.05, 0.3, 0.93) 0s;
  transition: transform 0.6s cubic-bezier(0.45, 0.05, 0.3, 0.93) 0s, -webkit-transform 0.6s cubic-bezier(0.45, 0.05, 0.3, 0.93) 0s;
  will-change: transition
}

.l-pjax-overlay.off .l-pjax-overlay__bg .line:nth-child(0) {
  transition-delay: 0.5s
}

.l-pjax-overlay.off .l-pjax-overlay__bg .line:nth-child(1) {
  transition-delay: 0.45s
}

.l-pjax-overlay.off .l-pjax-overlay__bg .line:nth-child(2) {
  transition-delay: 0.4s
}

.l-pjax-overlay.off .l-pjax-overlay__bg .line:nth-child(3) {
  transition-delay: 0.35s
}

.l-pjax-overlay.off .l-pjax-overlay__bg .line:nth-child(4) {
  transition-delay: 0.3s
}

.l-pjax-overlay.off .l-pjax-overlay__bg .line:nth-child(5) {
  transition-delay: 0.25s
}

.l-pjax-overlay.off:not(.go) .l-pjax-overlay__line-items {
  opacity: 0;
  transition: opacity 0.5s ease 0s
}

@-webkit-keyframes pjax-overlay-line {
  0% {
    -webkit-transform: translateX(200%);
    transform: translateX(200%)
  }
  70% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
  }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
  }
}

@keyframes pjax-overlay-line {
  0% {
    -webkit-transform: translateX(200%);
    transform: translateX(200%)
  }
  70% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
  }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
  }
}

@-webkit-keyframes welcome {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0)
  }
  20% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
  80% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
  100% {
    -webkit-transform: scale(0);
    transform: scale(0)
  }
}

@keyframes welcome {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0)
  }
  20% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
  80% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
  100% {
    -webkit-transform: scale(0);
    transform: scale(0)
  }
}

.welcome {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10001;
  width: 50vw;
  max-width: 300px;
  height: auto;
  margin: auto;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-animation: welcome 1.5s ease 0.5s 1 normal both running;
  animation: welcome 1.5s ease 0.5s 1 normal both running
}

#faq {
  margin-bottom: 6em
}

.faq-Unit {
  position: relative
}

.faq-Unit::before, .faq-Unit::after {
  position: absolute;
  display: block;
  text-align: center;
  border: 1px solid #505050;
  content: ""
}

.faq-Unit::after {
  top: 24px;
  right: 8px;
  width: 5px;
  height: 5px;
  border-bottom: none;
  border-left: none;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: -webkit-transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.faq-Unit.open::after {
  top: 26px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg)
}

.faq-Unit::before {
  top: 17px;
  right: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%
}

.faq-Unit dt, .faq-Unit dd {
  position: relative;
  margin-bottom: 2em;
  padding-top: 1em;
  padding-left: 5em
}

.faq-Unit dt::before {
  position: absolute;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  color: #000;
  font-size: 2em;
  background-color: #f0f3f5;
  border-radius: 50%;
  content: "Q";
  -webkit-box-align: center;
  -webkit-box-pack: center
}

.faq-Unit dd::before {
  position: absolute;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  color: #000;
  color: #fff;
  font-size: 2em;
  background-color: #f0f3f5;
  background-color: #ef3453;
  border-radius: 50%;
  content: "Q";
  content: "A";
  -webkit-box-align: center;
  -webkit-box-pack: center
}

.faq-Unit dt {
  min-height: 3em;
  padding-right: 2.2em;
  transition: 0.5s color ease-in-out
}

.faq-Unit dt:hover {
  color: #44a7e0
}

.faq-Unit dt span {
  position: relative;
  display: inline-block

}

.faq-Unit dt span::after {
  position: absolute;
  right: 0;
  bottom: -0.5em;
  left: 0;
  height: 1px;
  background-color: #44a7e0;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  transition: 0.5s transform ease-in-out;
  content: ""
}

.faq-Unit dt:hover span::after {
  -webkit-transform: scaleX(1);
  transform: scaleX(1)
}

.faq-Unit dd {
  display: none
}

.faq-Unit dd p+p {
  margin-top: 1.9em
}

.home-NC {
  display: -webkit-box;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  width: calc(980em / 16);
  margin-right: auto;
  margin-bottom: calc(80em / 16);
  margin-left: auto;
  padding: calc(60em / 16);
  font-size: 1.53846154vw;
  background-color: #fafafa;
  -webkit-box-pack: justify
}

.home-NC * {
  box-sizing: inherit
}

.home-NC *::before, .home-NC *::after {
  box-sizing: inherit
}

@media print, screen and (min-width: 1040px) {
  .home-NC {
    font-size: medium
  }
}

.home-NC_Primary {
  display: -webkit-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(410em / 16);
  -webkit-box-align: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal
}

.home-NC_Title {
  width: calc(159em / 16);
  height: calc(91.703em / 16);
  margin-bottom: calc(38em / 16);
  font-size: 1em
}

.home-NC_Copy {
  width: 100%;
  margin-bottom: calc(37em / 22);
  color: #727272;
  font-weight: bold;
  font-size: calc(22em / 16);
  line-height: 1;
  text-align: center
}

.home-NC_Text {
  width: 100%;
  margin-bottom: calc(34em / 15);
  font-size: calc(15em / 16);
  line-height: 2;
  letter-spacing: 0.04em
}

.home-NC_Text::before, .home-NC_Text::after {
  display: block;
  margin-bottom: -0.5em;
  content: ""
}

.home-NC_Link {
  position: relative;
  display: block;
  align-self: flex-start;
  padding-right: calc(26em / 16);
  font-weight: bold;
  font-size: calc(18em / 16);
  line-height: 1
}

.home-NC_Link::before {
  position: absolute;
  background-color: #34c1ca;
  transition: 0.3s transform;
  content: ""
}

.home-NC_Link::after {
  position: absolute;
  top: 50%;
  right: 0;
  width: calc(16em / 18);
  height: calc(2em / 18);
  background-color: #34c1ca;
  -webkit-transform-origin: 0 center;
  transform-origin: 0 center;
  transition: 0.3s transform;
  content: ""
}

.home-NC_Link::before {
  top: 50%;
  right: 0;
  width: calc(7em / 18);
  height: calc(2em / 18);
  margin-top: calc(-3em / 18);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg)
}

.home-NC_Link:hover::after {
  -webkit-transform: scaleX(1.5625);
  transform: scaleX(1.5625)
}

.home-NC_Link:hover::before {
  -webkit-transform: translateX(0.5625em) rotate(45deg);
  transform: translateX(0.5625em) rotate(45deg)
}

.home-NC_Img {
  width: calc(410em / 16)
}

@media screen and (max-width: 760px) {
  .home-NC {
    flex-direction: column;
    justify-content: flex-start;
    width: calc(100% - 40em / 24 * 2);
    margin-bottom: 0;
    padding: calc(50em / 24);
    font-size: 3.2vw;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: start
  }
  .home-NC_Primary {
    width: 100%;
    margin-bottom: calc(49em / 24)
  }
  .home-NC_Title {
    width: calc(218em / 24);
    height: calc(125.734em / 24);
    margin-top: calc(10em / 24);
    margin-bottom: calc(54em / 24)
  }
  .home-NC_Copy {
    margin-bottom: calc(53em / 28);
    font-size: calc(28em / 24)
  }
  .home-NC_Text {
    margin-bottom: calc(43em / 26);
    font-size: calc(26em / 24);
    line-height: calc(42 / 26);
    letter-spacing: 0
  }
  .home-NC_Text::before, .home-NC_Text::after {
    margin-bottom: calc(-8em / 26)
  }
  .home-NC_Link {
    padding-right: calc(43em / 24);
    font-size: 1em
  }
  .home-NC_Img {
    width: 100%
  }
}

@media print, screen and (min-width: 769px) {
  .footer-DiamondMenu {
    text-align: center
  }
  .footer-DiamondMenu_List {
    max-width: 1100px;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 10px;
    box-sizing: border-box
  }
  .footer-DiamondMenu_List li {
    display: inline-block;
    width: 17%
  }
  .footer-DiamondMenu_List li:nth-child(n+1):nth-child(-n+5) {
    margin-bottom: 2.5%
  }
  .footer-DiamondMenu_List li a {
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-radius 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)
  }
  .footer-DiamondMenu_List li a:hover {
    border-radius: 20px;
    box-shadow: 0 5px 35px rgba(0, 0, 0, 0.35);
    transform: scale(0.87)
  }
  .footer-DiamondMenu_List li a:hover img {
    transform: scale(1.2)
  }
  .footer-DiamondMenu_List li a .footer-DiamondMenu_Secondary {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    font-size: 24px;
    font-family: "Oswald", sans-serif;
    white-space: nowrap;
    text-align: center;
    transform: translate(-50%, -50%)
  }
  .footer-DiamondMenu_List li a .footer-DiamondMenu_Secondary p {
    font-weight: bold;
    line-height: 1.6
  }
  .footer-DiamondMenu_List li a .footer-DiamondMenu_Secondary p span {
    font-size: 16px;
    font-family: "ヒラギノ角ゴシック", Hiragino Sans, Meiryo, sans-serif
  }
  .footer-DiamondMenu_List li a img {
    width: 100%;
    transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)
  }
}

@media (max-width: 768px) {
  .footer-DiamondMenu_Link:hover {
    text-decoration: none
  }
  .footer-DiamondMenu_Text {
    font-weight: 600;
    font-size: calc(22em / 16);
    font-family: "Oswald", sans-serif;
    line-height: 1.3
  }
  .footer-DiamondMenu_Text span {
    font-weight: 100;
    font-size: calc(11em / 16);
    font-family: "ヒラギノ角ゴシック", Hiragino Sans, Meiryo, sans-serif
  }
}

@media screen and (max-width: 768px) {
  .footer-DiamondMenu {
    padding: 0 20px;
    font-size: 3.2vw
  }
  .footer-DiamondMenu_List {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    height: calc(130em / 24 * 5);
    height: auto;
    margin-top: -1px;
    margin-right: 0;
    margin-bottom: 70px
  }
  .footer-DiamondMenu_List.inview {
    transform: translate(0, 100px);
    opacity: 0;
    transition: all 1.5s cubic-bezier(0.075, 0.82, 0.165, 1)
  }
  .footer-DiamondMenu_List.fire {
    transform: translate(0, 0);
    opacity: 1
  }
  .footer-DiamondMenu_List>li {
    flex: 0 1 50%;
    width: 100%;
    height: auto;
    margin-right: 0;
    margin-bottom: 0;
    padding: 10px 0;
    overflow: hidden;
    border-bottom: 1px solid #e6e6e6
  }
  .footer-DiamondMenu_List>li:nth-last-of-type(1), .footer-DiamondMenu_List>li:nth-last-of-type(2) {
    border-bottom: none
  }
  .footer-DiamondMenu_Link {
    position: relative;
    display: block;
    color: inherit;
    transition: 0.5s all ease-in-out
  }
  .footer-DiamondMenu_Link__inner {
    display: -webkit-box;
    display: flex;
    align-items: center;
    height: 100%;
    color: inherit;
    -webkit-box-align: center
  }
  .footer-DiamondMenu_Link__Img {
    flex-shrink: 0;
    width: calc(90em / 24);
    margin-right: calc(35em / 24);
    -webkit-filter: none;
    filter: none
  }
  .footer-DiamondMenu_Link__Img img {
    width: 100%;
    max-width: 100%;
    margin: 0
  }
  .footer-DiamondMenu_Secondary {
    position: static;
    display: block
  }
  .footer-DiamondMenu_Text {
    -webkit-box-align: start;
    align-items: flex-start;
    font-size: calc(32em / 24)
  }
  .footer-DiamondMenu_Text::after {
    margin-top: calc(16em / 32);
    font-weight: 500;
    white-space: nowrap;
    -webkit-transform: scale(0.6875);
    transform: scale(0.6875);
    -webkit-transform-origin: 0 center;
    transform-origin: 0 center
  }
}

.rotation-char {
  display: inline-block;
  transition: -webkit-transform 2s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: transform 2s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: transform 2s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 2s cubic-bezier(0.075, 0.82, 0.165, 1);
  will-change: transform
}

.btn_more a:hover .rotation-char, #works a:hover~* .rotation-char, #blog a:hover .rotation-char, #contactBtn .btn-contact:hover .rotation-char {
  -webkit-transform: rotate3d(1, 0, 0, 360deg);
  transform: rotate3d(1, 0, 0, 360deg)
}

.contact-btn {
  display: none
}

@media screen and (max-width: 767px) {
  .pagetopIcon {
    display: none
  }
  .contact-btn {
    position: fixed;
    right: calc(40em / 24);
    bottom: calc(80em / 24);
    z-index: 100;
    display: block;
    font-size: 3.2vw
  }
  .contact-btn li+li {
    width: calc(90em / 24);
    margin-top: calc(20em / 24)
  }
  .contact-btn a {
    display: -webkit-box;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(90em / 24);
    background-image: linear-gradient(to right, #aded01 0%, #fffc0f 100%);
    border-radius: 50%;
    box-shadow: 0 calc(6em / 24) calc(10em / 24) rgba(0, 0, 0, 0.18);
    -webkit-box-align: center;
    -webkit-box-pack: center
  }
  .contact-btn span {
    display: block;
    width: 0;
    overflow: hidden;
    text-indent: 100%
  }
  .contact-btn li:nth-child(1) img {
    width: calc(33em / 24);
    height: calc(33em / 24)
  }
  .contact-btn li:nth-child(2) img {
    width: calc(34em / 24);
    height: calc(25.438em / 24)
  }
}

@media screen and (min-width: 481px) and (max-width: 767px) {
  .contact-btn {
    font-size: 2.5vw
  }
}

.footer_logo {
  display: block;
  width: 200px;
  height: 83.984px;
  margin-top: 60px;
  margin-right: auto;
  margin-bottom: 60px;
  margin-left: auto
}

.footer_logo svg {
  display: block;
  width: 100%
}

.glitch {
  position: relative;
  color: white;
  font-size: 4em;
  letter-spacing: 0.5em;
  -webkit-animation: glitch-skew 1s infinite linear alternate-reverse;
  animation: glitch-skew 1s infinite linear alternate-reverse
}

.glitch::before, .glitch::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../../img/logo3.svg);
  background-size: 200px 83.984px;
  content: ""
}

.glitch::before {
  left: 1px;
  -webkit-filter: drop-shadow(-1px 0 #ff00c1);
  filter: drop-shadow(-1px 0 #8d7e89);
  -webkit-animation: glitch-anim 5s infinite linear alternate-reverse;
  animation: glitch-anim 5s infinite linear alternate-reverse;
  clip: rect(44px, 450px, 56px, 0)
}

.glitch::after {
  left: -1px;
  -webkit-filter: drop-shadow(-1px 0 #00fff9) drop-shadow(1px 1px #ff00c1);
  filter: drop-shadow(-1px 0 #00fff9) drop-shadow(1px 1px #ff00c1);
  -webkit-animation: glitch-anim2 1s infinite linear alternate-reverse;
  animation: glitch-anim2 1s infinite linear alternate-reverse
}

@-webkit-keyframes glitch-anim {
  0% {
    -webkit-transform: skew(0.95deg);
    transform: skew(0.95deg);
    clip: rect(80px, 9999px, 96px, 0)
  }
  5% {
    -webkit-transform: skew(0.34deg);
    transform: skew(0.34deg);
    clip: rect(59px, 9999px, 29px, 0)
  }
  10% {
    -webkit-transform: skew(0.56deg);
    transform: skew(0.56deg);
    clip: rect(72px, 9999px, 63px, 0)
  }
  15% {
    -webkit-transform: skew(0.27deg);
    transform: skew(0.27deg);
    clip: rect(39px, 9999px, 16px, 0)
  }
  20% {
    -webkit-transform: skew(0.28deg);
    transform: skew(0.28deg);
    clip: rect(72px, 9999px, 1px, 0)
  }
  25% {
    -webkit-transform: skew(0.31deg);
    transform: skew(0.31deg);
    clip: rect(16px, 9999px, 57px, 0)
  }
  30% {
    -webkit-transform: skew(0.09deg);
    transform: skew(0.09deg);
    clip: rect(35px, 9999px, 67px, 0)
  }
  35% {
    -webkit-transform: skew(0.36deg);
    transform: skew(0.36deg);
    clip: rect(89px, 9999px, 67px, 0)
  }
  40% {
    -webkit-transform: skew(0.46deg);
    transform: skew(0.46deg);
    clip: rect(6px, 9999px, 49px, 0)
  }
  45% {
    -webkit-transform: skew(0.2deg);
    transform: skew(0.2deg);
    clip: rect(82px, 9999px, 44px, 0)
  }
  50% {
    -webkit-transform: skew(0.2deg);
    transform: skew(0.2deg);
    clip: rect(44px, 9999px, 60px, 0)
  }
  55% {
    -webkit-transform: skew(0.34deg);
    transform: skew(0.34deg);
    clip: rect(44px, 9999px, 69px, 0)
  }
  60% {
    -webkit-transform: skew(0.68deg);
    transform: skew(0.68deg);
    clip: rect(19px, 9999px, 5px, 0)
  }
  65% {
    -webkit-transform: skew(0.76deg);
    transform: skew(0.76deg);
    clip: rect(26px, 9999px, 10px, 0)
  }
  70% {
    -webkit-transform: skew(0.42deg);
    transform: skew(0.42deg);
    clip: rect(45px, 9999px, 34px, 0)
  }
  75% {
    -webkit-transform: skew(0.23deg);
    transform: skew(0.23deg);
    clip: rect(91px, 9999px, 44px, 0)
  }
  80% {
    -webkit-transform: skew(0.92deg);
    transform: skew(0.92deg);
    clip: rect(78px, 9999px, 83px, 0)
  }
  85% {
    -webkit-transform: skew(0.42deg);
    transform: skew(0.42deg);
    clip: rect(59px, 9999px, 64px, 0)
  }
  90% {
    -webkit-transform: skew(0.43deg);
    transform: skew(0.43deg);
    clip: rect(38px, 9999px, 53px, 0)
  }
  95% {
    -webkit-transform: skew(0.51deg);
    transform: skew(0.51deg);
    clip: rect(7px, 9999px, 57px, 0)
  }
  100% {
    -webkit-transform: skew(0.24deg);
    transform: skew(0.24deg);
    clip: rect(97px, 9999px, 11px, 0)
  }
}

@keyframes glitch-anim {
  0% {
    -webkit-transform: skew(0.95deg);
    transform: skew(0.95deg);
    clip: rect(80px, 9999px, 96px, 0)
  }
  5% {
    -webkit-transform: skew(0.34deg);
    transform: skew(0.34deg);
    clip: rect(59px, 9999px, 29px, 0)
  }
  10% {
    -webkit-transform: skew(0.56deg);
    transform: skew(0.56deg);
    clip: rect(72px, 9999px, 63px, 0)
  }
  15% {
    -webkit-transform: skew(0.27deg);
    transform: skew(0.27deg);
    clip: rect(39px, 9999px, 16px, 0)
  }
  20% {
    -webkit-transform: skew(0.28deg);
    transform: skew(0.28deg);
    clip: rect(72px, 9999px, 1px, 0)
  }
  25% {
    -webkit-transform: skew(0.31deg);
    transform: skew(0.31deg);
    clip: rect(16px, 9999px, 57px, 0)
  }
  30% {
    -webkit-transform: skew(0.09deg);
    transform: skew(0.09deg);
    clip: rect(35px, 9999px, 67px, 0)
  }
  35% {
    -webkit-transform: skew(0.36deg);
    transform: skew(0.36deg);
    clip: rect(89px, 9999px, 67px, 0)
  }
  40% {
    -webkit-transform: skew(0.46deg);
    transform: skew(0.46deg);
    clip: rect(6px, 9999px, 49px, 0)
  }
  45% {
    -webkit-transform: skew(0.2deg);
    transform: skew(0.2deg);
    clip: rect(82px, 9999px, 44px, 0)
  }
  50% {
    -webkit-transform: skew(0.2deg);
    transform: skew(0.2deg);
    clip: rect(44px, 9999px, 60px, 0)
  }
  55% {
    -webkit-transform: skew(0.34deg);
    transform: skew(0.34deg);
    clip: rect(44px, 9999px, 69px, 0)
  }
  60% {
    -webkit-transform: skew(0.68deg);
    transform: skew(0.68deg);
    clip: rect(19px, 9999px, 5px, 0)
  }
  65% {
    -webkit-transform: skew(0.76deg);
    transform: skew(0.76deg);
    clip: rect(26px, 9999px, 10px, 0)
  }
  70% {
    -webkit-transform: skew(0.42deg);
    transform: skew(0.42deg);
    clip: rect(45px, 9999px, 34px, 0)
  }
  75% {
    -webkit-transform: skew(0.23deg);
    transform: skew(0.23deg);
    clip: rect(91px, 9999px, 44px, 0)
  }
  80% {
    -webkit-transform: skew(0.92deg);
    transform: skew(0.92deg);
    clip: rect(78px, 9999px, 83px, 0)
  }
  85% {
    -webkit-transform: skew(0.42deg);
    transform: skew(0.42deg);
    clip: rect(59px, 9999px, 64px, 0)
  }
  90% {
    -webkit-transform: skew(0.43deg);
    transform: skew(0.43deg);
    clip: rect(38px, 9999px, 53px, 0)
  }
  95% {
    -webkit-transform: skew(0.51deg);
    transform: skew(0.51deg);
    clip: rect(7px, 9999px, 57px, 0)
  }
  100% {
    -webkit-transform: skew(0.24deg);
    transform: skew(0.24deg);
    clip: rect(97px, 9999px, 11px, 0)
  }
}

@-webkit-keyframes glitch-anim2 {
  0% {
    -webkit-transform: skew(0.45deg);
    transform: skew(0.45deg);
    clip: rect(71px, 9999px, 43px, 0)
  }
  5% {
    -webkit-transform: skew(0.06deg);
    transform: skew(0.06deg);
    clip: rect(18px, 9999px, 39px, 0)
  }
  10% {
    -webkit-transform: skew(0.81deg);
    transform: skew(0.81deg);
    clip: rect(24px, 9999px, 64px, 0)
  }
  15% {
    -webkit-transform: skew(0.63deg);
    transform: skew(0.63deg);
    clip: rect(66px, 9999px, 39px, 0)
  }
  20% {
    -webkit-transform: skew(0.86deg);
    transform: skew(0.86deg);
    clip: rect(38px, 9999px, 20px, 0)
  }
  25% {
    -webkit-transform: skew(0.63deg);
    transform: skew(0.63deg);
    clip: rect(41px, 9999px, 91px, 0)
  }
  30% {
    -webkit-transform: skew(0.33deg);
    transform: skew(0.33deg);
    clip: rect(79px, 9999px, 42px, 0)
  }
  35% {
    -webkit-transform: skew(0.69deg);
    transform: skew(0.69deg);
    clip: rect(27px, 9999px, 49px, 0)
  }
  40% {
    -webkit-transform: skew(0.25deg);
    transform: skew(0.25deg);
    clip: rect(56px, 9999px, 67px, 0)
  }
  45% {
    -webkit-transform: skew(0.51deg);
    transform: skew(0.51deg);
    clip: rect(76px, 9999px, 22px, 0)
  }
  50% {
    -webkit-transform: skew(0.53deg);
    transform: skew(0.53deg);
    clip: rect(77px, 9999px, 91px, 0)
  }
  55% {
    -webkit-transform: skew(0.52deg);
    transform: skew(0.52deg);
    clip: rect(91px, 9999px, 77px, 0)
  }
  60% {
    -webkit-transform: skew(0.87deg);
    transform: skew(0.87deg);
    clip: rect(4px, 9999px, 100px, 0)
  }
  65% {
    -webkit-transform: skew(0.89deg);
    transform: skew(0.89deg);
    clip: rect(37px, 9999px, 35px, 0)
  }
  70% {
    -webkit-transform: skew(0.47deg);
    transform: skew(0.47deg);
    clip: rect(68px, 9999px, 11px, 0)
  }
  75% {
    -webkit-transform: skew(0.68deg);
    transform: skew(0.68deg);
    clip: rect(21px, 9999px, 72px, 0)
  }
  80% {
    -webkit-transform: skew(0.34deg);
    transform: skew(0.34deg);
    clip: rect(45px, 9999px, 33px, 0)
  }
  85% {
    -webkit-transform: skew(0.53deg);
    transform: skew(0.53deg);
    clip: rect(95px, 9999px, 10px, 0)
  }
  90% {
    -webkit-transform: skew(0.02deg);
    transform: skew(0.02deg);
    clip: rect(12px, 9999px, 71px, 0)
  }
  95% {
    -webkit-transform: skew(0.56deg);
    transform: skew(0.56deg);
    clip: rect(20px, 9999px, 58px, 0)
  }
  100% {
    -webkit-transform: skew(0.18deg);
    transform: skew(0.18deg);
    clip: rect(87px, 9999px, 95px, 0)
  }
}

@keyframes glitch-anim2 {
  0% {
    -webkit-transform: skew(0.45deg);
    transform: skew(0.45deg);
    clip: rect(71px, 9999px, 43px, 0)
  }
  5% {
    -webkit-transform: skew(0.06deg);
    transform: skew(0.06deg);
    clip: rect(18px, 9999px, 39px, 0)
  }
  10% {
    -webkit-transform: skew(0.81deg);
    transform: skew(0.81deg);
    clip: rect(24px, 9999px, 64px, 0)
  }
  15% {
    -webkit-transform: skew(0.63deg);
    transform: skew(0.63deg);
    clip: rect(66px, 9999px, 39px, 0)
  }
  20% {
    -webkit-transform: skew(0.86deg);
    transform: skew(0.86deg);
    clip: rect(38px, 9999px, 20px, 0)
  }
  25% {
    -webkit-transform: skew(0.63deg);
    transform: skew(0.63deg);
    clip: rect(41px, 9999px, 91px, 0)
  }
  30% {
    -webkit-transform: skew(0.33deg);
    transform: skew(0.33deg);
    clip: rect(79px, 9999px, 42px, 0)
  }
  35% {
    -webkit-transform: skew(0.69deg);
    transform: skew(0.69deg);
    clip: rect(27px, 9999px, 49px, 0)
  }
  40% {
    -webkit-transform: skew(0.25deg);
    transform: skew(0.25deg);
    clip: rect(56px, 9999px, 67px, 0)
  }
  45% {
    -webkit-transform: skew(0.51deg);
    transform: skew(0.51deg);
    clip: rect(76px, 9999px, 22px, 0)
  }
  50% {
    -webkit-transform: skew(0.53deg);
    transform: skew(0.53deg);
    clip: rect(77px, 9999px, 91px, 0)
  }
  55% {
    -webkit-transform: skew(0.52deg);
    transform: skew(0.52deg);
    clip: rect(91px, 9999px, 77px, 0)
  }
  60% {
    -webkit-transform: skew(0.87deg);
    transform: skew(0.87deg);
    clip: rect(4px, 9999px, 100px, 0)
  }
  65% {
    -webkit-transform: skew(0.89deg);
    transform: skew(0.89deg);
    clip: rect(37px, 9999px, 35px, 0)
  }
  70% {
    -webkit-transform: skew(0.47deg);
    transform: skew(0.47deg);
    clip: rect(68px, 9999px, 11px, 0)
  }
  75% {
    -webkit-transform: skew(0.68deg);
    transform: skew(0.68deg);
    clip: rect(21px, 9999px, 72px, 0)
  }
  80% {
    -webkit-transform: skew(0.34deg);
    transform: skew(0.34deg);
    clip: rect(45px, 9999px, 33px, 0)
  }
  85% {
    -webkit-transform: skew(0.53deg);
    transform: skew(0.53deg);
    clip: rect(95px, 9999px, 10px, 0)
  }
  90% {
    -webkit-transform: skew(0.02deg);
    transform: skew(0.02deg);
    clip: rect(12px, 9999px, 71px, 0)
  }
  95% {
    -webkit-transform: skew(0.56deg);
    transform: skew(0.56deg);
    clip: rect(20px, 9999px, 58px, 0)
  }
  100% {
    -webkit-transform: skew(0.18deg);
    transform: skew(0.18deg);
    clip: rect(87px, 9999px, 95px, 0)
  }
}

@-webkit-keyframes glitch-skew {
  0% {
    -webkit-transform: skew(-1deg);
    transform: skew(-1deg)
  }
  10% {
    -webkit-transform: skew(-4deg);
    transform: skew(-4deg)
  }
  20% {
    -webkit-transform: skew(0deg);
    transform: skew(0deg)
  }
  30% {
    -webkit-transform: skew(-4deg);
    transform: skew(-4deg)
  }
  40% {
    -webkit-transform: skew(-3deg);
    transform: skew(-3deg)
  }
  50% {
    -webkit-transform: skew(-1deg);
    transform: skew(-1deg)
  }
  60% {
    -webkit-transform: skew(3deg);
    transform: skew(3deg)
  }
  70% {
    -webkit-transform: skew(0deg);
    transform: skew(0deg)
  }
  80% {
    -webkit-transform: skew(1deg);
    transform: skew(1deg)
  }
  90% {
    -webkit-transform: skew(2deg);
    transform: skew(2deg)
  }
  100% {
    -webkit-transform: skew(3deg);
    transform: skew(3deg)
  }
}

@keyframes glitch-skew {
  0% {
    -webkit-transform: skew(-1deg);
    transform: skew(-1deg)
  }
  10% {
    -webkit-transform: skew(-4deg);
    transform: skew(-4deg)
  }
  20% {
    -webkit-transform: skew(0deg);
    transform: skew(0deg)
  }
  30% {
    -webkit-transform: skew(-4deg);
    transform: skew(-4deg)
  }
  40% {
    -webkit-transform: skew(-3deg);
    transform: skew(-3deg)
  }
  50% {
    -webkit-transform: skew(-1deg);
    transform: skew(-1deg)
  }
  60% {
    -webkit-transform: skew(3deg);
    transform: skew(3deg)
  }
  70% {
    -webkit-transform: skew(0deg);
    transform: skew(0deg)
  }
  80% {
    -webkit-transform: skew(1deg);
    transform: skew(1deg)
  }
  90% {
    -webkit-transform: skew(2deg);
    transform: skew(2deg)
  }
  100% {
    -webkit-transform: skew(3deg);
    transform: skew(3deg)
  }
}

.ct-ContactBtn .btn-contact {
  position: fixed;
  top: 94px;
  right: 0;
  z-index: 100;
  width: 110px;
  height: 110px;
  color: inherit;
  font-size: 11px;
  font-family: "Oswald", sans-serif;
  text-align: center;
  background: linear-gradient(90deg, #25fec8 0%, #ffea01 50%, #25fec8 100%);
  background-size: 200% 100%;
  border-radius: 55px;
  box-shadow: 6px 0 10px 0 rgba(0, 0, 0, 0.18);
  -webkit-transform: translateX(55px) rotate(90deg);
  transform: translateX(55px) rotate(90deg);
  transition: background-position 0.3s ease-in-out 0s
}

.ct-ContactBtn .btn-contact:hover {
  background-position: right center
}

.ct-ContactBtn .btn-contact:hover .ico-letter {
  top: 76%;
  width: 20px;
  height: 15px
}

.ct-ContactBtn .btn-contact .txt-contact {
  position: absolute;
  top: 54%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

.ct-ContactBtn .btn-contact .ico-letter {
  position: absolute;
  top: 77%;
  left: 53%;
  display: block;
  width: 18px;
  height: 13px;
  -webkit-transform: translateX(-50%) rotate(-90deg);
  transform: translateX(-50%) rotate(-90deg);
  transition: all 0.3s ease-in-out 0s
}

.ct-ContactBtn .btn-contact .ico-letter img {
  display: block;
  max-width: 100%
}

.overlay-contact {
  position: relative;
  overflow: hidden
}

.overlay-contact::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.5);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), visibility 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  content: ""
}

.overlay-contact_inner {
  -webkit-filter: none;
  filter: none;
  transition: -webkit-filter 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: filter 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: filter 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-filter 0.3s cubic-bezier(0.075, 0.82, 0.165, 1)
}

.overlay-contact.open .overlay-contact_inner {
  -webkit-filter: blur(10px);
  filter: blur(10px)
}

.overlay-contact.open::after {
  visibility: visible;
  opacity: 1
}

@supports (-moz-appearance: none) {
  .overlay-contact.open .overlay-contact_inner {
    filter: none
  }
}

.ct-ContactBtn .nav-contact {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  box-sizing: border-box;
  width: calc(330px + 85px);
  height: 100%;
  text-align: center;
  background-color: #fff;
  border-bottom-left-radius: 100vw;
  -webkit-transform: translate3d(100%, 0, 0) translate3d(85px, 0, 0);
  transform: translate3d(100%, 0, 0) translate3d(85px, 0, 0);
  transition: border-bottom-left-radius 0.5s cubic-bezier(0.075, 0.82, 0.165, 1) 0s, -webkit-transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1) 0s;
  transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1) 0s, border-bottom-left-radius 0.5s cubic-bezier(0.075, 0.82, 0.165, 1) 0s;
  transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1) 0s, border-bottom-left-radius 0.5s cubic-bezier(0.075, 0.82, 0.165, 1) 0s, -webkit-transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1) 0s
}

.ct-ContactBtn .nav-contact.open {
  border-bottom-left-radius: 0;
  -webkit-transform: none;
  transform: none
}

.ct-ContactBtn .nav-contact .btn-close {
  position: absolute;
  top: 94px;
  left: -85px;
  z-index: -1;
  display: -webkit-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  line-height: 1;
  background-color: #fff;
  border-radius: 55px;
  -webkit-transform: translateX(55px);
  transform: translateX(55px);
  -webkit-box-pack: center;
  -webkit-box-align: center
}

.ct-ContactBtn .nav-contact .btn-close span {
  display: inline-block;
  width: 77px;
  height: 77px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2277px%22%20height%3D%2277px%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22PSgrad_0%22%20x1%3D%220%25%22%20x2%3D%22100%25%22%20y1%3D%220%25%22%20y2%3D%220%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22rgb(82%2C160%2C253)%22%20stop-opacity%3D%221%22%20%2F%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22rgb(0%2C226%2C250)%22%20stop-opacity%3D%221%22%20%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill-opacity%3D%220%22%20fill%3D%22rgb(244%2C%20247%2C%20248)%22%20d%3D%22M57.000%2C45.085%20L56.086%2C45.999%20L49.000%2C38.914%20L41.915%2C45.999%20L41.001%2C45.085%20L48.086%2C38.000%20L41.001%2C30.914%20L41.915%2C30.000%20L49.000%2C37.085%20L56.086%2C30.000%20L57.000%2C30.914%20L49.915%2C38.000%20L57.000%2C45.085%20Z%22%2F%3E%3Cpath%20fill%3D%22url(%23PSgrad_0)%22%20d%3D%22M57.000%2C45.085%20L56.086%2C45.999%20L49.000%2C38.914%20L41.915%2C45.999%20L41.001%2C45.085%20L48.086%2C38.000%20L41.001%2C30.914%20L41.915%2C30.000%20L49.000%2C37.085%20L56.086%2C30.000%20L57.000%2C30.914%20L49.915%2C38.000%20L57.000%2C45.085%20Z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: -34px 50%
}

.ct-ContactBtn .nav-contact .nav-contact_inner {
  height: 100%;
  padding: 90px 31px 20px 31px;
  overflow-y: auto
}

.ct-ContactBtn .nav-contact .menu-contents .ttl-feel {
  height: 77px
}

.ct-ContactBtn .nav-contact .menu-contents .ttl-feel img {
  max-height: 100%
}

.ct-ContactBtn .nav-contact .menu-contents .ico-sun {
  height: 80px
}

.ct-ContactBtn .nav-contact .menu-contents .ico-sun img {
  max-height: 100%
}

.ct-ContactBtn .nav-contact .menu-contents .ttl-contact {
  margin-top: 2px;
  font-size: 40px;
  font-family: "Oswald", sans-serif;
  line-height: 1
}

.ct-ContactBtn .nav-contact .menu-contents .ttl-contact-ja {
  margin-top: 18px;
  font-weight: 600;
  font-size: 16px
}

.ct-ContactBtn .nav-contact .menu-contents .ttl-tel {
  margin-top: 60px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1
}

.ct-ContactBtn .nav-contact .menu-contents .txt-tel {
  margin-top: 12px;
  font-weight: 500;
  font-size: 30px;
  font-family: "Roboto", sans-serif;
  line-height: 1
}

.ct-ContactBtn .nav-contact .menu-contents .txt-tel::before {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 0.1em;
  background-image: url(../img/common/icon-tel.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  content: ""
}

.ct-ContactBtn .nav-contact .menu-contents .txt-hour {
  margin-top: 10px;
  font-weight: 300;
  font-size: 18px;
  font-family: "Roboto", sans-serif;
  line-height: 1
}

.ct-ContactBtn .nav-contact .menu-contents .txt-hour::before {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 0.2em;
  margin-bottom: -2px;
  background-image: url(../img/common/icon_time.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  content: ""
}

.ct-ContactBtn .nav-contact .menu-contents .link-contact a, .ct-ContactBtn .nav-contact .menu-contents .link-download a {
  display: block;
  width: 100%;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border-radius: 30px
}

.ct-ContactBtn .nav-contact .menu-contents .pop-onhover {
  position: relative;
  z-index: 1
}

.ct-ContactBtn .nav-contact .menu-contents .pop-onhover::after {
  position: absolute;
  right: 30px;
  bottom: 0;
  left: 30px;
  z-index: 0;
  z-index: -1;
  display: inline-block;
  height: 40px;
  background: linear-gradient(to right, #52a0fd 0%, #00e2fa 80%, #00e2fa 100%);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  opacity: 0;
  -webkit-filter: blur(20px) brightness(0.95);
  filter: blur(20px) brightness(0.95);
  transition: all 0.3s ease-out;
  content: ""
}

.ct-ContactBtn .nav-contact .menu-contents .pop-onhover:hover::after {
  bottom: -7px;
  opacity: 1;
  -webkit-filter: blur(20px);
  filter: blur(20px)
}

.ct-ContactBtn .nav-contact .menu-contents .pop-onhover span {
  display: inline-block;
  width: 100%;
  line-height: 60px;
  background: #52a0fd;
  background: linear-gradient(to right, #52a0fd 0%, #00e2fa 80%, #00e2fa 100%);
  border-radius: 30em;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: all 0.3s ease-out;
  will-change: transform, filter
}

.ct-ContactBtn .nav-contact .menu-contents .pop-onhover:hover span {
  -webkit-transform: scale(1.04);
  transform: scale(1.04);
  -webkit-filter: brightness(1.05) contrast(1.05);
  filter: brightness(1.05) contrast(1.05)
}

.ct-ContactBtn .nav-contact .menu-contents .link-contact a::before, .ct-ContactBtn .nav-contact .menu-contents .link-download a::before {
  display: inline-block;
  margin-right: 0.3em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  content: ""
}

.ct-ContactBtn .nav-contact .menu-contents .link-contact {
  margin-top: 34px
}

.ct-ContactBtn .nav-contact .menu-contents .link-contact a::before {
  width: 20px;
  height: 20px;
  margin-bottom: -0.25em;
  background-image: url(../img/common/mail.svg)
}

.ct-ContactBtn .nav-contact .menu-contents .link-download {
  margin-top: 10px
}

.ct-ContactBtn .nav-contact .menu-contents .link-download a::before {
  width: 16px;
  height: 16px;
  margin-bottom: -0.14em;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018.34%2018.31%22%3E%3Cpath%20id%3D%22pdf%22%20fill%3D%22%23fff%22%20d%3D%22M0%2C18.31V0H18.34V18.31Zm15.49-7.52c-.3-.51-1.12-.72-2.34-.72-.41%2C0-.81.11-1.32.11a6.66%2C6.66%2C0%2C0%2C1-.92-.62A7.32%2C7.32%2C0%2C0%2C1%2C9.28%2C6.91v-.1c.41-1.32.71-2.95%2C0-3.66a1.48%2C1.48%2C0%2C0%2C0-.61-.21H8.46c-.4%2C0-.71.41-.81.82a4.75%2C4.75%2C0%2C0%2C0%2C.2%2C3.36%2C20.63%2C20.63%2C0%2C0%2C1-1.12%2C3c-.4.72-.71%2C1.33-1%2C1.84-.41.2-.72.4-.92.5a4%2C4%2C0%2C0%2C0-1.94%2C2.14.85.85%2C0%2C0%2C0%2C.11.51v.1l.51.31c.1.1.2.1.4.1.82%2C0%2C1.84-1%2C3.06-3.16.1-.1.1-.1.2-.1a17%2C17%2C0%2C0%2C1%2C4.07-.81%2C7.36%2C7.36%2C0%2C0%2C0%2C3.06.71%2C2.09%2C2.09%2C0%2C0%2C0%2C.92-.2c.2-.21.3-.51.4-.61A1.29%2C1.29%2C0%2C0%2C0%2C15.49%2C10.79Zm-.91.61a5.59%2C5.59%2C0%2C0%2C1-1.94-.51v-.1h.2c1.43%2C0%2C1.84.3%2C1.94.4a.1.1%2C0%2C0%2C0%2C.1.11v.1h-.3ZM7%2C11.6h-.1c.2-.41.4-.71.61-1.12A22.4%2C22.4%2C0%2C0%2C0%2C8.57%2C8a10.51%2C10.51%2C0%2C0%2C0%2C1.52%2C2.34%2C1.61%2C1.61%2C0%2C0%2C0%2C.41.3%2C15.89%2C15.89%2C0%2C0%2C0-3.36.92ZM8.67%2C4.78a3.42%2C3.42%2C0%2C0%2C1-.21.91%2C4.22%2C4.22%2C0%2C0%2C1%2C0-2.24.1.1%2C0%2C0%2C0%2C.11-.1l.1.1v.1a1.63%2C1.63%2C0%2C0%2C1%2C0%2C1ZM3.58%2C14.66A5%2C5%2C0%2C0%2C1%2C4.9%2C13a2%2C2%2C0%2C0%2C1%2C.51-.31C4.8%2C13.94%2C4.19%2C14.55%2C3.58%2C14.66Z%22%2F%3E%3C%2Fsvg%3E")
}

@media screen and (max-width: 767px) {
  .ct-ContactBtn {
    display: none
  }
}

#design {
  width: 78px;
  height: 61px;
  margin-top: -30px
}

#design #mirror {
  opacity: 0.3
}

#design #pen {
  opacity: 0;
  animation-name: slideupDesign;
  animation-duration: 1s;
  animation-delay: 0.8s;
  animation-fill-mode: forwards
}

#design #text .st3:first-child {
  transform: translateX(10px);
  opacity: 0;
  animation-name: slideDesign;
  animation-duration: 1.5s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#design #text .st3:nth-child(2) {
  transform: translateX(10px);
  opacity: 0;
  animation-name: slideDesign;
  animation-duration: 1.5s;
  animation-delay: 1.2s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#design #text .st4:nth-child(3) {
  transform: translateX(10px);
  opacity: 0;
  animation-name: slideDesign;
  animation-duration: 1.5s;
  animation-delay: 1.4s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#design #text .st4:nth-child(4) {
  transform: translateX(10px);
  opacity: 0;
  animation-name: slideDesign;
  animation-duration: 1.5s;
  animation-delay: 1.6s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#design #text .st4:nth-child(5) {
  transform: translateX(10px);
  opacity: 0;
  animation-name: slideDesign;
  animation-duration: 1.5s;
  animation-delay: 1.8s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#design .st0 {
  fill: #ddd
}

#design .st1 {
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-miterlimit: 10
}

#design .st2 {
  opacity: 0.3;
  fill: #2cbee1
}

#design .st3 {
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-miterlimit: 10
}

#design .st4 {
  fill: none;
  stroke: #2cbee1;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-miterlimit: 10
}

#design .st5 {
  fill: #fff
}

#design .st6 {
  fill: #2cbee1;
  stroke: #000;
  stroke-width: 2;
  stroke-miterlimit: 10
}

@keyframes slideupDesign {
  0% {
    transform: translateY(100%);
    opacity: 0
  }
  100% {
    transform: translateY(0);
    opacity: 1
  }
}

@keyframes slideDesign {
  0% {
    transform: translateX(10px);
    opacity: 0
  }
  50% {
    transform: translateX(0);
    opacity: 1
  }
}

#htmlcss, #responsive, #wordpress, #ecommerce, #languages, #ssl {
  display: block;
  width: 40%;
  margin: auto
}

#htmlcss .st0 {
  fill: #2cbee1;
  stroke: #1d1d1b;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-miterlimit: 10
}

#htmlcss .st1 {
  fill: #fff
}

#htmlcss .st2 {
  opacity: 0.3;
  fill: #2cbee1
}

#htmlcss .st3 {
  fill: none;
  stroke: #1d1d1b;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10
}

#htmlcss .st4 {
  fill: #2cbee1
}

#htmlcss .st5 {
  fill: #1d1d1b
}

#htmlcss #css {
  opacity: 0;
  animation-name: showCSS;
  animation-duration: 1s;
  animation-fill-mode: forwards
}

#responsive .st0 {
  opacity: 0.3;
  fill: #2cbee1
}

#responsive .st1 {
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-miterlimit: 10
}

#responsive .st2 {
  fill: #fff
}

#wordpress .st0 {
  opacity: 0.3;
  clip-path: url(#SVGID_2_);
  fill: #2cbee1;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10
}

#wordpress .st1 {
  fill: #fff;
  stroke: #000;
  stroke-miterlimit: 10
}

#wordpress .st2 {
  opacity: 0.3;
  clip-path: url(#SVGID_4_);
  fill: #2cbee1;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10
}

#wordpress .st3 {
  fill: #2cbee1
}

#ecommerce .st0 {
  opacity: 0.3;
  fill: #2cbee1
}

#ecommerce .st1 {
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-miterlimit: 10
}

#ecommerce .st2 {
  fill: #2cbee1;
  stroke: #1d1d1b;
  stroke-width: 2;
  stroke-miterlimit: 10
}

#languages .st0 {
  opacity: 0.3;
  fill: #2cbee1
}

#languages .st1 {
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10
}

#languages .st2 {
  fill: #1d1d1b;
  stroke: #1d1e1b;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10
}

#languages .st3 {
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-miterlimit: 10
}

#languages .st4 {
  fill: #1d1d1b
}

#ssl .st0 {
  fill: #1d1d1b
}

#ssl .st1 {
  fill: #fff
}

#ssl .st2 {
  opacity: 0.3;
  fill: #2cbee1
}

#ssl .st3 {
  fill: none;
  stroke: #1d1d1b;
  stroke-width: 2;
  stroke-miterlimit: 10
}

#ssl .st4 {
  fill: none;
  stroke: #1d1d1b;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10
}

#ssl .st5 {
  fill: #2cbee1;
  stroke: #000;
  stroke-width: 2;
  stroke-miterlimit: 10
}

.icons {
  padding: 50px;
  overflow: hidden
}

.icons .item {
  position: relative;
  float: left;
  width: 33%;
  height: 420px;
  padding: 4%
}

.icons .item svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%)
}

.icons .item:nth-child(4) {
  clear: left
}

#cart {
  opacity: 0;
  animation-name: slideCart;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

@keyframes slideCart {
  0% {
    transform: translateX(20px);
    opacity: 0
  }
  66% {
    transform: translateX(-20px);
    opacity: 1
  }
  100% {
    transform: translateX(-20px);
    opacity: 0
  }
}

#languages #big_bubble {
  opacity: 0;
  animation-name: showLeftLanguages;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#languages #small_bubble {
  opacity: 0;
  animation-name: showRightLanguages;
  animation-duration: 4s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

@keyframes showLeftLanguages {
  0% {
    transform: translateX(20px);
    opacity: 0
  }
  50% {
    transform: translateX(0);
    opacity: 1
  }
  100% {
    transform: translateX(20px);
    opacity: 0
  }
}

@keyframes showRightLanguages {
  0% {
    transform: translateX(-10px);
    opacity: 0
  }
  50% {
    transform: translateX(0);
    opacity: 1
  }
  100% {
    transform: translateX(-10px);
    opacity: 0
  }
}

#responsive #laptop {
  opacity: 0;
  animation-name: showLaptop;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#responsive #tablet {
  opacity: 0;
  animation-name: showTablet;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#responsive #mobile {
  opacity: 0;
  animation-name: showMobile;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

@keyframes showLaptop {
  0% {
    transform: translateX(-10px);
    opacity: 0
  }
  30% {
    transform: translateX(0);
    opacity: 1
  }
  60% {
    transform: translateX(0);
    opacity: 1
  }
}

@keyframes showTablet {
  0% {
    transform: translateX(10px);
    opacity: 0
  }
  30% {
    transform: translateX(0);
    opacity: 1
  }
  70% {
    transform: translateX(0);
    opacity: 1
  }
}

@keyframes showMobile {
  0% {
    transform: translateY(-10px);
    opacity: 0
  }
  30% {
    transform: translateX(0);
    opacity: 1
  }
  80% {
    transform: translateX(0);
    opacity: 1
  }
}

#ssl #lock {
  opacity: 0;
  animation-name: showLock;
  animation-duration: 2s;
  animation-fill-mode: forwards
}

#ssl #lock #key {
  animation-name: pulseKey;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#ssl #text .st0:nth-child(1) {
  opacity: 0;
  animation-name: slideSSL;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#ssl #text .st0:nth-child(2) {
  opacity: 0;
  animation-name: slideSSL;
  animation-duration: 3s;
  animation-delay: 0.2s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#ssl #text .st0:nth-child(3) {
  opacity: 0;
  animation-name: slideSSL;
  animation-duration: 3s;
  animation-delay: 0.4s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

@keyframes showLock {
  0% {
    transform: translateX(10px);
    opacity: 0
  }
  100% {
    transform: translateX(0);
    opacity: 1
  }
}

@keyframes pulseKey {
  0% {
    transform: scale(1);
    transform-origin: 50%
  }
  70% {
    transform: scale(1.15);
    transform-origin: 50%
  }
  100% {
    transform: scale(1);
    transform-origin: 50%
  }
}

@keyframes slideSSL {
  0% {
    transform: translateY(100%);
    opacity: 0
  }
  50% {
    transform: translateY(0);
    opacity: 1
  }
}

#wordpress #big_cog {
  animation-name: wordpressBig;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#wordpress #small_cog {
  animation-name: wordpressSmall;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

@keyframes wordpressBig {
  0% {
    transform: rotate(0);
    transform-origin: 50%
  }
  100% {
    transform: rotate(360deg);
    transform-origin: 50%
  }
}

@keyframes wordpressSmall {
  0% {
    transform: rotate(0);
    transform-origin: 50%
  }
  100% {
    transform: rotate(-360deg);
    transform-origin: 50%
  }
}

#htmlcss #css {
  opacity: 0;
  animation-name: showCSS;
  animation-duration: 1s;
  animation-fill-mode: forwards
}

#htmlcss #html {
  opacity: 0;
  animation-name: showHTML;
  animation-duration: 1s;
  animation-fill-mode: forwards
}

#htmlcss #css #content .st5:nth-child(1) {
  opacity: 0;
  animation-name: slideCSS;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#htmlcss #css #content .st5:nth-child(2) {
  opacity: 0;
  animation-name: slideCSS;
  animation-duration: 3s;
  animation-delay: 0.2s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#htmlcss #css #content .st5:nth-child(3) {
  opacity: 0;
  animation-name: slideCSS;
  animation-duration: 3s;
  animation-delay: 0.4s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#htmlcss #html #content .st5:nth-child(1) {
  opacity: 0;
  animation-name: slideHTML;
  animation-duration: 3s;
  animation-delay: 0.2s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#htmlcss #html #content .st5:nth-child(2) {
  opacity: 0;
  animation-name: slideHTML;
  animation-duration: 3s;
  animation-delay: 0.4s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#htmlcss #html #content .st5:nth-child(3) {
  opacity: 0;
  animation-name: slideHTML;
  animation-duration: 3s;
  animation-delay: 0.6s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#htmlcss #html #content .st5:nth-child(4) {
  opacity: 0;
  animation-name: slideHTML;
  animation-duration: 3s;
  animation-delay: 0.8s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#htmlcss #html #content #icon {
  animation-name: pulseHTML;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#htmlcss #css #content #icon {
  animation-name: pulseCSS;
  animation-duration: 1s;
  animation-delay: 1.5s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

@keyframes showCSS {
  0% {
    transform: translateY(10px);
    opacity: 0
  }
  100% {
    transform: translateY(0);
    opacity: 1
  }
}

@keyframes showHTML {
  0% {
    transform: translateY(-10px);
    opacity: 0
  }
  100% {
    transform: translateY(0);
    opacity: 1
  }
}

@keyframes slideCSS {
  0% {
    transform: translateY(100%);
    opacity: 0
  }
  50% {
    transform: translateY(0);
    opacity: 1
  }
}

@keyframes slideHTML {
  0% {
    transform: translateY(100%);
    opacity: 0
  }
  50% {
    transform: translateY(0);
    opacity: 1
  }
}

@keyframes pulseHTML {
  0% {
    transform: scale(1);
    transform-origin: 50%
  }
  70% {
    transform: scale(1.1);
    transform-origin: 50%
  }
  100% {
    transform: scale(1);
    transform-origin: 50%
  }
}

@keyframes pulseCSS {
  0% {
    transform: scale(1);
    transform-origin: 50%
  }
  70% {
    transform: scale(1.1);
    transform-origin: 50%
  }
  100% {
    transform: scale(1);
    transform-origin: 50%
  }
}

#webservice {
  width: 84px;
  height: auto;
  margin-top: -29px
}

#webservice .st0 {
  opacity: 0.3;
  fill: #2cbee1
}

#webservice .st1 {
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-miterlimit: 10
}

#webservice .st2 {
  fill: #fff;
  stroke: #000;
  stroke-width: 2;
  stroke-miterlimit: 10
}

#webservice .st3 {
  fill: #2cbee1;
  stroke: #000;
  stroke-width: 2;
  stroke-miterlimit: 10
}

#webservice .st4 {
  fill: #ddd;
  stroke: #1d1d1b;
  stroke-width: 2;
  stroke-miterlimit: 10
}

#webservice .st5 {
  fill: #2cbee1
}

#webservice #content .st1:first-child {
  transform: translateX(-10px);
  opacity: 0;
  animation-name: slideWebservice;
  animation-duration: 4s;
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#webservice #content .st1:nth-child(2) {
  transform: translateX(-10px);
  opacity: 0;
  animation-name: slideWebservice;
  animation-duration: 4s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#webservice #content .st1:nth-child(3) {
  transform: translateX(-10px);
  opacity: 0;
  animation-name: slideWebservice;
  animation-duration: 4s;
  animation-delay: 1.5s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#webservice #content .st1:nth-child(4) {
  transform: translateX(-10px);
  opacity: 0;
  animation-name: slideWebservice;
  animation-duration: 4s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#webservice #content .st1:nth-child(5) {
  transform: translateX(-10px);
  opacity: 0;
  animation-name: slideWebservice;
  animation-duration: 4s;
  animation-delay: 2.5s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#webservice #content .code {
  transform: translateX(-10px);
  opacity: 0;
  animation-name: slideWebserviceCode;
  animation-duration: 2s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards
}

#webservice #content .code2 {
  transform: translateX(-10px);
  opacity: 0;
  animation-name: slideWebserviceCode;
  animation-duration: 2s;
  animation-delay: 3s;
  animation-fill-mode: forwards
}

@keyframes slideWebservice {
  0% {
    transform: translateX(-10px);
    opacity: 0
  }
  50% {
    transform: translateX(0);
    opacity: 1
  }
}

@keyframes slideWebserviceCode {
  0% {
    transform: translateX(-10px);
    opacity: 0
  }
  100% {
    transform: translateX(0);
    opacity: 1
  }
}

#consultation {
  width: 84px;
  height: 62px;
  margin-top: -31px
}

#consultation #haze_x5F_left {
  transform: rotate(20deg) translateX(-20px) translateY(20px);
  opacity: 0;
  animation-name: showConsultation;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards
}

#consultation #haze_x5F_left .st8 {
  opacity: 0;
  animation-name: show2Consultation;
  animation-duration: 1s;
  animation-delay: 1.6s;
  animation-fill-mode: forwards
}

#consultation #haze_x5F_left .st9 {
  opacity: 0;
  animation-name: slideConsultation;
  animation-duration: 2.5s;
  animation-delay: 1.6s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#consultation #haze_x5F_left .st9:last-child {
  opacity: 0;
  animation-name: slideConsultation;
  animation-duration: 2.5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#consultation #haze_x5F_right {
  transform: rotate(-20deg) translateX(20px) translateY(20px);
  opacity: 0;
  animation-name: showRightConsultation;
  animation-duration: 1s;
  animation-delay: 1.5s;
  animation-fill-mode: forwards
}

#consultation #haze_x5F_right .st8 {
  opacity: 0;
  animation-name: show2Consultation;
  animation-duration: 1.5s;
  animation-delay: 2.5s;
  animation-fill-mode: forwards
}

#consultation #haze_x5F_right .st9 {
  opacity: 0;
  animation-name: slideConsultation;
  animation-duration: 1.5s;
  animation-delay: 2.5s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#consultation #haze_x5F_right .st9:last-child {
  opacity: 0;
  animation-name: slideConsultation;
  animation-duration: 1.5s;
  animation-delay: 2.8s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#consultation .st0 {
  fill: #fcbc85
}

#consultation .st1 {
  fill: #fff
}

#consultation .st2 {
  fill: #684b37
}

#consultation .st3 {
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10
}

#consultation .st4 {
  fill: #ddd;
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-miterlimit: 10
}

#consultation .st5 {
  fill: #ddd
}

#consultation .st6 {
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-miterlimit: 10
}

#consultation .st7 {
  fill: #fff;
  stroke: #000;
  stroke-width: 2;
  stroke-miterlimit: 10
}

#consultation .st8 {
  opacity: 0.3;
  fill: #2cbee1
}

#consultation .st9 {
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-miterlimit: 10
}

@keyframes showConsultation {
  0% {
    transform: rotate(20deg) translateX(-20px) translateY(20px);
    opacity: 0
  }
  20% {
    transform: rotate(20deg) translateX(-20px) translateY(20px);
    opacity: 0
  }
  80% {
    transform: rotate(0) translateX(0) translateY(0);
    opacity: 1
  }
  100% {
    transform: rotate(0) translateX(0) translateY(0);
    opacity: 1
  }
}

@keyframes showRightConsultation {
  0% {
    transform: rotate(-20deg) translateX(20px) translateY(20px);
    opacity: 0
  }
  100% {
    transform: rotate(0) translateX(0) translateY(0);
    opacity: 1
  }
}

@keyframes show2Consultation {
  0% {
    opacity: 0
  }
  100% {
    opacity: 0.3
  }
}

@keyframes slideConsultation {
  0% {
    transform: translateX(10px);
    opacity: 0
  }
  50% {
    transform: translateX(0);
    opacity: 1
  }
}

#dtp {
  width: 83px;
  height: 60px;
  margin-top: -30px
}

#dtp #big #photo {
  opacity: 0;
  animation-name: slideupDtp;
  animation-duration: 3s;
  animation-delay: 1s;
  animation-iteration-count: infinite
}

#dtp #big #left #text .st1:first-child {
  opacity: 0;
  animation-name: slideDtp;
  animation-duration: 3s;
  animation-delay: 1.3s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#dtp #big #left #text .st1:nth-child(2) {
  opacity: 0;
  animation-name: slideDtp;
  animation-duration: 3s;
  animation-delay: 1.5s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#dtp #big #text_x5F_right .st1:first-child {
  opacity: 0;
  animation-name: slideDtp;
  animation-duration: 3s;
  animation-delay: 1.6s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#dtp #big #text_x5F_right .st1:nth-child(2) {
  opacity: 0;
  animation-name: slideDtp;
  animation-duration: 3s;
  animation-delay: 1.5s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#dtp #big #text_x5F_right .st1:nth-child(3) {
  opacity: 0;
  animation-name: slideDtp;
  animation-duration: 3s;
  animation-delay: 1.7s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#dtp #big #text_x5F_right .st1:nth-child(4) {
  opacity: 0;
  animation-name: slideDtp;
  animation-duration: 3s;
  animation-delay: 1.8s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#dtp #big #text_x5F_right .st1:nth-child(5) {
  opacity: 0;
  animation-name: slideDtp;
  animation-duration: 3s;
  animation-delay: 1.9s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#dtp #small {
  opacity: 0;
  animation-name: fadeinFullDtp;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#dtp #small #circle {
  opacity: 0;
  animation-name: slideupDtp;
  animation-duration: 3s;
  animation-delay: 2.2s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#dtp #small #text_1_ .st1:first-child {
  opacity: 0;
  animation-name: slideDtp;
  animation-duration: 3s;
  animation-delay: 2.5s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#dtp #small #text_1_ .st1:nth-child(2) {
  opacity: 0;
  animation-name: slideDtp;
  animation-duration: 3s;
  animation-delay: 2.7s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#dtp .st0 {
  opacity: 0.3;
  fill: #2cbee1
}

#dtp .st1 {
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-miterlimit: 10
}

#dtp .st2 {
  fill: #fff
}

#dtp .st3 {
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-miterlimit: 10
}

#dtp .st4 {
  fill: #ddd
}

#dtp .st5 {
  fill: #fff;
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-miterlimit: 10
}

@keyframes slideupDtp {
  0% {
    transform: translateY(100%);
    opacity: 0
  }
  15% {
    transform: translateY(0);
    opacity: 1
  }
  85% {
    transform: translateY(0);
    opacity: 1
  }
  100% {
    transform: translateY(100%);
    opacity: 0
  }
}

@keyframes slideDtp {
  0% {
    transform: translateX(10px);
    opacity: 0
  }
  15% {
    transform: translateX(0);
    opacity: 1
  }
  85% {
    transform: translateX(0);
    opacity: 1
  }
  100% {
    transform: translateX(10px);
    opacity: 0
  }
}

@keyframes fadeinFullDtp {
  0% {
    opacity: 0
  }
  15% {
    opacity: 1
  }
  85% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

#webservice {
  width: 84px;
  height: 59px;
  margin-top: -29px
}

#photography {
  width: 84px;
  height: 59px;
  margin-top: -29px
}

#photography #camera circle.st2 {
  transform: scale(1);
  opacity: 1;
  animation-name: enlargePhoto;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#photography #photo_x5F_left {
  transform: rotate(-10deg);
  opacity: 0;
  animation-name: skewLeftPhoto;
  animation-duration: 2s;
  animation-delay: 3s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#photography #photo_x5F_right {
  transform: rotate(5deg) translateY(-20px);
  opacity: 0;
  animation-name: skewRightPhoto;
  animation-duration: 2s;
  animation-delay: 3s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#photography .st0 {
  fill: #ddd
}

#photography .st1 {
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-miterlimit: 10
}

#photography .st2 {
  fill: #fff
}

#photography .st3 {
  opacity: 0.3;
  fill: #2cbee1
}

#photography .st4 {
  fill: #2cbee1;
  stroke: #000;
  stroke-width: 2;
  stroke-miterlimit: 10
}

#photography .st5 {
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-miterlimit: 10
}

@keyframes enlargePhoto {
  0% {
    transform: scale(1);
    transform-origin: 50% 50%;
    opacity: 1
  }
  10% {
    transform: scale(1);
    transform-origin: 50% 50%;
    opacity: 1
  }
  15% {
    transform: scale(1);
    transform-origin: 50% 50%;
    opacity: 1
  }
  85% {
    transform: scale(1);
    transform-origin: 50% 50%;
    opacity: 1
  }
  90% {
    transform: scale(5);
    transform-origin: 50% 50%;
    opacity: 1
  }
  100% {
    transform: scale(1);
    transform-origin: 50% 50%;
    opacity: 1
  }
}

@keyframes skewLeftPhoto {
  0% {
    transform: rotate(-10deg);
    opacity: 0
  }
  50% {
    transform: rotate(0);
    opacity: 1
  }
}

@keyframes skewRightPhoto {
  0% {
    transform: rotate(5deg) translateY(-20px);
    opacity: 0
  }
  50% {
    transform: rotate(0) translateY(0);
    opacity: 1
  }
  100% {
    transform: rotate(5deg) translateY(-20px);
    opacity: 0
  }
}

#planning {
  width: 78px;
  height: 90px;
  margin-top: -45px
}

#planning #emty_x5F_field g:first-child .st1 {
  opacity: 0;
  animation-name: fadeinPlanning;
  animation-duration: 4s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#planning #emty_x5F_field g:nth-child(2) .st1 {
  opacity: 0;
  animation-name: fadeinPlanning;
  animation-duration: 4s;
  animation-delay: 1.5s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#planning #emty_x5F_field g:nth-child(3) .st1 {
  opacity: 0;
  animation-name: fadeinPlanning;
  animation-duration: 4s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#planning #way .st3 {
  opacity: 0;
  animation-name: fadeinPlanning;
  animation-duration: 4s;
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#planning #way path.st1, #planning #way path.st2 {
  opacity: 0;
  animation-name: fadeinGapPlanning;
  animation-duration: 4s;
  animation-delay: 2.5s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#planning #way polyline.st1 {
  opacity: 0;
  animation-name: fadeinGapPlanning;
  animation-duration: 4s;
  animation-delay: 2.5s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#planning .st0 {
  opacity: 0.3;
  fill: #2cbee1
}

#planning .st1 {
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-miterlimit: 10
}

#planning .st2 {
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 4.0414, 4.0414
}

#planning .st3 {
  fill: #2cbee1;
  stroke: #000;
  stroke-width: 2;
  stroke-miterlimit: 10
}

#planning .st4 {
  fill: #ddd
}

#planning .st5 {
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-miterlimit: 10
}

#planning .st6 {
  fill: #fff;
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-miterlimit: 10
}

@keyframes fadeinPlanning {
  0% {
    opacity: 0
  }
  10% {
    opacity: 1
  }
  90% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

@keyframes fadeinGapPlanning {
  0% {
    opacity: 0
  }
  20% {
    opacity: 1
  }
  40% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}

#seo {
  width: 79px;
  height: 68px;
  margin-top: -34px
}

#seo #arrow_x5F_grown .st1 {
  opacity: 0;
  animation-name: fadeinSeo;
  animation-duration: 3s;
  animation-delay: 1.2s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#seo #graph .st3:nth-child(7) {
  opacity: 0;
  animation-name: slideupSeo;
  animation-duration: 3s;
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#seo #graph .st3:nth-child(1) {
  opacity: 0;
  animation-name: slideupSeo;
  animation-duration: 3s;
  animation-delay: 0.7s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#seo #graph .st3:nth-child(2) {
  opacity: 0;
  animation-name: slideupSeo;
  animation-duration: 3s;
  animation-delay: 0.9s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#seo #graph .st3:nth-child(3) {
  opacity: 0;
  animation-name: slideupSeo;
  animation-duration: 3s;
  animation-delay: 1.1s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#seo #graph .st3:nth-child(4) {
  opacity: 0;
  animation-name: slideupSeo;
  animation-duration: 3s;
  animation-delay: 1.3s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#seo #graph .st3:nth-child(5) {
  opacity: 0;
  animation-name: slideupSeo;
  animation-duration: 3s;
  animation-delay: 1.5s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#seo #graph .st3:nth-child(6) {
  opacity: 0;
  animation-name: slideupSeo;
  animation-duration: 3s;
  animation-delay: 1.7s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards
}

#seo .st0 {
  opacity: 0.3;
  fill: #2cbee1
}

#seo .st1 {
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-miterlimit: 10
}

#seo .st2 {
  fill: #fff;
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-miterlimit: 10
}

#seo .st3 {
  fill: none;
  stroke: #2cbee1;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-miterlimit: 10
}

@keyframes fadeinSeo {
  0% {
    opacity: 0
  }
  50% {
    opacity: 1
  }
}

@keyframes slideupSeo {
  0% {
    transform: translateY(50%);
    opacity: 0
  }
  15% {
    transform: translateY(0);
    opacity: 1
  }
  85% {
    transform: translateY(0);
    opacity: 1
  }
  100% {
    transform: translateY(50%);
    opacity: 0
  }
}

#logo_nc {
  display: block;
  width: 118px;
  height: 68px;
  margin: auto
}

#logo_nc .st0 {
  fill: #231815
}

#logo_nc .st1 {
  clip-path: url(#SVGID_2_);
  fill: #231815
}

#logo_gf {
  display: block;
  width: 60%;
  height: 68px;
  margin: 20px 0 0 0;
  margin: auto
}

#logo_gf .st0 {
  fill: #bfa548
}

#logo_gf .st1 {
  fill: #fff
}

#logo_gf .st2 {
  fill: none
}

#logo_blog {
  width: 100px;
  margin-top: -30px;
  padding: 0
}

@media screen and (max-width: 760px) {
  #logo_blog {
    width: 80px;
    margin-top: 50px
  }
}

#icon01 .cls-1 {
  fill: #ff0
}

#icon01 .cls-2 {
  fill: #29b9de
}

#icon01 .cls-3 {
  fill: none;
  stroke: #29b9de;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5px
}

#icon02 .cls-1 {
  fill: #29b9de
}

#icon02 .cls-2 {
  fill: #ff0
}

#icon02 .cls-3 {
  fill: #fff
}

#icon02 .cls-4 {
  fill: none;
  stroke: #29b9de;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5px
}

#icon03 .cls-1 {
  fill: #ff0
}

#icon03 .cls-2 {
  fill: #29b9de
}

#icon03 .cls-3 {
  fill: #fff
}

#icon03 .cls-4, #icon03 .cls-5 {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5px
}

#icon03 .cls-4 {
  stroke: #29b9de
}

#icon03 .cls-5 {
  stroke: #fff
}

#icon04 .cls-1 {
  fill: #ff0
}

#icon04 .cls-2 {
  fill: #fff
}

#icon04 .cls-3 {
  fill: #29b9de
}

#icon04 .cls-4 {
  fill: none;
  stroke: #29b9de;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5px
}

#icon05 .cls-1, #icon06 .cls-1 {
  fill: #ff0
}

#icon05 .cls-2, #icon06 .cls-2 {
  fill: #29b9de
}

#icon05 .cls-3, #icon06 .cls-3 {
  fill: none;
  stroke: #29b9de;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5px
}

#icon07 .cls-1 {
  fill: #ff0
}

#icon07 .cls-2 {
  fill: #29b9de
}

#icon07 .cls-3 {
  fill: #fff
}

#icon07 .cls-4, #icon07 .cls-5 {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round
}

#icon07 .cls-4 {
  stroke: #29b9de;
  stroke-width: 2.5px
}

#icon07 .cls-5 {
  stroke: #fff
}

#icon08 .cls-1 {
  fill: #ff0
}

#icon08 .cls-2 {
  fill: #29b9de
}

#icon08 .cls-3 {
  fill: none;
  stroke: #29b9de;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5px
}

#icon09 .cls-1 {
  fill: #29b9de
}

#icon09 .cls-2 {
  fill: #ff0
}

#icon09 .cls-3 {
  fill: #fff
}

#icon09 .cls-4 {
  fill: none;
  stroke: #29b9de;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5px
}

#icon10 .cls-1 {
  fill: #ff0
}

#icon10 .cls-2 {
  fill: none;
  stroke: #29b9de;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5px
}

#icon11 .cls-1 {
  fill: #29b9de
}

#icon11 .cls-2 {
  fill: #ff0
}

#icon11 .cls-3 {
  fill: none;
  stroke: #29b9de;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5px
}

#icon12 .cls-1 {
  fill: #ff0
}

#icon12 .cls-2 {
  fill: #29b9de
}

#icon12 .cls-3 {
  fill: none;
  stroke: #29b9de;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5px
}

#step04 .cls-1, #step05 .cls-1 {
  fill: #29b9de
}

#step04 .cls-2, #step05 .cls-2 {
  fill: #ff0
}

#step04 .cls-3, #step05 .cls-3 {
  fill: #fff
}

#step04 .cls-4, #step05 .cls-4 {
  fill: none;
  stroke: #29b9de;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5px
}

#step06 .cls-1 {
  fill: #29b9de
}

#step06 .cls-2 {
  fill: #fff
}

#step06 .cls-3 {
  fill: #ff0
}

#step06 .cls-4 {
  fill: none;
  stroke: #29b9de;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5px
}

#step08 .cls-1 {
  fill: #ff0
}

#step08 .cls-2 {
  fill: #29b9de
}

#step08 .cls-3 {
  fill: #fff
}

#step08 .cls-4 {
  fill: none;
  stroke: #29b9de;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5px
}

#top .trading-wrap .trading-header h2 {
  margin-bottom: 0
}

@media screen and (max-width: 760px) {
  #top .trading-wrap .trading-header h2 {
    margin-bottom: 20px
  }
}

#works .trading-wrap {
  margin-bottom: 40px;
  padding: 40px 0;
  background: #f7f7f7
}

#works .trading-wrap .trading-content {
  display: flex;
  justify-content: space-between;
  max-width: 1080px
}

#works .trading-wrap .trading-content .trading-header {
  display: flex;
  align-items: center;
  width: 175px
}

#works .trading-wrap .trading-content .trading-header h2 {
  margin-top: -0.5em
}

#works .trading-wrap .trading-content .trading-header h2 .en, #works .trading-wrap .trading-content .trading-header h2 .jp {
  display: block;
  letter-spacing: 0;
  text-align: left
}

#works .trading-wrap .trading-content .trading-header h2 .en::after, #works .trading-wrap .trading-content .trading-header h2 .jp::after {
  display: none
}

#works .trading-wrap .trading-content .trading-header h2 .en {
  font-size: 30px
}

#works .trading-wrap .trading-content .trading-header h2 .jp {
  font-size: 15px
}

#works .trading-wrap .trading-content ul.trading-logos {
  display: flex;
  flex-wrap: wrap;
  max-width: 864px;
  padding: 0
}

#works .trading-wrap .trading-content ul.trading-logos .trading-item {
  width: 24.31%;
  margin: 0 0 8px 0.9%;
  opacity: 0
}

#works .trading-wrap .trading-content ul.trading-logos .trading-item.fire {
  opacity: 1
}

#works .trading-wrap .trading-content ul.trading-logos .trading-item:nth-child(4n+1) {
  margin-left: 0
}

#works .trading-wrap .trading-content ul.trading-logos .trading-item:nth-child(2) {
  transition-delay: 0.2s
}

#works .trading-wrap .trading-content ul.trading-logos .trading-item:nth-child(3) {
  transition-delay: 0.4s
}

#works .trading-wrap .trading-content ul.trading-logos .trading-item:nth-child(4) {
  transition-delay: 0.6s
}

#works .trading-wrap .trading-content ul.trading-logos .trading-item:nth-child(5) {
  transition-delay: 0.8s
}

#works .trading-wrap .trading-content ul.trading-logos .trading-item:nth-child(6) {
  transition-delay: 1s
}

#works .trading-wrap .trading-content ul.trading-logos .trading-item:nth-child(7) {
  transition-delay: 1.2s
}

#works .trading-wrap .trading-content ul.trading-logos .trading-item:nth-child(8) {
  transition-delay: 1.4s
}

#works .trading-wrap .trading-content ul.trading-logos .trading-item:nth-child(9) {
  transition-delay: 1.6s
}

#works .trading-wrap .trading-content ul.trading-logos .trading-item:nth-child(10) {
  transition-delay: 1.8s
}

#works .trading-wrap .trading-content ul.trading-logos .trading-item:nth-child(11) {
  transition-delay: 2s
}

#works .trading-wrap .trading-content ul.trading-logos .trading-item:nth-child(12) {
  transition-delay: 2.2s
}

#works .trading-wrap .trading-content ul.trading-logos .trading-item:nth-child(13) {
  transition-delay: 2.4s
}

#works .trading-wrap .trading-content ul.trading-logos .trading-item:nth-child(14) {
  transition-delay: 2.6s
}

#works .trading-wrap .trading-content ul.trading-logos .trading-item:nth-child(15) {
  transition-delay: 2.8s
}

@media screen and (max-width: 760px) {
  #works .trading-wrap {
    padding: 40px 0 20px
  }
  #works .trading-wrap .trading-content {
    display: block
  }
  #works .trading-wrap .trading-content .trading-header {
    justify-content: center;
    width: 100%
  }
  #works .trading-wrap .trading-content .trading-header h2 .en, #works .trading-wrap .trading-content .trading-header h2 .jp {
    letter-spacing: 1px;
    text-align: center
  }
  #works .trading-wrap .trading-content .trading-header h2 .en::after, #works .trading-wrap .trading-content .trading-header h2 .jp::after {
    display: none
  }
  #works .trading-wrap .trading-content .trading-header h2 .en {
    font-size: 18px
  }
  #works .trading-wrap .trading-content .trading-header h2 .jp {
    font-size: 10px
  }
  #top #works .trading-wrap .trading-content ul.trading-logos {
    max-width: 100%
  }
}

.lazy-loaded, .lazy {
  width: 100%
}

.ta_c__lp {
  position: relative;
  margin: 0 0 50px
}

@media screen and (max-width: 767px) {
  .ta_c__lp {
    margin: 0 0 50px
  }
}

.ta_c__lp a {
  display: inline-block
}

.ta_c__lp--company p {
  display: inline-block;
  color: #fff;
  line-height: 1.5;
  text-align: left
}

@media screen and (max-width: 767px) {
  .ta_c__lp--company p {
    font-size: 12px
  }
}

#footer #footer_navi .ta_c__lp a::before {
  height: 0
}

.sp_block {
  display: none
}

@media screen and (max-width: 760px) {
  .sp_block {
    display: block
  }
}

@media screen and (max-width: 760px) {
  .sp_none {
    display: none
  }
}

.btn-contact {
  display: none
}

.radio_wrap {
  margin: 5px 0 10px 60px
}

@media screen and (max-width: 767px) {
  .contact-btn {
    display: none
  }
  .radio_wrap {
    margin: 5px 0 10px 0
  }
}

.scroll {
  position: absolute;
  right: 50px;
  bottom: 9vh
}

.scroll .line {
  width: 1px;
  height: 80px;
  background: #fff
}

.scroll .ball {
  position: absolute;
  top: 0;
  left: -5px;
  width: 11px;
  height: 11px;
  background: #fff;
  border-radius: 50%;
  animation: scroll 2s infinite normal
}

@keyframes scroll {
  0% {
    top: 0
  }
  90% {
    left: -5px;
    width: 11px;
    height: 11px
  }
  100% {
    top: 100%;
    left: 0;
    width: 0;
    height: 0
  }
}

@media screen and (max-width: 767px) {
  .scroll {
    right: 25px
  }
}

.data .name {
  white-space: pre-wrap
}

.work_contact_btn img {
  display: inline-block;
  height: 22px;
  margin: 0 10px 5px 0;
  vertical-align: middle
}

.inner01 {
  padding: 0 !important
}

.inner02 {
  padding-bottom: 10% !important
}

.clearfix_works {
  margin-bottom: 13%
}

.clearfix_works div {
  width: 100% !important
}

@media screen and (min-width: 761px) {
  .btn_more {
    width: 450px;
    margin: auto
  }
  .btn_more a {
    position: absolute;
    right: 0;
    left: 0;
    height: 58px;
    margin: auto;
    padding-left: 34%;
    line-height: 58px;
    border-radius: 29px
  }
  #top h2 {
    margin-bottom: 35px
  }
  #top #works {
    padding-top: 35px
  }
  #top #idx_people .btn_more {
    margin: 50px auto
  }
  #top #idx_people .innr h2 {
    margin: 80px 0 40px
  }
  #top #idx_service {
    padding-top: 70px
  }
  #works .works_items {
    padding-top: 35px
  }
  #works .w1100 {
    padding-top: 0
  }
}

@media screen and (max-width: 767px) {
  .clearfix_works {
    padding: 11% 20px 18%
  }
  .clearfix_works a {
    width: 100%;
    height: 50px;
    font-size: 12px;
    line-height: 50px
  }
  #idx_people .innr {
    margin-top: 40px
  }
  .btn_more {
    margin: 20px auto 32px !important
  }
  #pagenation {
    margin: 0 !important
  }
  .image04.fire .image:last-child {
    padding-top: 170%
  }
  #company #profile {
    background: url(../img/company/company_profile_bg_new.jpg) no-repeat top left 61% !important
  }
}

.pagetop {
  display: none
}

@media screen and (min-width: 761px) {
  #members #leaders #box01 .title span {
    margin-top: 10px
  }
}

.brdcrmb__works {
  z-index: 10 !important
}

#top #idx_people .fl_l {
  width: 100% !important;
  margin-top: 80px;
  text-align: center
}

#top #idx_people .fl_l span {
  font-weight: bold;
  font-size: 1.75em
}

@media screen and (max-width: 767px) {
  #idx_people .innr {
    margin-bottom: 40px
  }
  #top #idx_people .fl_l {
    margin-top: 0
  }
  #top #idx_people .fl_l span {
    margin-top: 0
  }
}

.brdcrmb__newlist {
  margin: 0 auto 15px !important
}

#top #works .fl_l {
  width: 100%;
  margin-bottom: 70px;
  font-size: 16px;
  line-height: 1.9;
  text-align: center
}

#top #works .fl_l span {
  font-weight: 700;
  font-size: 1.75em
}

#idx_menu ul {
  height: auto !important
}

@media screen and (max-width: 767px) {
  #top #works .fl_l {
    margin: 40px 0;
    font-size: 12px
  }
  #idx_service h2 {
    margin-top: 40px
  }
}

.page-id-1828 #owned .fl_r .img_wrap>a {
  text-align: center
}

.page-id-1828 #owned .fl_r .img_wrap>a img {
  width: 60%
}

.page-id-1828 #owned .fl_r .title {
  margin: 10px 0 15px !important
}

#sns {
  position: relative;
  display: flex;
  margin-top: 10px
}

#facebook {
  position: absolute;
  left: 55%;
  width: 40px
}

#twitter {
  position: absolute;
  left: calc(55% + 45px);
  width: 40px
}

@media screen and (max-width: 767px) {
  #sns {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
    margin-bottom: 40px
  }
  #twitter {
    position: static;
    width: 30px;
    margin-left: 10px
  }
  #facebook {
    position: static;
    width: 30px
  }
}

.sub-title {
  font-weight: bold;
  font-size: 34px
}

#download {
  margin-top: 160px
}

.img-content-2 {
  display: none
}

.flax-container {
  display: flex;
  justify-content: space-between
}

.img-content-1, .form-content {
  width: 45%
}

#download #form input[type="submit"] {
  display: block;
  width: 100%;
  max-width: 320px;
  height: 60px;
  margin: auto;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  font-family: Oswald, sans-serif;
  font-style: oblique;
  line-height: 60px;
  text-align: center;
  background: #52a0fd;
  background: -webkit-gradient(linear, left top, right top, from(#52a0fd), color-stop(80%, #00e2fa), to(#00e2fa));
  background: linear-gradient(to right, #4fe5cd 0, #27bbd0 100%) !important;
  border: none;
  border-radius: 40px;
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s
}

#download #form input[type="submit"]:hover {
  background-position: right center;
}

#download #form input[type="text"], #download #form input[type="email"], #download #form textarea {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  max-width: 640px;
  margin: 5px 0 0 0;
  padding: 12px 12px;
  font-size: 14px;
  border: none;
  border: 1px solid #ddd;
  border-radius: 5px
}

#download #form .input {
  margin-bottom: 5px
}

#download #form .flax-container {
  margin-bottom: 20px
}

#download #form .btn::before {
  position: absolute;
  right: 30px;
  bottom: -5px;
  left: 30px;
  z-index: 0;
  display: inline-block;
  height: 40px;
  background: #52a0fd;
  background: -webkit-gradient(linear, left top, right top, from(#52a0fd), color-stop(80%, #00e2fa), to(#00e2fa));
  background: linear-gradient(to right, #4fe5cd 0, #27bbd0 100%) !important;
  border-radius: 30em;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-filter: blur(20px) brightness(0.95);
  filter: blur(20px) brightness(0.95);
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  content: ""
}

#download #form p {
  padding-left: 5px;
  font-size: 14px
}

#download #form .hissu {
  position: absolute;
  top: 2px;
  left: auto;
  margin-left: 5px
}

#download #form .narrow {
  font-weight: normal;
  font-size: 12px
}

@media screen and (max-width: 760px) {
  .sub-title {
    font-weight: bold;
    font-size: 12px
  }
  #download {
    margin-top: 14px
  }
  .form-content {
    width: 95%;
    margin: 0 auto
  }
  .img-content-1 {
    display: none
  }
  .img-content-2 {
    display: block;
    width: 95%;
    margin: 20px auto;
    padding: 10px
  }
}

.location {
  display: none
}

.footer-links {
  display: flex;
  justify-content: space-around;
  margin-top: 40px
}

.footer-link-content {
  width: 45%
}

.link.download span {
  background: linear-gradient(to right, #4fe5cd 0, #27bbd0 100%) !important
}

.link.download.pop-onhover::before {
  background: linear-gradient(to right, #4fe5cd 0, #27bbd0 100%) !important
}

.tell-content {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px
}

.telBox {
  padding-left: 40xp
}

#form.dl .error {
  margin-left: 5px
}

.top {
  margin-top: 70px
}

@media screen and (max-width: 760px) {
  .footer-links {
    flex-direction: column
  }
  .footer-link-content {
    width: 90%;
    margin-right: auto;
    margin-left: auto
  }
  .footer-link-content:first-child {
    margin-bottom: 20px
  }
  .tell-content {
    flex-direction: column
  }
  #footer_contact .tel {
    margin-left: 0
  }
  .top {
    margin-top: 0
  }
}

form .privacy-policy-wrap {
  padding-right: 5%;
  padding-left: 5%;
  text-align: center
}

form .privacy-policy-wrap .privacy-policy {
  display: inline-block;
  margin: 0 auto 20px;
  text-align: center
}

form .privacy-policy-wrap .privacy-policy .mwform-checkbox-field-text {
  margin-right: 0 !important
}

form .privacy-policy-wrap .privacy-policy .error {
  margin: 5px 0 0 !important;
  text-align: left
}

#form input[type="submit"] {
  outline: 0
}

#blog_detail .innr table {
  margin: 20px 0;
  border: 1px solid #000;
  border-collapse: collapse
}

#blog_detail .innr table tr {
  border-bottom: 1px solid #000
}

#blog_detail .innr table tr th {
  padding: 5px 20px;
  background: #e9e9e9;
  border: 1px solid #000
}

#blog_detail .innr table tr td {
  padding: 5px 15px;
  border: 1px solid #000
}

#blog_detail #post_footer #sns {
  justify-content: center
}

@media screen and (max-width: 767px) {
  #blog_detail #post_footer #sns {
    flex-wrap: wrap
  }
  #blog_detail #post_footer #sns li {
    width: 38%;
    max-width: 155px
  }
  #blog_detail .innr table tr th, #blog_detail .innr table tr td {
    padding: 5px 10px
  }
}

@media screen and (max-width: 767px) {
  #blog_detail .w1280 #post_detail p {
    font-size: 16px
  }
}

#post_detail blockquote {
  position: relative;
  box-sizing: border-box;
  margin-bottom: 30px;
  padding: 5px 12px 5px 56px;
  color: #464646;
  font-style: italic;
  background: #f0f7ff
}

#post_detail blockquote::before {
  position: absolute;
  top: 50%;
  left: 10px;
  display: inline-block;
  width: 36px;
  height: 36px;
  color: #fff;
  font-weight: 900;
  font-size: 20px;
  font-family: FontAwesome;
  line-height: 36px;
  text-align: center;
  background: #a5d7ff;
  border-radius: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  content: "\f10d"
}

#post_detail blockquote p {
  position: relative;
  z-index: 3;
  margin: 10px 0;
  padding: 0;
  line-height: 1.7
}

#post_detail blockquote cite {
  display: block;
  color: #888;
  font-size: 0.9em;
  text-align: right
}

.blog_catch {
  line-height: 1.2;
  text-align: right
}

.blog_catch .text-wrapper {
  position: relative;
  display: inline-block
}

.blog_catch .line {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background-color: #000;
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  opacity: 0
}

.blog_catch .en {
  font-family: "Oswald", sans-serif;
  letter-spacing: 4px
}

.blog_catch .jp {
  font-weight: bold;
  font-size: 14px;
  line-height: 2
}

#blog_detail .w1280 h1 {
  font-size: 28px;
  letter-spacing: 2px;
  text-align: center
}

@media screen and (min-width: 761px) {
  .blog_catch {
    width: 90%;
    max-width: 960px;
    margin: auto
  }
  .blog_catch .en {
    font-size: 110px
  }
}

@media screen and (max-width: 760px) {
  .blog_catch .en {
    font-size: 33px
  }
  #blog_detail .w1280 h1 {
    margin-bottom: 30px;
    font-size: 18px
  }
}

.brdcrmb_blog {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 960px;
  margin: 60px auto 25px;
  font-size: 13px
}

.brdcrmb_blog a {
  color: #000
}

.brdcrmb_blog.brdcrmb_blog_sp {
  visibility: hidden;
  opacity: 0
}

#sub_navi .blog_list--first {
  position: relative
}

#sub_navi .blog_list--first .brdcrmb_blog_pc {
  position: absolute;
  top: -100px;
  left: 0;
  width: 100vw;
  height: 20px;
  text-align: left
}

#sub_navi .blog_list--first .brdcrmb_blog_pc a {
  display: inline-block;
  height: 20px;
  font-weight: normal;
  font-size: 13px
}

#sub_navi .blog_list--first .brdcrmb_blog_pc a:hover::after {
  bottom: 4px;
  left: 0;
  width: 100%;
  height: 1px;
  margin-left: 0;
  background-color: #000;
  border: none;
  transform: rotate(0)
}

@media screen and (min-width: 761px) {
  #sub_navi li {
    margin: 0 25px
  }
}

@media screen and (max-width: 1570px) {
  #sub_navi li {
    margin: 0 20px
  }
  #sub_navi li a {
    font-size: 14px
  }
}

@media screen and (max-width: 760px) {
  .brdcrmb_blog.brdcrmb_blog_sp {
    margin: 30px auto 45px;
    visibility: visible;
    opacity: 1
  }
  #sub_navi .blog_list--first .brdcrmb_blog_pc {
    display: none
  }
  #sub_navi.sub_navi_blog {
    margin: 75px 5% 0
  }
}

.news-bnr {
  position: fixed;
  bottom: 10px;
  left: 10px;
  z-index: 5;
  width: 300px;
  transform: translateX(-300px);
  opacity: 0;
  transition: all 0.5s
}

.news-bnr.show {
  transform: translateX(0);
  opacity: 1
}

.news-bnr .batsu {
  position: relative;
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 25px;
  height: 25px;
  background: #fff
}

.news-bnr .batsu::before, .news-bnr .batsu::after {
  position: absolute;
  top: 1px;
  left: 14%;
  display: block;
  width: 100%;
  height: 5px;
  background: #000;
  transform: rotate(45deg);
  transform-origin: 0% 50%;
  content: ""
}

.news-bnr .batsu::after {
  right: 14%;
  left: auto;
  transform: rotate(-45deg);
  transform-origin: 100% 50%
}

.without-bnr .news-bnr {
  display: none
}

@media screen and (max-width: 760px) {
  .news-bnr {
    display: none
  }
}

.logo_l.glitch {
  width: 124px;
  height: 52px;
  margin-bottom: 40px;
  line-height: 0
}

.logo_l.glitch::before, .logo_l.glitch::after {
  left: 0;
  background-size: 124px 52px
}

@media screen and (max-width: 767px) {
  .logo_l.glitch {
    width: 111px;
    height: 46.61px
  }
  .logo_l.glitch::before, .logo_l.glitch::after {
    left: -1px;
    background-size: 111px 46.61px
  }
}

.footer-lp {
  margin-top: 0 !important
}

.footer-lp .lp_input {
  width: 640px;
  margin: 0 auto 30px
}

.footer-lp .lp_input .form_content {
  display: flex;
  margin-bottom: 5px
}

.footer-lp .lp_input .form_content p {
  font-size: 18px;
  font-weight: bold
}

.footer-lp .lp_input .form_content .required {
  color: #fff;
  width: 38px;
  height: 19px;
  line-height: 19px;
  font-size: 12px;
  font-weight: bold;
  background-color: #cc0000;
  margin-top: 7px;
  margin-left: 10px;
  display: inline-block;
  vertical-align: 3px
}

.footer-lp .lp_input .lp_contact {
  width: 100%;
  height: 62px;
  line-height: 62px;
  font-size: 15px;
  padding-left: 22px;
  border: 1px solid #ebebeb;
  border-radius: 5px;
  background-color: #fafafa;
  box-sizing: border-box
}

.footer-lp .lp_input .lp_textarea {
  border-radius: 5px;
  width: 100%;
  height: 259px;
  line-height: 30px;
  font-size: 15px;
  padding-left: 22px;
  border: 1px solid #ebebeb;
  background-color: #fafafa;
  resize: none;
  box-sizing: border-box
}

.footer-lp .lp_input .input--filled {
  position: relative
}

.footer-lp .lp_input .input--filled::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: calc(100% - 2px);
  height: 100%;
  box-shadow: 0px 0px 0px 0px;
  color: rgba(42, 176, 214, 0.6);
  animation: anim-shadow 0.3s forwards
}

.footer-lp .lp_input .input--filled input, .footer-lp .lp_input .input--filled textarea {
  border: 2px solid #2ab0d6;
  transition: border 0.3s
}

.footer-lp .lp_form_submit {
  width: 460px;
  margin: 0 auto 45px
}

.footer-lp .lp_form_submit input {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  display: inline-block;
  border-radius: 50em;
  position: relative;
  z-index: 2;
  font-weight: bold;
  will-change: transform, filter;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: all 0.3s ease-out;
  width: 100%;
  max-width: 470px;
  background: linear-gradient(to right, #fa80d2 0, #fed757 100%);
  border: none;
  height: 80px;
}

@media screen and (max-width: 767px) {
  .footer-lp .lp_form_submit input {
    height: 60px
  }
}

.footer-lp .lp_form_submit input:hover {
  filter: brightness(1.05) contrast(1.05);
  transform: scale(1.04)
}

.footer-lp .footer_lp_tel {
  margin: 40px auto 0;
  display: flex;
  align-items: baseline;
  width: 710px
}

.footer-lp .footer_lp_tel .footer_contact_tel_title {
  margin-right: 18px
}

.footer-lp .lp_footer_overlay {
  height: 100px;
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 99;
  background: linear-gradient(90deg, #52a0fd, #00e2fa);
  color: #fff
}

.footer-lp .lp_footer_overlay .lp_telbox {
  width: 960px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px
}

.footer-lp .lp_footer_overlay .lp_telbox .txt_lp_telbox img {
  vertical-align: middle
}

.footer-lp .lp_footer_overlay .lp_telbox .ad_tel_num {
  font-size: 38px;
  font-family: "arial";
  margin-left: 14px;
  vertical-align: middle;
  color: #fff
}

.footer-lp .lp_footer_overlay .lp_telbox .ad_biz_hour {
  font-size: 16px;
  margin-left: 20px;
  vertical-align: middle
}

.footer-lp .lp_footer_overlay .lp_telbox .btn {
  width: 308px;
  height: 62px;
  line-height: 62px;
  color: #009fcd
}

.footer-lp .lp_footer_overlay .lp_telbox .btn:before {
  background: #000
}

.footer-lp .lp_footer_overlay .lp_telbox .btn span {
  background: #fff;
  font-size: 18px
}

.footer-lp .lp_footer_overlay .lp_telbox .btn span img {
  vertical-align: middle;
  margin-right: 14px
}

.footer_lp {
  margin-top: 0 !important;
  margin-bottom: 100px;
  background: url(../img/advertising/listing/bg_lp_footer_pc.png) no-repeat center bottom !important;
  background-size: cover !important
}

.footer_lp #adress {
  margin-top: 110px
}

.footer_lp .lp_input {
  width: 640px;
  margin: 0 auto 30px
}

.footer_lp .lp_input .form_content {
  display: flex;
  margin-bottom: 5px
}

.footer_lp .lp_input .form_content p {
  font-size: 18px;
  font-weight: bold
}

.footer_lp .lp_input .form_content .required {
  color: #fff;
  width: 38px;
  height: 19px;
  line-height: 19px;
  font-size: 12px;
  font-weight: bold;
  background-color: #cc0000;
  margin-top: 7px;
  margin-left: 10px;
  display: inline-block;
  vertical-align: 3px
}

.footer_lp .lp_input .lp_contact {
  width: 100%;
  height: 62px;
  line-height: 62px;
  font-size: 15px;
  padding-left: 22px;
  border: 1px solid #ebebeb;
  background-color: #fafafa
}

.footer_lp .lp_input .lp_textarea {
  width: 100%;
  height: 259px;
  line-height: 30px;
  font-size: 15px;
  padding-left: 22px;
  border: 1px solid #ebebeb;
  background-color: #fafafa;
  resize: none
}

.footer_lp .lp_form_submit {
  width: 320px;
  margin: 0 auto
}

.footer_lp .lp_form_submit input {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  display: inline-block;
  border-radius: 50em;
  position: relative;
  z-index: 2;
  font-weight: bold;
  will-change: transform, filter;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: all 0.3s ease-out;
  width: 100%;
  max-width: 470px;
  background: linear-gradient(to right, #fa80d2 0, #fed757 100%);
  border: none;
  height: 58px;
}

.footer_lp .footer_lp_tel {
  margin: 40px auto 0;
  display: flex;
  align-items: baseline;
  width: 710px
}

.footer_lp .footer_lp_tel .footer_contact_tel_title {
  margin-right: 18px
}

.footer_lp .ad_side_contact {
  font-family: "Oswald";
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  left: 40px;
  top: 120px;
  height: 450px;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl
}

.footer_lp .ad_side_contact .contact_btn a {
  display: flex;
  align-items: center
}

.footer_lp .ad_side_contact .contact_btn span {
  margin-top: 8px;
  color: #000;
  letter-spacing: 0.14em
}

.footer_lp .ad_side_contact .slash {
  width: 14px;
  border-top: 2px solid #2bb2d6;
  transform: rotate(45deg)
}

.footer_lp .ad_side_contact .side_copy {
  color: #bfc9d7
}

.footer_lp .ad_side_contact a {
  line-height: 15.7px
}

.footer_lp .lp_footer_overlay {
  height: 100px;
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 10;
  background: linear-gradient(90deg, #52a0fd, #00e2fa);
  color: #fff
}

.footer_lp .lp_footer_overlay .lp_telbox {
  width: 960px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px
}

.footer_lp .lp_footer_overlay .lp_telbox .txt_lp_telbox img {
  vertical-align: middle
}

.footer_lp .lp_footer_overlay .lp_telbox .ad_tel_num {
  font-size: 38px;
  font-family: "arial";
  margin-left: 14px;
  vertical-align: middle
}

.footer_lp .lp_footer_overlay .lp_telbox .ad_biz_hour {
  font-size: 16px;
  margin-left: 20px;
  vertical-align: middle
}

.footer_lp .lp_footer_overlay .lp_telbox .btn {
  width: 308px;
  height: 62px;
  line-height: 62px;
  color: #009fcd
}

.footer_lp .lp_footer_overlay .lp_telbox .btn:before {
  background: #000
}

.footer_lp .lp_footer_overlay .lp_telbox .btn span {
  background: #fff;
  font-size: 18px
}

.footer_lp .lp_footer_overlay .lp_telbox .btn span img {
  vertical-align: middle;
  margin-right: 14px
}

@media (max-width: 767px) {
  .footer_wrapper {
    padding-bottom: 60px
  }
  .footer-lp {
    margin-bottom: 0
  }
  .footer-lp .lp_input {
    width: 92%;
    margin: 0 auto 30px
  }
  .footer-lp .lp_footer_overlay {
    height: 60px
  }
  .footer-lp .lp_footer_overlay .lp_telbox {
    width: 100%;
    height: 60px;
    justify-content: space-around;
    align-items: center
  }
  .footer-lp .lp_footer_overlay .lp_telbox .txt_lp_telbox {
    text-align: center
  }
  .footer-lp .lp_footer_overlay .lp_telbox .txt_lp_telbox img {
    display: inline;
    width: 11.5px
  }
  .footer-lp .lp_footer_overlay .lp_telbox .ad_tel_num {
    font-size: 21px;
    margin-left: 3px;
    line-height: 26px
  }
  .footer-lp .lp_footer_overlay .lp_telbox .ad_biz_hour {
    font-size: 10px;
    display: block;
    margin-left: 0;
    line-height: 14px
  }
  .footer-lp .lp_footer_overlay .lp_telbox .btn {
    width: 146px;
    height: 36px;
    line-height: 36px
  }
  .footer-lp .lp_footer_overlay .lp_telbox .btn:before {
    height: 15px
  }
  .footer-lp .lp_footer_overlay .lp_telbox .btn span {
    font-size: 11px
  }
  .footer-lp .lp_footer_overlay .lp_telbox .btn span img {
    margin-left: 5px;
    display: inline;
    width: 12px;
    margin-right: 5px
  }
  .footer_lp {
    margin-bottom: 0;
    background: url(../img/advertising/listing/bg_lp_footer_sp.png) no-repeat center bottom !important;
    background-size: cover !important
  }
  .footer_lp .lp_input {
    width: 92%;
    margin: 0 0 30px 0
  }
  .footer_lp .footer_lp_tel {
    width: auto;
    display: block;
    text-align: center
  }
  .footer_lp .footer_lp_tel .footer_contact_tel_title {
    margin-right: 0
  }
  .footer_lp #adress {
    margin-top: 30px
  }
  .footer_lp .footer_logo {
    margin-top: 30px;
    margin-bottom: 30px
  }
  .footer_lp .lp_footer_overlay {
    height: 60px
  }
  .footer_lp .lp_footer_overlay .lp_telbox {
    width: 100%;
    height: 60px;
    justify-content: space-around;
    align-items: center
  }
  .footer_lp .lp_footer_overlay .lp_telbox .txt_lp_telbox {
    text-align: center
  }
  .footer_lp .lp_footer_overlay .lp_telbox .txt_lp_telbox img {
    display: inline;
    width: 11.5px
  }
  .footer_lp .lp_footer_overlay .lp_telbox .ad_tel_num {
    font-size: 21px;
    margin-left: 3px;
    line-height: 26px
  }
  .footer_lp .lp_footer_overlay .lp_telbox .ad_biz_hour {
    font-size: 10px;
    display: block;
    margin-left: 0;
    line-height: 14px
  }
  .footer_lp .lp_footer_overlay .lp_telbox .btn {
    width: 146px;
    height: 36px;
    line-height: 36px
  }
  .footer_lp .lp_footer_overlay .lp_telbox .btn:before {
    height: 15px
  }
  .footer_lp .lp_footer_overlay .lp_telbox .btn span {
    font-size: 11px
  }
  .footer_lp .lp_footer_overlay .lp_telbox .btn span img {
    margin-left: 5px;
    display: inline;
    width: 12px;
    margin-right: 5px
  }
  .footer_lp .ad_side_contact {
    display: none
  }
  #footer #adress p {
    letter-spacing: 0
  }
}

@media (max-width: 480px) {
	
	.footer_wrapper {
    	padding-bottom: 20px;
	}
}

#footer_navi .ta_c__lp h2 {
  position: relative;
  color: #fff
}

#footer_navi .ta_c__lp h2 .en::after, #footer_navi .ta_c__lp h2 .jp::after {
  background: #fff
}

#footer_navi .ta_c__lp .ta_c__lp--company {
  display: flex;
  justify-content: space-between;
  width: 91.25%;
  max-width: 960px;
  margin: 0 auto 30px;
  padding-top: 30px;
  padding-bottom: 30px;
  border-bottom: 3px solid #fff
}

@media screen and (max-width: 768px) {
  #footer_navi .ta_c__lp .ta_c__lp--company {
    padding-top: 0
  }
}

#footer_navi .ta_c__lp .ta_c__lp--company table {
  color: #fff;
  font-size: 15px;
  width: 50%
}

@media screen and (max-width: 761px) {
  #footer_navi .ta_c__lp .ta_c__lp--company table {
    font-size: 12px
  }
}

@media screen and (max-width: 761px) {
  #footer_navi .ta_c__lp .ta_c__lp--company table:first-child {
    margin-right: 10px
  }
}

#footer_navi .ta_c__lp .ta_c__lp--company th {
  min-width: 115px;
  padding-right: 25px;
  font-weight: bold;
  text-align: right;
  vertical-align: top
}

@media screen and (max-width: 761px) {
  #footer_navi .ta_c__lp .ta_c__lp--company th {
    display: block;
    width: 100%;
    text-align: left;
    padding-right: 0
  }
}

#footer_navi .ta_c__lp .ta_c__lp--company td {
  text-align: left;
  vertical-align: top
}

@media screen and (max-width: 761px) {
  #footer_navi .ta_c__lp .ta_c__lp--company td {
    display: block;
    width: 100%;
    margin-bottom: 10px
  }
}

.footer-lp-nl {
  z-index: 80
}

.ec-cta {
  position: relative;
  max-width: 1170px;
  padding: 40px 0 0;
  margin: 50px auto
}

.ec-cta .ec-cta-cloud-bold {
  font-size: 35px;
  font-weight: 900;
  color: #fdf67c;
  line-height: 1.2;
  position: relative;
  letter-spacing: 0.04em
}

.ec-cta .ec-cta-cloud-txt {
  font-weight: 400;
  font-size: 14px
}

.ec-cta .ec-cta-cloud {
  position: absolute;
  width: 301px;
  height: 142px;
  background-size: contain;
  background-repeat: no-repeat;
  left: 50%;
  color: #fff;
  text-align: center;
  line-height: 1
}

.ec-cta .green-cloud {
  position: absolute;
  background-color: #3fb8af;
  padding: 18px 35px 22px;
  border-radius: 0 70px 0 70px;
  top: 0;
  left: 104px
}

.ec-cta .red-cloud {
  position: absolute;
  background-color: #f59594;
  padding: 18px 27px 14px;
  border-radius: 70px 0 70px 0;
  top: 100px;
  right: -50px
}

.ec-cta .cta-cloud-text {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  color: #edff0f
}

.ec-cta .cta-cloud-text span {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: #edff0f;
  color: #fff
}

.ec-cta .ec-cta-wrap {
  background-color: #fffdd9;
  border-top-left-radius: 100px;
  border-bottom-right-radius: 100px;
  height: 593px;
  text-align: center;
  color: #000;
  padding-top: 110px;
  letter-spacing: 0.04em
}

@media screen and (max-width: 900px) {
  .ec-cta .ec-cta-wrap {
    height: 665px
  }
}

.ec-cta .ec-cta-copy {
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  margin-bottom: 16px
}

.ec-cta .ec-cta-status {
  position: relative;
  display: inline-block;
  font-size: 29px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 20px;
  color: #ff3d7f
}

.ec-cta .ec-cta-status::before {
  position: absolute;
  content: "";
  border: 1px solid #ff3d7f;
  width: 32px;
  top: 50%;
  left: -50px;
  transform: translateY(-3px)
}

.ec-cta .ec-cta-status::after {
  position: absolute;
  content: "";
  border: 1px solid #ff3d7f;
  width: 32px;
  top: 50%;
  right: -50px;
  transform: translateY(-3px)
}

.ec-cta .ec-cta-desc {
  font-size: 17px;
  line-height: 1.6
}

.ec-cta .ec-cta-btn-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  padding: 0 40px;
  margin: 20px auto 30px
}

@media screen and (max-width: 900px) {
  .ec-cta .ec-cta-btn-wrapper {
    flex-wrap: wrap;
    gap: 30px;
    padding: 0 20px
  }
}

.ec-cta .ec-cta-btn {
  background: linear-gradient(0deg, #ec6402 0%, rgba(236, 100, 2, 0.67) 32.96%, rgba(255, 255, 255, 0.02) 98.1%, rgba(255, 255, 255, 0) 100%);
  background-color: #fc964c;
  box-shadow: 0px 10px 25px -10px #433400;
  width: 100%;
  border-radius: 75px;
  display: block;
  position: relative;
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  transition: 0.3s;
  padding: 17px
}

.ec-cta .ec-cta-btn::after {
  content: "";
  background-image: url(../../img/shopify/icon-arrow-circle.svg);
  width: 28px;
  height: 28px;
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 32px
}

.ec-cta .ec-cta-btn:hover {
  transform: translateY(5px) scale(0.99);
  box-shadow: 0px 10px 25px -15px #433400;
  text-decoration: none
}

.ec-cta .ec-cta-btn-white {
  color: #000;
  background: #fff;
  border: 3px solid #000
}

.ec-cta .ec-cta-btn-white::after {
  content: none;
  display: none
}

.ec-cta .ec-cta-btn-shop {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 24px auto 26px
}

.ec-cta .ec-cta-btn-img {
  width: 205px;
  margin-right: 20px
}

.ec-cta .ec-cta-btn-partner {
  line-height: 1;
  font-size: 15px;
  border: 1px solid #000000;
  padding: 5px 10px;
  margin-left: 6px;
  font-weight: 500
}

.ec-cta .ec-cta-phone {
  width: 840px;
  margin: 0 auto
}

.ec-cta .ec-cta-phone-link {
  display: flex;
  align-items: center;
  white-space: nowrap;
  color: #000;
  text-align: center
}

.ec-cta .ec-cta-phone-link:hover {
  text-decoration: none
}

.ec-cta .ec-cta-phone-mes {
  position: relative
}

.ec-cta .ec-cta-phone-mes span {
  display: inline-block;
  background-color: #fffdd9;
  position: relative;
  z-index: 2;
  padding: 0 10px
}

.ec-cta .ec-cta-phone-num {
  font-size: 48px;
  display: flex;
  align-items: center;
  font-family: "Roboto", "Hiragino Sans";
  font-weight: bold;
  justify-content: center;
  line-height: 1.1
}

.ec-cta .ec-cta-phone-num img {
  margin-right: 10px;
  width: 30px
}

.ec-cta .ec-cta-phone-biz {
  font-size: 16px;
  font-weight: 300;
  margin-left: 17px
}

.ec-cta .ec-sponly {
  display: none
}

@media screen and (max-width: 1200px) {
  .ec-cta .red-cloud {
    top: 0;
    right: 104px
  }
}

@media (max-width: 840px) {
  .ec-cta .sponly {
    display: block
  }
  .ec-cta {
    margin: 100px auto 0;
    padding: 0
  }
  .ec-cta .ec-sponly {
    display: inline
  }
  .ec-cta .ec-cta-cloud {
    position: static
  }
  .ec-cta .ec-cta-wrap {
    height: auto;
    border-radius: 0;
    padding: calc(115vw / 3.75) 23px 42px;
    margin: 0 calc(50% - 50vw);
    width: 100vw
  }
  .ec-cta .ec-cta-cloud-bold {
    font-size: calc(26vw / 3.75)
  }
  .ec-cta .ec-cta-cloud-txt {
    font-size: calc(10vw / 3.75)
  }
  .ec-cta .green-cloud {
    padding: calc(18vw / 3.75);
    top: calc(-50vw / 3.75);
    border-radius: 0 50px 0 50px;
    left: 0
  }
  .ec-cta .red-cloud {
    padding: cac(18vw/3.75);
    top: calc(-33vw / 3.75);
    border-radius: 50px 0 50px 0;
    right: 0
  }
  .ec-cta .cta-cloud-text {
    font-size: calc(20vw / 3.75);
    font-weight: 700;
    line-height: 1;
    color: #edff0f
  }
  .ec-cta .cta-cloud-text span {
    font-size: calc(14vw / 3.75);
    font-weight: 600;
    line-height: 1.6;
    color: #edff0f;
    color: #fff
  }
  .ec-cta .ec-cta-copy {
    font-size: calc(32vw / 3.75);
    line-height: 1.875
  }
  .ec-cta .ec-cta-status {
    font-size: calc(24vw / 3.75)
  }
  .ec-cta .ec-cta-desc {
    font-size: calc(15vw / 3.75);
    text-align: left
  }
  .ec-cta .ec-cta-btn {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: calc(32vw / 3.75);
    line-height: 1.5;
    justify-content: space-between;
    padding-top: calc(18vw / 3.75);
    padding-bottom: calc(18vw / 3.75);
    border-radius: 100px
  }
  .ec-cta .ec-cta-btn::after {
    right: calc(23vw / 3.75)
  }
  .ec-cta .ec-cta-btn-txt {
    margin-top: 3px;
    font-size: calc(17vw / 3.75);
    line-height: 1.2
  }
  .ec-cta .ec-cta-btn-shop {
    flex-direction: row;
    margin: 20px auto
  }
  .ec-cta .ec-cta-btn-partner {
    font-size: calc(12vw / 3.75)
  }
  .ec-cta .ec-cta-btn-img {
    width: 47vw;
    max-width: 205px;
    margin: 0 0 2px
  }
  .ec-cta .ec-cta-phone {
    display: block;
    width: calc(310vw / 3.75)
  }
  .ec-cta .ec-cta-phone-link {
    display: block
  }
  .ec-cta .ec-cta-phone-mes span {
    background-color: transparent;
    font-size: calc(18vw / 3.75)
  }
  .ec-cta .ec-cta-phone-num {
    font-size: calc(40vw / 3.75)
  }
  .ec-cta .ec-cta-phone-num img {
    margin: 0 10px 0 0
  }
  .ec-cta .ec-cta-phone-biz {
    font-size: calc(16vw / 3.75);
    margin: 0
  }
}

@media (max-width: 450px) {
  .ec-cta .ec-cta-btn-txt {
    font-size: calc(22vw / 4.5)
  }
}

.lp-related_list {
  margin-bottom: 70px;
  box-sizing: border-box
}

@media screen and (max-width: 768px) {
  .lp-related_list {
    margin-bottom: 50px
  }
}

.lp-related_list.support-articles * {
  box-sizing: border-box;
  border-width: 0
}

.lp-related_list.support-articles .is-pc {
  display: block !important
}

@media screen and (max-width: 768px) {
  .lp-related_list.support-articles .is-pc {
    display: none !important
  }
}

.lp-related_list.support-articles .is-sp {
  display: none !important
}

@media screen and (max-width: 768px) {
  .lp-related_list.support-articles .is-sp {
    display: block !important
  }
}

.lp-related_list .support-articles-list {
  gap: 0 80px !important
}

@media screen and (max-width: 768px) {
  .lp-related_list .support-articles-list {
    gap: 0
  }
}

.lp-related_list .support-articles-list.grid {
  display: grid
}

.lp-related_list .support-articles-list.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

.lp-related_list .support-article {
  margin-bottom: 30px !important
}

@media screen and (max-width: 768px) {
  .lp-related_list .support-article {
    margin: 0 0 81.5px;
    padding: 0 100px 0 0
  }
}

.lp-related_list .support-link {
  color: #000 !important;
  position: relative
}

.lp-related_list .support-link:hover {
  text-decoration: none
}

@media screen and (min-width: 769px) {
  .lp-related_list .support-link:hover .support-thumbnail_image {
    transform: scale(1.1)
  }
  .lp-related_list .support-link:hover .support-articles_text {
    text-decoration: none
  }
}

.lp-related_list .support-thumbnail {
  position: relative;
  overflow: hidden;
  margin: 0 0 15px
}

@media screen and (max-width: 768px) {
  .lp-related_list .support-thumbnail {
    width: 100%
  }
}

.lp-related_list .support-thumbnail_image {
  margin: 0 !important;
  max-width: 100%;
  object-fit: contain;
  transition-duration: 0.5s
}

@media screen and (max-width: 768px) {
  .lp-related_list .support-thumbnail_image {
    width: 100%
  }
}

.lp-related_list .support-articles-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.91;
  text-align: center;
  margin: 0 0 56px
}

@media screen and (max-width: 768px) {
  .lp-related_list .support-articles-title {
    margin: 0 0 32px
  }
}

.lp-related_list .support-articles_text {
  font-size: 18px;
  font-weight: 600;
  line-height: 2;
  text-decoration: underline;
  margin: 0
}

@media screen and (max-width: 768px) {
  .lp-related_list .support-articles_text {
    font-size: 16px;
    line-height: 1.5
  }
}

.lp-related_list .support-articles_btn_link {
  height: auto;
  width: auto !important;
  line-height: 1.5 !important;
  color: #fff;
  background: transparent;
  box-shadow: none;
  display: inline-block
}

.lp-related_list .support-articles_time {
  color: #727272;
  font-size: 13px
}

.lp-related_list .support-articles_btn {
  margin-bottom: 60px;
  text-align: center
}

.lp-related_list .support-articles_btn_text {
  background: #42C0CB !important;
  font-size: 20px !important;
  padding: 15px 30px;
  max-width: none;
  min-width: 300px
}

@media screen and (max-width: 768px) {
  .lp-related_list .support-articles_btn_text {
    height: auto;
    width: auto !important;
    max-width: none;
    position: relative;
    padding: 10px;
    min-height: 50px;
    font-size: 16px !important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    max-width: 320px;
    width: 100%
  }
}

.lp-related_list .support-articles_btn_text::after {
  content: none !important
}

.lp-related_list .support-articles_btn .btn.pop-onhover:hover:before, .lp-related_list .support-articles_btn .btn.pop-onhover:before {
  background: linear-gradient(to right, #4fe5cd 0, #27bbd0 100%) !important
}

.support-articles_btn_text {
  color: #fff !important;
  box-sizing: border-box;
  background: #42C0CB !important;
  font-size: 20px !important;
  padding: 15px 30px;
  max-width: none;
  min-width: 320px;
  line-height: 30px
}

@media screen and (max-width: 768px) {
  .support-articles_btn_text {
    height: auto;
    width: auto !important;
    max-width: none;
    position: relative;
    padding: 10px;
    min-height: 50px;
    font-size: 16px !important;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    max-width: 320px;
    width: 100%
  }
}

.support-articles_btn_text::after {
  content: none !important
}

.support-articles_btn .btn.pop-onhover:hover:before, .support-articles_btn .btn.pop-onhover:before {
  background: linear-gradient(to right, #4fe5cd 0, #27bbd0 100%) !important
}