@charset "UTF-8";
@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Poppins:wght@600&display=swap);
abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: 0 0
}

body {
  line-height: 1
}

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

nav ul {
  list-style: none
}

blockquote, q {
  quotes: none
}

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

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

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: 700
}

del {
  text-decoration: line-through
}

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

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

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0
}

input, select {
  vertical-align: middle
}

main {
  display: block
}

::-moz-selection {
  background: #0a0a0a;
  color: #fff
}

::selection {
  background: #0a0a0a;
  color: #fff
}

body.windows {
  text-shadow: 0 0 rgba(0, 0, 0, .56)
}

@media print, screen and (min-width:769px) {
  * {
    margin: 0;
    padding: 0;
    zoom: 1
  }
  *, :after, :before {
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
  }
  html {
    -webkit-text-size-adjust: none
  }
  body {
    color: #0a0a0a;
    background: #fff;
    font-size: 14px;
    line-height: 1.8;
    font-family: 'Open Sans', "游ゴシック", YuGothic, "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", Helvetica, Arial, Verdana, sans-serif;
    font-weight: 500;
    font-feature-settings: "palt";
    letter-spacing: .016em;
    overflow-x: hidden
  }
  h1, h2, h3, h4, h5, h6 {
    font-weight: 500
  }
  img {
    -ms-interpolation-mode: bicubic;
    vertical-align: bottom
  }
  i, strong {
    font-style: normal
  }
  a {
    text-decoration: none;
    outline: 0;
    color: #F4D780
  }
  a:hover {
    text-decoration: none;
    color: #00e2e3
  }
  a:hover img {
    opacity: .8
  }
  .clear {
    clear: both
  }
  #site-footer .box .company dl:after, #site-header .gnavi ul:after, .clearfix:after, .site-blog .blog-detail .sec .charactor .boy:after, .site-blog .blog-detail .sec .charactor .girl:after, .site-blog .social-link:after, .site-dezahodai .sec-marge .list:after, .site-dezahodai .sec-trouble .list:after, .site-dtp .face-list:after, .site-dtp .fullset:after, .site-illust .face-list:after, .site-illust .fullset:after, .site-service .face-list:after, .site-service .fullset:after, .site-sitemap ul li dl:after, .site-torerundesu .sec-marge .list:after, .site-video .face-list:after, .site-video .fullset:after, .site-web .face-list:after, .site-web .fullset:after {
    content: "";
    display: block;
    clear: both
  }
  .display {
    width: 1120px;
    margin: 0 auto;
    position: relative;
    top: 0;
    left: 0
  }
  ol, ul {
    list-style: none
  }
  input[type=email], input[type=submit], input[type=tel], input[type=text], textarea {
    -webkit-appearance: none
  }
}

@media screen and (max-width:768px) {
  * {
    margin: 0;
    padding: 0;
    zoom: 1
  }
  *, :after, :before {
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
  }
  html {
    -webkit-text-size-adjust: none
  }
  body {
    color: #0a0a0a;
    background: #fff;
    font-size: 13px;
    line-height: 1.8;
    font-family: 'Open Sans', "游ゴシック", YuGothic, "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", Helvetica, Arial, Verdana, sans-serif;
    font-weight: 500;
    font-feature-settings: "palt";
    letter-spacing: .016em;
    overflow-x: hidden
  }
  h1, h2, h3, h4, h5, h6 {
    font-weight: 500
  }
  img {
    -ms-interpolation-mode: bicubic;
    vertical-align: bottom
  }
  i, strong {
    font-style: normal
  }
  a {
    text-decoration: none;
    outline: 0;
    color: #F4D780
  }
  a:hover {
    text-decoration: none;
    color: #00e2e3
  }
  a:hover img {
    opacity: .8
  }
  .clear {
    clear: both
  }
  #site-footer .box .company dl:after, #site-header .gnavi ul:after, .clearfix:after, .site-blog .blog-detail .sec .charactor .boy:after, .site-blog .blog-detail .sec .charactor .girl:after, .site-blog .social-link:after, .site-dezahodai .sec-marge .list:after, .site-dezahodai .sec-trouble .list:after, .site-dtp .face-list:after, .site-dtp .fullset:after, .site-illust .face-list:after, .site-illust .fullset:after, .site-service .face-list:after, .site-service .fullset:after, .site-sitemap ul li dl:after, .site-torerundesu .sec-marge .list:after, .site-video .face-list:after, .site-video .fullset:after, .site-web .face-list:after, .site-web .fullset:after {
    content: "";
    display: block;
    clear: both
  }
  .display {
    width: auto;
    margin: 0 auto;
    position: relative;
    top: 0;
    left: 0
  }
  ol, ul {
    list-style: none
  }
  input[type=email], input[type=submit], input[type=tel], input[type=text], textarea {
    -webkit-appearance: none
  }
}

#site-header {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  min-width: 1120px;
  height: 80px;
  z-index: 100;
  transition: all .6s 0s cubic-bezier(.455, .03, .515, .955)
}

@media screen and (max-width:768px) {
  #site-header {
    min-width: 1px;
    height: auto
  }
}

#site-header a {
  color: rgba(255, 255, 255, .9);
  transition: all .6s 0s cubic-bezier(.455, .03, .515, .955)
}

@media screen and (min-width:769px) {
  #site-header.active {
    position: fixed;
    background: #fff;
    width: 100%;
    -webkit-animation: over .6s;
    animation: over .6s;
    height: 72px
  }
  @-webkit-keyframes over {
    0% {
      top: -80px
    }
    100% {
      top: 0
    }
  }
  @keyframes over {
    0% {
      top: -80px
    }
    100% {
      top: 0
    }
  }
  #site-header.active a {
    color: #0a0a0a
  }
  #site-header.active .logo {
    top: 13px;
    left: 70px;
    background: url(./logo_text_b_2x.svg) no-repeat;
    background-size: 150px;
  }
  #site-header.active .logo img {
    opacity: 0
  }
  #site-header.active .gnavi ul {
    margin-top: 29px
  }
  #site-header.active .gnavi ul li:before {
    background: #0a0a0a;
    opacity: .16
  }
  #site-header.active .gnavi ul li a:before {
    display: none
  }
  #site-header.active .gnavi ul li a:after {
    background: #F4D780;
    height: 5px;
    bottom: -29px
  }
  #site-header.active .gnavi ul li a:hover {
    color: #0a0a0a
  }
  #site-header.active .gnavi a.contact {
    width: 104px;
    height: calc(100% + 1px);
    padding-top: 18px
  }
  #site-header.active .gnavi a.contact:before {
    margin: 0 0 6px
  }
}

#site-header #site-logo {
  position: absolute;
  top: 0;
  left: 0
}

@media screen and (min-width:769px) {
  #site-header #site-logo.join .sitemark {
    top: 26px
  }
  #site-header #site-logo.join .sitemark:before {
    opacity: 1
  }
  #site-header #site-logo.join .sitemark img {
    opacity: 0
  }
}

#site-header #site-logo .sitemark {
  width: 28px;
  position: absolute;
  top: 30px;
  left: 25px;
  z-index: 2;
  opacity: .96;
  transition: all .6s 0s cubic-bezier(.455, .03, .515, .955)
}

@media screen and (max-width:768px) {
  #site-header #site-logo .sitemark {
    top: 25px;
    left: 22px;
    width: 24px
  }
}

#site-header #site-logo .sitemark:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  /*background: url(./side_mark_b_2x.svg) no-repeat;*/
  background-size: contain;
  opacity: 0;
  transition: all .6s 0s cubic-bezier(.455, .03, .515, .955)
}

#site-header #site-logo .sitemark img {
  width: 100%;
  display: block;
  transition: all .6s 0s cubic-bezier(.455, .03, .515, .955)
}

#site-header .logo {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1;
  position: absolute;
  top: 13px;
  left: 100px
}

#site-header .logo img {
  width: 150px
}

@media screen and (max-width:768px) {
  #site-header .logo {
    top: 22px;
    left: 24px
  }
  #site-header .logo img {
    width: 150px
  }
}

#site-header .gnavi {
  position: absolute;
  height: 100%;
  top: 0;
  right: 0;
  transition: all .6s 0s cubic-bezier(.455, .03, .515, .955)
}

@media screen and (max-width:768px) {
  #site-header .gnavi {
    display: none
  }
}

#site-header .gnavi ul {
  position: relative;
  margin: 26px 160px 0 0
}

@media screen and (max-width:1180px) {
  #site-header .gnavi ul {
    margin-right: 130px
  }
}

#site-header .gnavi ul li {
  list-style: none;
  float: left;
  line-height: 1;
  position: relative;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between
}

#site-header .gnavi ul li:last-child:after, #site-header .gnavi ul li:last-child:before {
  display: none
}

#site-header .gnavi ul li:before {
  content: '';
  position: absolute;
  right: 40px;
  top: 0;
  width: 1px;
  height: 100%;
  background: #fff;
  transform: skewX(-20deg);
  opacity: .32;
  transition: all .6s 0s cubic-bezier(.455, .03, .515, .955)
}

@media screen and (max-width:1180px) {
  #site-header .gnavi ul li:before {
    right: 35px
  }
}

#site-header .gnavi ul li:after {
  content: '';
  width: 80px
}

@media screen and (max-width:1180px) {
  #site-header .gnavi ul li:after {
    width: 70px
  }
}

#site-header .gnavi ul li a {
  text-align: center;
  display: block;
  font-weight: 700;
  letter-spacing: .08em;
  position: relative;
  text-shadow: none
}

#site-header .gnavi ul li a:before {
  content: attr(data-eng);
  font-size: 8px;
  opacity: .56;
  font-weight: 600;
  letter-spacing: .16em;
  display: block;
  margin: 0 0 8px;
  transition: all 120ms 0s cubic-bezier(.455, .03, .515, .955)
}

#site-header .gnavi ul li a:after {
  content: '';
  width: 0;
  height: 2px;
  background: #fff;
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  transition: all 160ms 0s cubic-bezier(.455, .03, .515, .955)
}

#site-header .gnavi ul li a:hover {
  color: #fff
}

#site-header .gnavi ul li a:hover:before {
  opacity: 1
}

#site-header .gnavi ul li a:hover:after {
  width: 48px
}

#site-header a.contact {
  width: 80px;
  height: 80px;
  background: #0a0a0a;
  position: absolute;
  top: 0;
  right: 0;
  padding: 22px 0 0;
  color: rgba(255, 255, 255, .84);
  font-size: 9px;
  text-align: center;
  font-weight: 500;
  transition: all 0s 0s cubic-bezier(.455, .03, .515, .955)
}

#site-header a.contact:before {
  content: '';
  background: url(https://webkid.co.jp/images/common/header_contact_2x.png) no-repeat center;
  background-size: contain;
  display: block;
  width: 100%;
  height: 16px;
  margin: 0 0 10px;
  opacity: .8
}

#site-header a.contact:hover {
  opacity: .8
}

#site-side {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 80px;
  height: 100%;
  border-right: rgba(255, 255, 255, .24) 1px solid
}

@media screen and (max-width:768px) {
  #site-side {
  	display: none;
/*    position: fixed;
    left: auto;
    top: 15px;
    right: 15px;
    width: 48px;
    height: 48px;
    background: #0a0a0a;
    border: none;
    z-index: 1000;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(0, 0, 0, .16)*/
  }
}

#site-side .mes {
  font-size: 9px;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  white-space: nowrap;
  letter-spacing: .08em;
  position: absolute;
  top: 0;
  left: 24px;
  height: 100%;
  color: rgba(255, 255, 255, .88);
  font-size: 11px;
  text-align: center;
  letter-spacing: .32em;
  font-weight: 600;
  transition: all .6s 0s cubic-bezier(.455, .03, .515, .955)
}

#site-side .mes:before {
  content: attr(data-eng);
  display: block;
  font-size: 8px;
  color: rgba(255, 255, 255, .56);
  transition: all .6s 0s cubic-bezier(.455, .03, .515, .955)
}

@media screen and (max-width:768px) {
  #site-side .mes {
    display: none
  }
}

#site-side .menu {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 2
}

@media screen and (max-width:768px) {
  #site-side .menu {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    cursor: pointer
  }
}

#site-side .menu .open {
  width: 32px;
  height: 32px;
  position: absolute;
  bottom: 0;
  left: 0;
  cursor: pointer;
  transition: all .2s 0s cubic-bezier(.455, .03, .515, .955)
}

@media screen and (max-width:768px) {
  #site-side .menu .open {
    width: 24px;
    height: 24px;
    bottom: 11px;
    left: 12px
  }
}

#site-side .menu .open:hover {
  transform: rotate(45deg)
}

#site-side .menu .open .in {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

#site-side .menu .open:before {
  top: 6px;
  left: 6px
}

#site-side .menu .open:after {
  top: 6px;
  right: 6px
}

#site-side .menu .open .in:after, #site-side .menu .open .in:before, #site-side .menu .open:after, #site-side .menu .open:before {
  content: '';
  width: 6px;
  height: 6px;
  background: #fff;
  position: absolute;
  opacity: .96;
  transition: all .6s 0s cubic-bezier(.455, .03, .515, .955)
}

@media screen and (max-width:768px) {
  #site-side .menu .open .in:after, #site-side .menu .open .in:before, #site-side .menu .open:after, #site-side .menu .open:before {
    width: 3px;
    height: 3px;
    opacity: 1;
    background: #fff
  }
}

#site-side .menu .open .in:after, #site-side .menu .open .in:before {
  bottom: 6px
}

#site-side .menu .open .in:before {
  left: 6px
}

#site-side .menu .open .in:after {
  right: 6px
}

#global-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5000;
  background: #0a0a0a
}

#global-nav.nav-enter-active, #global-nav.nav-leave-active {
  transition: all .4s 0s cubic-bezier(.455, .03, .515, .955)
}

#global-nav.nav-enter, #global-nav.nav-leave-to {
  opacity: 0;
  transform: scale(1.02)
}

#global-nav:after {
  content: '';
  width: 50%;
  height: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: 1;
  background: url(https://webkid.co.jp/images/common/sidebar_bg.jpg) no-repeat center;
  background-size: cover
}

@media screen and (max-width:768px) {
  #global-nav:after {
    display: none
  }
}

#global-nav i.close {
  width: 120px;
  height: 120px;
  position: absolute;
  top: 50%;
  left: -60px;
  transform: translateY(-50%);
  border: rgba(255, 255, 255, .24) 1px solid;
  border-radius: 50%;
  cursor: pointer;
  z-index: 5001;
  transition: all .2s 0s cubic-bezier(.455, .03, .515, .955)
}

@media screen and (max-width:768px) {
  #global-nav i.close {
    width: 48px;
    height: 48px;
    top: 15px;
    left: auto;
    right: 15px;
    transform: translateY(0)
  }
}

@media screen and (min-width:769px) {
  #global-nav i.close:hover {
    background: #fff;
    border-color: #fff
  }
  #global-nav i.close:hover:after, #global-nav i.close:hover:before {
    background: #0a0a0a
  }
  #global-nav i.close:hover:before {
    transform: translateY(-50%) rotate(135deg)
  }
  #global-nav i.close:hover:after {
    transform: translateY(-50%) rotate(-135deg)
  }
}

#global-nav i.close:after, #global-nav i.close:before {
  content: '';
  width: 1px;
  height: 24px;
  background: #fff;
  position: absolute;
  top: 50%;
  right: 36px;
  transform: translateY(-50%) rotate(45deg);
  opacity: .64;
  transition: all .4s 0s cubic-bezier(.455, .03, .515, .955)
}

@media screen and (max-width:768px) {
  #global-nav i.close:after, #global-nav i.close:before {
    height: 16px;
    opacity: .8;
    right: 22px
  }
}

#global-nav i.close:after {
  transform: translateY(-50%) rotate(-45deg)
}

#global-nav .contant {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  align-items: center;
  justify-content: center;
  overflow: hidden
}

@media screen and (max-width:768px) {
  #global-nav .contant {
    width: 100%
  }
}

#global-nav .contant ul.menu {
  position: relative
}

@media screen and (max-width:768px) {
  #global-nav .contant ul.menu {
    transform: translateY(-24px)
  }
}

#global-nav .contant ul.menu li {
  list-style: none;
  margin: 16px 0;
  text-align: center
}

@media screen and (max-width:768px) {
  #global-nav .contant ul.menu li {
    margin: 32px 0
  }
  #global-nav .contant ul.menu li.hidden {
    display: none
  }
}

#global-nav .contant ul.menu li a {
  font-family: Poppins, sans-serif;
  font-size: calc(14px + 30 * (100vh - 450px)/ 900);
  letter-spacing: .16em;
  color: #fff;
  position: relative;
  transition: all .2s 0s cubic-bezier(.455, .03, .515, .955);
  display: block
}

@media screen and (max-width:768px) {
  #global-nav .contant ul.menu li a {
    font-size: 17px;
    line-height: 1
  }
  #global-nav .contant ul.menu li a:after {
    content: attr(data-jp);
    font-size: 11px;
    display: block;
    letter-spacing: .04em;
    margin: 8px 0 0
  }
}

#global-nav .contant ul.menu li a:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 2px;
  background: #fff;
  transition: all 80ms 0s cubic-bezier(.455, .03, .515, .955)
}

#global-nav .contant ul.menu li a:hover {
  transform: scale(.9)
}

#global-nav .contant ul.menu li a:hover:before {
  left: -5%;
  width: 110%
}

#global-nav .contant ul.sns {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%)
}

#global-nav .contant ul.sns li {
  list-style: none;
  float: left;
  margin: 0 40px 0 0
}

#global-nav .contant ul.sns li:last-child {
  margin: 0
}

#global-nav .contant ul.sns li a {
  color: #fff;
  font-size: 18px;
  opacity: .56;
  transition: all 80ms 0s cubic-bezier(.455, .03, .515, .955)
}

@media screen and (max-width:768px) {
  #global-nav .contant ul.sns li a {
    font-size: 16px
  }
}

#global-nav .contant ul.sns li a:hover {
  opacity: 1
}

#site-footer {
  background: #0a0a0a
}

#site-footer nav.contact {
  border-top: #e8e8e8 1px solid;
  border-bottom: #e8e8e8 1px solid;
  background: #fff
}

#site-footer nav.contact ul {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between
}

#site-footer nav.contact ul li {
  width: 50%;
  list-style: none;
  border-right: #e8e8e8 1px solid
}

@media screen and (max-width:768px) {
  #site-footer nav.contact ul li {
    width: 100%;
    border: none
  }
}

#site-footer nav.contact ul li:first-child {
  border-left: #e8e8e8 1px solid
}

@media screen and (max-width:768px) {
  #site-footer nav.contact ul li:first-child {
    border: none;
    border-bottom: #e8e8e8 1px solid
  }
}

#site-footer nav.contact ul li a {
  color: #0a0a0a;
  display: block;
  padding: 40px 32px;
  font-size: 18px;
  font-weight: 700;
  position: relative
}

@media screen and (max-width:768px) {
  #site-footer nav.contact ul li a {
    padding: 24px 15px;
    font-size: 15px
  }
}

#site-footer nav.contact ul li a:after {
  font-family: "Font Awesome 5 Free";
  content: "\f054";
  font-weight: 900;
  font-size: 24px;
  position: absolute;
  top: 50%;
  right: 32px;
  transform: translateY(-50%);
  opacity: .16
}

@media screen and (max-width:768px) {
  #site-footer nav.contact ul li a:after {
    right: 15px;
    font-size: 14px
  }
}

#site-footer nav.contact ul li a:hover {
  opacity: .72
}

#site-footer nav.contact ul li a i {
  display: inline-block;
  margin: 0 16px 0 0
}

#site-footer #addMap {
  width: 100%;
  height: 320px;
  position: relative;
  background: #f6f6f8
}

@media screen and (max-width:768px) {
  #site-footer #addMap {
    height: 160px
  }
}

#site-footer #addMap iframe {
  vertical-align: bottom
}

#site-footer .box {
  padding: 0 0 64px
}

@media screen and (max-width:768px) {
  #site-footer .box {
    padding: 0 0 40px
  }
}

#site-footer .box .pagetop {
  background: #1e1e1e;
  color: rgba(255, 255, 255, .88);
  text-align: center;
  display: block;
  padding: 16px 0;
  margin: 0 0 64px;
  transition: all .2s 0s cubic-bezier(.455, .03, .515, .955)
}

@media screen and (max-width:768px) {
  #site-footer .box .pagetop {
    margin: 0 0 40px
  }
}

#site-footer .box .pagetop:hover {
  background: #333
}

#site-footer .box .company {
  margin: 0 0 64px;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  color: rgba(255, 255, 255, .88)
}

@media screen and (max-width:768px) {
  #site-footer .box .company {
    margin: 0 0 24px;
    display: block
  }
}

#site-footer .box .company a {
  color: #fff
}

#site-footer .box .company dl {
  width: 70%
}

@media screen and (max-width:768px) {
  #site-footer .box .company dl {
    width: auto;
    text-align: center
  }
}

#site-footer .box .company dl dt {
  float: left;
  font-size: 10px;
  line-height: 1;
  /*background: url(./side_mark_b_2x.svg) no-repeat left center;*/
  background-size: 30px;
  padding: 0 0 0 52px
}

@media screen and (max-width:768px) {
  #site-footer .box .company dl dt {
    float: none;
    display: inline-block;
    text-align: left;
    font-size: 9px;
    /*background: url(./side_mark_b_2x.svg) no-repeat left 0;*/
    background-size: 28px;
    padding: 0 0 0 48px;
    margin: 0 0 20px
  }
}

#site-footer .box .company dl dt strong {
  font-size: 17px;
  font-weight: 700;
  display: block;
  margin: 0 0 12px
}

@media screen and (max-width:768px) {
  #site-footer .box .company dl dt strong {
    font-size: 16px;
    margin: 0 0 10px
  }
}

#site-footer .box .company dl dd {
  float: left;
  font-size: 13px;
  margin: 0 0 0 40px;
  padding: 0 0 0 40px;
  border-left: rgba(255, 255, 255, .12) 1px solid
}

@media screen and (max-width:768px) {
  #site-footer .box .company dl dd {
    float: none;
    margin: 0 20px;
    padding: 0;
    border: none;
    font-size: 10px
  }
}

#site-footer .box .company .social {
  width: 30%;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  align-items: center;
  justify-content: flex-end
}

@media screen and (max-width:768px) {
  #site-footer .box .company .social {
    width: 100%;
    justify-content: space-around;
    margin: 20px 0 0;
    padding: 0 20%
  }
}

#site-footer .box .company .social li {
  list-style: none;
  margin: 0 0 0 32px
}

@media screen and (max-width:768px) {
  #site-footer .box .company .social li {
    margin: 0
  }
}

#site-footer .box .company .social li a {
  font-size: 20px;
  opacity: .24
}

#site-footer .box .company .social li a:hover {
  opacity: 1
}

@media screen and (max-width:768px) {
  #site-footer .box nav {
    margin: 0 15px
  }
}

#site-footer .box nav ul.fnav {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between
}

@media screen and (max-width:768px) {
  #site-footer .box nav ul.fnav {
    display: block
  }
}

#site-footer .box nav ul.fnav li {
  list-style: none;
  color: #fff;
  width: 13%
}

@media screen and (max-width:768px) {
  #site-footer .box nav ul.fnav li {
    width: 100%;
    margin: 0 0 16px;
    border: rgba(255, 255, 255, .16) 1px solid;
    border-radius: 6px
  }
  #site-footer .box nav ul.fnav li:last-child {
    margin: 0
  }
}

#site-footer .box nav ul.fnav li a {
  color: rgba(255, 255, 255, .8)
}

#site-footer .box nav ul.fnav li a:hover {
  color: #fff;
  text-decoration: underline
}

@media screen and (max-width:768px) {
  #site-footer .box nav ul.fnav li dl.active dt:after {
    transform: translateY(-50%) rotate(180deg)
  }
  #site-footer .box nav ul.fnav li dl.active dd {
    display: block
  }
}

#site-footer .box nav ul.fnav li dl dt {
  font-weight: 700;
  margin: 0 0 10px;
  font-size: 16px;
  position: relative
}

@media screen and (max-width:768px) {
  #site-footer .box nav ul.fnav li dl dt {
    font-size: 14px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, .08);
    margin: 0
  }
  #site-footer .box nav ul.fnav li dl dt:after {
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 11px;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    opacity: .48;
    transition: all .2s 0s cubic-bezier(.455, .03, .515, .955)
  }
}

#site-footer .box nav ul.fnav li dl dd {
  font-size: 12px;
  margin: 4px 0 0;
  display: block
}

@media screen and (max-width:768px) {
  #site-footer .box nav ul.fnav li dl dd {
    border-bottom: rgba(255, 255, 255, .16) 1px solid;
    display: none
  }
  #site-footer .box nav ul.fnav li dl dd a {
    padding: 12px 20px;
    display: block;
    position: relative
  }
  #site-footer .box nav ul.fnav li dl dd a:after {
    content: "\f0a9";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 11px;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    opacity: .24
  }
  #site-footer .box nav ul.fnav li dl dd a:hover {
    text-decoration: none
  }
  #site-footer .box nav ul.fnav li dl dd:last-of-type {
    border: none
  }
}

#site-footer .copy {
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, .8);
  display: block;
  border-top: rgba(255, 255, 255, .12) 1px solid;
  padding: 24px 0
}

#firstview {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden
}

@media screen and (max-width:768px) {
  #firstview {
    transition: all .2s 0s cubic-bezier(.455, .03, .515, .955)
  }
}

#firstview.active i.off:after, #firstview.active i.off:before {
  opacity: 1
}

#firstview i.off {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 30
}

#firstview i.off:after, #firstview i.off:before {
  content: '';
  width: 1px;
  height: 80px;
  position: absolute;
  left: 50%;
  opacity: 0;
  transition: all .6s 0s cubic-bezier(.455, .03, .515, .955)
}

#firstview i.off:before {
  background: #fff;
  top: -80px
}

#firstview i.off:after {
  background: #0a0a0a;
  top: 0
}

#firstview:before {
  content: '';
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  /*background: #000;*/
  opacity: .08;
  z-index: 10
}

#firstview:after {
  content: '';
  width: 100vw;
  height: 30vh;
  position: absolute;
  top: 0;
  left: 0;
  /*background: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0) 100%);*/
  opacity: .32;
  z-index: 10
}

#firstview video {
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background: #000
}

#firstview _:-ms-lang(x)::-ms-backdrop, #firstview video {
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%
}

#firstview .content {
  position: absolute;
  width: calc(100% - 80px);
  top: 0;
  right: 0;
  height: 100%;
  z-index: 20;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  color: rgba(255, 255, 255, .96);
  align-items: center;
  justify-content: flex-start
}

@media screen and (max-width:768px) {
  #firstview .content {
    width: 100%
  }
}

#firstview .content .catch {
  font-family: Poppins, sans-serif;
  padding: 2vh 0 0 7vw;
  font-size: calc(40px + 30 * (100vw - 450px)/ 900);
  font-weight: 700;
  line-height: 1.34;
  opacity: 0;
  position: relative
}

@media screen and (max-width:768px) {
  #firstview .content .catch {
    font-size: calc(34px + 30 * (100vw - 450px)/ 900);
    padding-left: 32px
  }
}

#firstview .content .catch span {
  opacity: 0;
  display: inline-block
}

#firstview .content .catch.is-active {
  opacity: 1
}

#firstview .content .catch.is-active span {
  transform: scale(1);
  opacity: 0
}

#firstview .content .catch.is-active span:nth-child(1) {
  -webkit-animation: eve .4s 40ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 40ms cubic-bezier(.86, 0, .07, 1) forwards
}

@-webkit-keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(2) {
  -webkit-animation: eve .4s 80ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 80ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(3) {
  -webkit-animation: eve .4s 120ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 120ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(4) {
  -webkit-animation: eve .4s 160ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 160ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(5) {
  -webkit-animation: eve .4s .2s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s .2s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(6) {
  -webkit-animation: eve .4s 240ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 240ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(7) {
  -webkit-animation: eve .4s 280ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 280ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(8) {
  -webkit-animation: eve .4s 320ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 320ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(9) {
  -webkit-animation: eve .4s 360ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 360ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(10) {
  -webkit-animation: eve .4s .4s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s .4s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(11) {
  -webkit-animation: eve .4s 440ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 440ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(12) {
  -webkit-animation: eve .4s 480ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 480ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(13) {
  -webkit-animation: eve .4s 520ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 520ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(14) {
  -webkit-animation: eve .4s 560ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 560ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(15) {
  -webkit-animation: eve .4s .6s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s .6s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(16) {
  -webkit-animation: eve .4s 640ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 640ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(17) {
  -webkit-animation: eve .4s 680ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 680ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(18) {
  -webkit-animation: eve .4s 720ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 720ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(19) {
  -webkit-animation: eve .4s 760ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 760ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(20) {
  -webkit-animation: eve .4s .8s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s .8s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(21) {
  -webkit-animation: eve .4s 840ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 840ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(22) {
  -webkit-animation: eve .4s 880ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 880ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(23) {
  -webkit-animation: eve .4s 920ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 920ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(24) {
  -webkit-animation: eve .4s 960ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 960ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(25) {
  -webkit-animation: eve .4s 1s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 1s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(26) {
  -webkit-animation: eve .4s 1.04s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 1.04s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(27) {
  -webkit-animation: eve .4s 1.08s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 1.08s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(28) {
  -webkit-animation: eve .4s 1.12s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 1.12s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(29) {
  -webkit-animation: eve .4s 1.16s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 1.16s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(30) {
  -webkit-animation: eve .4s 1.2s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 1.2s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(31) {
  -webkit-animation: eve .4s 1.24s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 1.24s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(32) {
  -webkit-animation: eve .4s 1.28s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 1.28s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(33) {
  -webkit-animation: eve .4s 1.32s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 1.32s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(34) {
  -webkit-animation: eve .4s 1.36s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 1.36s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(35) {
  -webkit-animation: eve .4s 1.4s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 1.4s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(36) {
  -webkit-animation: eve .4s 1.44s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 1.44s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(37) {
  -webkit-animation: eve .4s 1.48s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 1.48s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(38) {
  -webkit-animation: eve .4s 1.52s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 1.52s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(39) {
  -webkit-animation: eve .4s 1.56s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 1.56s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(40) {
  -webkit-animation: eve .4s 1.6s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 1.6s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(41) {
  -webkit-animation: eve .4s 1.64s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 1.64s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(42) {
  -webkit-animation: eve .4s 1.68s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 1.68s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(43) {
  -webkit-animation: eve .4s 1.72s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 1.72s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(44) {
  -webkit-animation: eve .4s 1.76s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 1.76s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(45) {
  -webkit-animation: eve .4s 1.8s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 1.8s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(46) {
  -webkit-animation: eve .4s 1.84s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 1.84s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(47) {
  -webkit-animation: eve .4s 1.88s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 1.88s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(48) {
  -webkit-animation: eve .4s 1.92s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 1.92s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(49) {
  -webkit-animation: eve .4s 1.96s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 1.96s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .catch.is-active span:nth-child(50) {
  -webkit-animation: eve .4s 2s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve .4s 2s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(3) translateX(-60px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#firstview .content .scroll {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: #fff 1px solid;
  position: absolute;
  right: 40px;
  bottom: 40px
}

@media screen and (max-width:768px) {
  #firstview .content .scroll {
    width: 48px;
    height: 48px;
    right: 15px;
    bottom: 28px
  }
}

#firstview .content .scroll:before {
  content: 'SCROLL VIEW';
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  white-space: nowrap;
  position: absolute;
  top: -123.84px;
  left: 50%;
  transform: translateX(-50%);
  letter-spacing: .32em;
  font-size: 10px
}

@media screen and (max-width:768px) {
  #firstview .content .scroll:before {
    top: -120px
  }
}

#firstview .content .scroll:after {
  content: '';
  width: 7px;
  height: 7px;
  background: rgba(255, 255, 255, .88);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-animation: sc 2s infinite;
  animation: sc 2s infinite
}

@-webkit-keyframes sc {
  0% {
    top: 35%;
    opacity: 0
  }
  10% {
    top: 35%;
    opacity: 1
  }
  70% {
    top: 65%;
    opacity: 1
  }
  100% {
    top: 70%;
    opacity: 0
  }
}

@keyframes sc {
  0% {
    top: 35%;
    opacity: 0
  }
  10% {
    top: 35%;
    opacity: 1
  }
  70% {
    top: 65%;
    opacity: 1
  }
  100% {
    top: 70%;
    opacity: 0
  }
}

.site-index .title-h {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  margin: 0 0 32px;
  text-align: center
}

@media screen and (max-width:768px) {
  .site-index .title-h {
    font-size: 12px;
    margin: 0 0 24px
  }
}

.site-index .title-h:before {
  content: attr(data-eng);
  font-family: Poppins, sans-serif;
  letter-spacing: .024em;
  font-size: 48px;
  display: block;
  margin: 0 0 16px
}

@media screen and (max-width:768px) {
  .site-index .title-h:before {
    font-size: 32px;
    margin: 0 0 12px
  }
}

.site-index .information.wrap {
  padding-top: 56px
}

@media screen and (max-width:768px) {
  .site-index .information.wrap {
    padding-top: 24px
  }
}

.site-index .information .leftside {
  width: 30%
}

@media screen and (max-width:768px) {
  .site-index .information .leftside {
    width: 100%;
    position: relative
  }
}

.site-index .information .leftside h3 {
  font-family: Poppins, sans-serif;
  font-size: 36px;
  line-height: 1;
  font-weight: 700;
  margin: 0 0 20px
}

@media screen and (max-width:768px) {
  .site-index .information .leftside h3 {
    font-size: 22px
  }
}

.site-index .information .leftside a {
  display: inline-block;
  font-weight: 700;
  color: #0a0a0a;
  font-size: 15px
}

@media screen and (max-width:768px) {
  .site-index .information .leftside a {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 13px
  }
}

.site-index .information .leftside a:hover {
  text-decoration: underline
}

.site-index .information .leftside a i {
  display: inline-block;
  font-size: 13px;
  margin: 0 0 0 12px
}

.site-index .information ol {
  width: 70%;
  height: 200px;
  padding: 0 40px 0 0;
  overflow: auto
}

@media screen and (max-width:768px) {
  .site-index .information ol {
    width: 100%;
    height: 164px;
    padding: 15px;
    border: #e8e8e8 1px solid;
    border-radius: 4px
  }
}

.site-index .information ol li {
  border-bottom: #e8e8e8 1px solid;
  padding: 0 0 24px;
  margin: 0 0 24px
}

@media screen and (max-width:768px) {
  .site-index .information ol li {
    margin: 0 0 15px;
    padding: 0 0 15px
  }
}

.site-index .information ol li:last-child {
  margin: 0
}

.site-index .information ol li a {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  align-items: center;
  color: #0a0a0a
}

@media screen and (max-width:768px) {
  .site-index .information ol li a {
    display: block
  }
}

.site-index .information ol li a:hover h4 {
  text-decoration: underline
}

.site-index .information ol li .category, .site-index .information ol li time {
  display: block;
  font-weight: 600
}

@media screen and (max-width:768px) {
  .site-index .information ol li .category, .site-index .information ol li time {
    float: left
  }
}

.site-index .information ol li time {
  width: 16%
}

@media screen and (max-width:768px) {
  .site-index .information ol li time {
    width: auto;
    margin: 0 16px 0 0
  }
}

.site-index .information ol li .category {
  width: 14%;
  font-size: 12px;
  background: #0a0a0a;
  color: #fff;
  padding: 2px 0;
  text-align: center
}

@media screen and (max-width:768px) {
  .site-index .information ol li .category {
    width: 80px;
    font-size: 10px;
    padding: 1px 12px;
    margin: 2px 0 0;
    background: #b1b1c2
  }
}

.site-index .information ol li h4 {
  width: 70%;
  font-size: 16px;
  padding: 0 0 0 48px;
  font-weight: 500
}

@media screen and (max-width:768px) {
  .site-index .information ol li h4 {
    width: auto;
    font-size: 12px;
    padding: 8px 0 0;
    clear: both
  }
}

.site-index .concept {
  position: relative;
  margin: 0 0 8px
}

@media screen and (max-width:768px) {
  .site-index .concept {
    margin: 0
  }
}

.site-index .concept .bg {
  width: calc(50% + 80px);
  height: 100%;
  background: url(https://webkid.co.jp/images/index/concept_bg.jpg) no-repeat left center;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0
}

@media screen and (max-width:768px) {
  .site-index .concept .bg {
    background: url(https://webkid.co.jp/images/index/concept_bg_s.jpg) no-repeat left center;
    background-size: cover;
    position: relative;
    width: 100%;
    height: 200px
  }
}

.site-index .concept .mes {
  padding: 64px 0;
  padding-left: 56px;
  margin: 0 0 0 calc(50% + 80px)
}

@media screen and (max-width:768px) {
  .site-index .concept .mes {
    padding: 40px 15px 0;
    margin: 0;
    text-align: center;
    position: relative
  }
}

.site-index .concept .mes h2 {
  font-family: Poppins, sans-serif;
  font-size: 106px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  transform: translateX(-100px)
}

@media screen and (max-width:768px) {
  .site-index .concept .mes h2 {
    transform: translateX(0);
    font-size: 40px;
    position: absolute;
    top: -19px;
    left: 0;
    width: 100%
  }
}

.site-index .concept .mes dl {
  margin: 32px 0 0
}

@media screen and (max-width:768px) {
  .site-index .concept .mes dl {
    margin: 0
  }
}

.site-index .concept .mes dl dt {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 32px;
  line-height: 1.5
}

@media screen and (max-width:768px) {
  .site-index .concept .mes dl dt {
    font-size: 17px;
    margin: 0 0 24px
  }
}

.site-index .concept .mes dl dd {
  font-size: 15.5px;
  text-align: justify
}

@media screen and (max-width:768px) {
  .site-index .concept .mes dl dd {
    font-size: 13px;
    padding: 0 15px
  }
  .site-index .concept .mes dl dd br {
    display: none
  }
}

.site-index .service {
  position: relative
}

.site-index .service.wrap {
  padding-bottom: 152px
}

@media screen and (max-width:768px) {
  .site-index .service.wrap {
    padding-top: 64px;
    padding-bottom: 108px;
    padding-left: 0;
    padding-right: 0
  }
}

.site-index .service._active:after, .site-index .service._active:before {
  width: 5px;
  transform: rotate(45deg);
  transition: all .2s .6s cubic-bezier(.455, .03, .515, .955)
}

.site-index .service:after, .site-index .service:before {
  content: '';
  width: 0;
  height: 160px;
  position: absolute;
  background: #F4D780;
  transform: rotate(30deg);
  z-index: 10
}

@media screen and (max-width:768px) {
  .site-index .service:after, .site-index .service:before {
    display: none
  }
}

.site-index .service:before {
  top: 80px;
  left: calc(8% + 525px)
}

.site-index .service:after {
  top: 144px;
  left: calc(8% + 500px)
}

.site-index .service #bubble {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1
}

.site-index .service .elem-area {
  padding: 0 0 0 6%;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  align-items: center
}

@media screen and (max-width:1400px) {
  .site-index .service .elem-area {
    padding: 0 0 0 5%
  }
}

@media screen and (max-width:1400px) and (max-width:768px) {
  .site-index .service .elem-area {
    padding: 0;
    display: block
  }
}

.site-index .service .txtbox {
  width: 488px;
  padding: 0 88px 0 0;
  overflow: hidden
}

@media screen and (max-width:768px) {
  .site-index .service .txtbox {
    width: auto;
    padding: 0 15px
  }
}

.site-index .service .txtbox h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  margin: 0 0 16px;
  position: relative
}

.site-index .service .txtbox h2._active:before {
  width: 100%;
  transition: all .4s .6s cubic-bezier(.455, .03, .515, .955)
}

@media screen and (max-width:768px) {
  .site-index .service .txtbox h2 {
    font-size: 12px;
    margin: 0 0 8px;
    text-align: center
  }
}

.site-index .service .txtbox h2:after, .site-index .service .txtbox h2:before {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 0;
  z-index: -1
}

@media screen and (max-width:768px) {
  .site-index .service .txtbox h2:after, .site-index .service .txtbox h2:before {
    display: none
  }
}

.site-index .service .txtbox h2:before {
  width: 0;
  background: #0a0a0a
}

.site-index .service .txtbox h2:after {
  width: 50%;
  height: 100%;
  background: #fff;
  top: 0
}

.site-index .service .txtbox dl dt {
  font-family: Poppins, sans-serif;
  font-size: 80px;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: .064em;
  text-indent: -2px;
  margin: 0 0 20px
}

@media screen and (max-width:768px) {
  .site-index .service .txtbox dl dt {
    font-size: 38px;
    text-indent: 0;
    text-align: center
  }
}

.site-index .service .txtbox dl dd {
  font-size: 15px;
  text-align: justify
}

@media screen and (max-width:768px) {
  .site-index .service .txtbox dl dd {
    font-size: 13px;
    margin: 0 15px 32px
  }
  .site-index .service .txtbox dl dd br {
    display: none
  }
}

.site-index .service .txtbox .slide-controlls {
  margin: 24px 0 0
}

@media screen and (max-width:768px) {
  .site-index .service .txtbox .slide-controlls {
    display: none
  }
}

.site-index .service .txtbox .slide-controlls .controll {
  width: 36px;
  height: 36px;
  background: #0a0a0a;
  border: #0a0a0a 1px solid;
  color: #fff;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  align-items: center;
  justify-content: center;
  float: left;
  margin: 0 16px 0 0;
  cursor: pointer;
  font-size: 10px
}

.site-index .service .txtbox .slide-controlls .controll:hover {
  background: 0 0;
  color: #0a0a0a
}

.site-index .service .txtbox .slide-controlls .controll:last-of-type {
  margin: 0
}

.site-index .service .motion {
  width: calc(100% - 488px)
}

@media screen and (max-width:768px) {
  .site-index .service .motion {
    width: 100%
  }
}

.site-index .service #index-service {
  display: none
}

.site-index .service #index-service.swiper-container-initialized {
  display: block
}

.site-index .service #index-service .swiper-wrapper {
  transition-timing-function: cubic-bezier(.785, .135, .15, .86)
}

.site-index .service #index-service .items {
  width: 340px
}

.site-index .service #index-service .items img {
  width: 100%
}

.site-index .service #index-service .items a {
  color: #0a0a0a;
  display: block
}

.site-index .service #index-service .items p.text {
  font-size: 18px;
  font-weight: 700;
  padding: 24px 0 0;
  position: relative
}

@media screen and (max-width:768px) {
  .site-index .service #index-service .items p.text {
    font-size: 15px;
    padding: 0;
    margin: 12px 0 0
  }
}

.site-index .service #index-service .items p.text:before {
  content: attr(data-eng);
  font-family: Poppins, sans-serif;
  border-left: .24em;
  line-height: 1;
  font-size: 11px;
  display: block;
  margin: 0 0 4px;
  font-weight: 400
}

@media screen and (max-width:768px) {
  .site-index .service #index-service .items p.text:before {
    display: none
  }
}

.site-index .service #index-service .items p.text:after {
  content: "\f0a9";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 64%;
  right: 0;
  transform: translateY(-50%)
}

@media screen and (max-width:768px) {
  .site-index .service #index-service .items p.text:after {
    top: 50%
  }
}

.site-index .solution {
  position: relative;
  background: #F4D780;
  overflow: hidden
}

.site-index .solution._active:before {
  height: 62%
}

@media screen and (max-width:768px) {
  .site-index .solution._active:before {
    height: 17%
  }
}

.site-index .solution:before {
  content: '';
  width: 100%;
  height: 0;
  background: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  transition: all .8s .6s cubic-bezier(.455, .03, .515, .955)
}

.site-index .solution.site-module.wrap {
  padding-top: 48px
}

@media screen and (max-width:768px) {
  .site-index .solution.site-module.wrap {
    padding-top: 50px
  }
}

.site-index .solution .text-box {
  text-align: center;
  position: relative;
  z-index: 2
}

.site-index .solution .flex-list {
  padding: 0 8%;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  position: relative;
  z-index: 2
}

.site-index .solution .flex-list._active li {
  opacity: 1;
  transform: translateY(0)
}

.site-index .solution .flex-list._active li:nth-child(1) {
  transition: transform .6s .2s cubic-bezier(.455, .03, .515, .955), opacity .6s .2s cubic-bezier(.455, .03, .515, .955)
}

.site-index .solution .flex-list._active li:nth-child(2) {
  transition: transform .6s .4s cubic-bezier(.455, .03, .515, .955), opacity .6s .4s cubic-bezier(.455, .03, .515, .955)
}

.site-index .solution .flex-list._active li:nth-child(3) {
  transition: transform .6s .6s cubic-bezier(.455, .03, .515, .955), opacity .6s .6s cubic-bezier(.455, .03, .515, .955)
}

.site-index .solution .flex-list._active li:after, .site-index .solution .flex-list._active li:before {
  opacity: 1;
  transition: transform .2s .8s cubic-bezier(.455, .03, .515, .955), opacity .2s .8s cubic-bezier(.455, .03, .515, .955)
}

.site-index .solution .flex-list._active li:before {
  transform: rotate(-45deg) scale(1)
}

.site-index .solution .flex-list._active li:after {
  transform: rotate(45deg) scale(1)
}

@media screen and (max-width:1400px) {
  .site-index .solution .flex-list {
    padding: 0 5%
  }
}

@media screen and (max-width:768px) {
  .site-index .solution .flex-list {
    padding: 0
  }
}

.site-index .solution .flex-list li {
  list-style: none;
  width: 27%;
  background: #fff;
  padding: 32px;
  position: relative;
  border-radius: 12px;
  opacity: 0;
  transform: translateY(40px)
}

@media screen and (max-width:1400px) {
  .site-index .solution .flex-list li {
    width: 30%
  }
}

@media screen and (max-width:768px) {
  .site-index .solution .flex-list li {
    width: auto;
    padding: 20px;
    margin: 0 0 16px
  }
  .site-index .solution .flex-list li:last-child {
    margin: 0
  }
}

.site-index .solution .flex-list li:after, .site-index .solution .flex-list li:before {
  content: '';
  position: absolute;
  top: 50%;
  right: -24.3%;
  width: 3vw;
  height: 6px;
  background: #F4D780;
  transform: rotate(-45deg) scale(2);
  opacity: 0
}

@media screen and (max-width:1400px) {
  .site-index .solution .flex-list li:after, .site-index .solution .flex-list li:before {
    right: -13.8%
  }
}

@media screen and (max-width:768px) {
  .site-index .solution .flex-list li:after, .site-index .solution .flex-list li:before {
    display: none
  }
}

.site-index .solution .flex-list li:after {
  transform: rotate(45deg) scale(0)
}

.site-index .solution .flex-list li:last-child:after, .site-index .solution .flex-list li:last-child:before {
  display: none
}

.site-index .solution .flex-list li figure {
  width: 96px;
  height: 96px;
  margin: 12px auto 32px;
  background: #f6f6f8;
  border-radius: 50%;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  align-items: center;
  justify-content: center
}

@media screen and (max-width:768px) {
  .site-index .solution .flex-list li figure {
    width: 56px;
    height: 56px;
    float: left;
    margin: 0 20px 0 0
  }
}

.site-index .solution .flex-list li figure img {
  width: 48px
}

@media screen and (max-width:768px) {
  .site-index .solution .flex-list li figure img {
    width: 32px
  }
}

.site-index .solution .flex-list li dl dt {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 16px
}

@media screen and (max-width:768px) {
  .site-index .solution .flex-list li dl dt {
    margin: 4px 0 0;
    font-size: 16px;
    text-align: left
  }
}

.site-index .solution .flex-list li dl dt:before {
  content: attr(data-eng);
  font-family: Poppins, sans-serif;
  letter-spacing: .12em;
  font-size: 10px;
  display: block
}

.site-index .solution .flex-list li dl dd {
  text-align: justify
}

@media screen and (max-width:768px) {
  .site-index .solution .flex-list li dl dd {
    clear: both;
    font-size: 12px;
    padding: 12px 0 0
  }
}

.site-index .solution .btnarea {
  position: relative;
  z-index: 2;
  margin: 32px 0 0
}

@media screen and (max-width:768px) {
  .site-index .solution .btnarea {
    margin: 24px 15px 0
  }
}

.site-index .solution .btnarea a {
  width: 320px;
  margin: 0 12px;
  position: relative
}

@media screen and (max-width:768px) {
  .site-index .solution .btnarea a {
    width: auto;
    margin: 0 0 16px
  }
  .site-index .solution .btnarea a:last-of-type {
    margin: 0
  }
}

.site-index .solution .btnarea a i {
  margin: 0;
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%)
}

.site-index .twos {
  position: relative
}

.site-index .twos.wrap {
  padding-top: 179.2px
}

@media screen and (max-width:768px) {
  .site-index .twos.wrap {
    padding: 0
  }
}

.site-index .twos:after, .site-index .twos:before {
  content: '';
  width: calc(50% - 1px);
  height: 88%;
  z-index: 1;
  position: absolute;
  top: 0
}

@media screen and (max-width:768px) {
  .site-index .twos:after, .site-index .twos:before {
    display: none
  }
}

.site-index .twos:before {
  left: 0;
  background: url(https://webkid.co.jp/images/index/two_01.jpg) center;
  background-size: cover
}

@media screen and (max-width:768px) {
  .site-index .twos:before {
    background: url(https://webkid.co.jp/images/index/two_01_s.jpg) center;
    background-size: cover
  }
}

.site-index .twos:after {
  right: 0;
  background: url(https://webkid.co.jp/images/index/two_02.jpg) center;
  background-size: cover
}

@media screen and (max-width:768px) {
  .site-index .twos:after {
    background: url(https://webkid.co.jp/images/index/two_02_s.jpg) center;
    background-size: cover
  }
}

.site-index .twos .twoblock {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  z-index: 2
}

@media screen and (max-width:768px) {
  .site-index .twos .twoblock {
    display: block;
    padding: 0 0 40px;
    border-bottom: #e8e8e8 1px solid
  }
}

.site-index .twos .twoblock .blocks {
  width: 47%;
  background: #fff;
  padding: 32px 48px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .08);
  text-align: center;
  border-radius: 3px
}

@media screen and (max-width:768px) {
  .site-index .twos .twoblock .blocks {
    width: auto;
    padding: 0;
    margin: 0 0 32px;
    box-shadow: none
  }
  .site-index .twos .twoblock .blocks:before {
    content: '';
    position: relative;
    width: 100%;
    height: 200px;
    display: block
  }
  .site-index .twos .twoblock .blocks:first-of-type:before {
    background: url(https://webkid.co.jp/images/index/two_01.jpg) center;
    background-size: cover
  }
  .site-index .twos .twoblock .blocks:last-of-type {
    margin: 0
  }
  .site-index .twos .twoblock .blocks:last-of-type:before {
    background: url(https://webkid.co.jp/images/index/two_02.jpg) center;
    background-size: cover
  }
}

.site-index .twos .twoblock .blocks dt {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5
}

@media screen and (max-width:768px) {
  .site-index .twos .twoblock .blocks dt {
    font-size: 17px;
    margin: 24px 20px 0
  }
}

.site-index .twos .twoblock .blocks dt a {
  color: #0a0a0a
}

.site-index .twos .twoblock .blocks dt a:hover {
  opacity: .64
}

.site-index .twos .twoblock .blocks dt:before {
  font-family: Poppins, sans-serif;
  content: attr(data-eng);
  font-size: 11px;
  color: #f65f6a;
  display: block;
  margin: 0 0 8px;
  letter-spacing: .08em
}

@media screen and (max-width:768px) {
  .site-index .twos .twoblock .blocks dt:before {
    font-size: 9px
  }
}

.site-index .twos .twoblock .blocks dt:after {
  content: '';
  width: 48px;
  height: 1px;
  background: #0a0a0a;
  margin: 16px auto;
  display: block
}

@media screen and (max-width:768px) {
  .site-index .twos .twoblock .blocks dt:after {
    margin: 18px auto
  }
}

.site-index .twos .twoblock .blocks dd {
  text-align: justify
}

@media screen and (max-width:768px) {
  .site-index .twos .twoblock .blocks dd {
    margin: 0 20px
  }
}

.site-index .portfolio {
  position: relative;
  overflow: hidden
}

.site-index .portfolio._active:before {
  height: 52%
}

.site-index .portfolio:before {
  content: '';
  width: 100%;
  height: 0;
  position: absolute;
  left: 0;
  bottom: 0;
  background: #F4D780;
  transition: all .8s .6s cubic-bezier(.455, .03, .515, .955)
}

.site-index .portfolio #index-portfolio {
  width: 100%;
  position: relative;
  display: none;
  overflow: visible
}

.site-index .portfolio #index-portfolio.swiper-container-initialized {
  display: block
}

.site-index .portfolio #index-portfolio .swiper-wrapper {
  transition-timing-function: cubic-bezier(.785, .135, .15, .86)
}

.site-index .portfolio #index-portfolio .swiper-slide {
  transform: scale(.8);
  transition: all .4s 0s cubic-bezier(.455, .03, .515, .955)
}

@media screen and (min-width:769px) {
  .site-index .portfolio #index-portfolio .swiper-slide.swiper-slide-active, .site-index .portfolio #index-portfolio .swiper-slide.swiper-slide-next, .site-index .portfolio #index-portfolio .swiper-slide.swiper-slide-prev {
    transform: scale(1)
  }
}

@media screen and (max-width:768px) {
  .site-index .portfolio #index-portfolio .swiper-slide {
    transform: scale(1)
  }
}

.site-index .portfolio #index-portfolio .items {
  width: 320px;
  background: #fff;
  box-shadow: 0 0 24px rgba(0, 0, 0, .08)
}

@media screen and (max-width:768px) {
  .site-index .portfolio #index-portfolio .items {
    width: auto;
    display: block
  }
}

.site-index .portfolio #index-portfolio .items a {
  position: relative;
  display: block;
  background: #fff;
  color: #0a0a0a
}

.site-index .portfolio #index-portfolio .items a:hover figure:before {
  background: rgba(0, 0, 0, .4);
  opacity: 1
}

.site-index .portfolio #index-portfolio .items a:hover figure:after {
  opacity: 1;
  box-shadow: 0 0 48px rgba(0, 0, 0, .32);
  transform: translateX(-50%) translateY(-50%)
}

.site-index .portfolio #index-portfolio .items a:hover figure img {
  opacity: 1;
  transform: scale(1.04)
}

.site-index .portfolio #index-portfolio .items figure {
  overflow: hidden;
  position: relative
}

.site-index .portfolio #index-portfolio .items figure:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transition: all .4s 0s cubic-bezier(.455, .03, .515, .955)
}

.site-index .portfolio #index-portfolio .items figure:after {
  content: 'MORE';
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  color: #0a0a0a;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 40px;
  border-radius: 999px;
  opacity: 0;
  transform: translateX(-50%) translateY(0);
  z-index: 3;
  transition: all .4s 0s cubic-bezier(.455, .03, .515, .955)
}

.site-index .portfolio #index-portfolio .items figure img {
  width: 100%;
  transition: all .4s 0s cubic-bezier(.455, .03, .515, .955)
}

.site-index .portfolio #index-portfolio .items dl {
  position: relative;
  padding: 16px
}

.site-index .portfolio #index-portfolio .items dl dt {
  font-weight: 700;
  margin: 0 0 8px
}

.site-index .portfolio #index-portfolio .items dl dd {
  font-size: 12px
}

.site-index .portfolio #index-portfolio .items dl dd.date {
  background: #f6f6f8;
  border-radius: 999px;
  font-size: 10px;
  padding: 2px 12px;
  position: absolute;
  right: 16px;
  bottom: 16px
}

.site-index .portfolio #index-portfolio .items .bottom {
  padding: 8px 16px;
  border-top: #e8e8e8 1px solid;
  font-size: 12px
}

.site-index .portfolio #index-portfolio .items .bottom i {
  display: inline-block;
  margin: 0 8px 0 0;
  color: #c8c8d4
}

.site-index .portfolio .swiper-pagination {
  position: absolute;
  width: 100%;
  bottom: 64px;
  left: 0
}

@media screen and (max-width:768px) {
  .site-index .portfolio .swiper-pagination {
    position: relative;
    bottom: auto;
    margin: 16px 0 0
  }
}

.site-index .portfolio .swiper-pagination .swiper-pagination-bullet {
  margin: 0 6px;
  width: 6px;
  height: 6px;
  opacity: 1;
  background: rgba(153, 133, 0, .32);
  transition: all .2s 0s cubic-bezier(.455, .03, .515, .955)
}

.site-index .portfolio .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  transform: scale(2.4);
  margin: 0 12px;
  background: #fff
}

.site-index .blog {
  background: #f6f6f8;
  border-top: #fff 16px solid
}

@media screen and (max-width:768px) {
  .site-index .blog {
    margin: 8px 0 0;
    border: none
  }
}

.site-index .blog .title-area {
  width: 30%;
  width: auto
}

@media screen and (max-width:768px) {
  .site-index .blog .title-area {
    width: 100%;
    position: relative
  }
}

.site-index .blog .title-area h3 {
  font-family: Poppins, sans-serif;
  font-size: 36px;
  line-height: 1;
  font-weight: 700;
  margin: 0 0 20px
}

@media screen and (max-width:768px) {
  .site-index .blog .title-area h3 {
    font-size: 22px
  }
}

.site-index .blog .title-area a {
  display: inline-block;
  font-weight: 700;
  color: #0a0a0a;
  font-size: 15px
}

@media screen and (max-width:768px) {
  .site-index .blog .title-area a {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 13px
  }
}

.site-index .blog .title-area a:hover {
  text-decoration: underline
}

.site-index .blog .title-area a i {
  display: inline-block;
  font-size: 13px;
  margin: 0 0 0 12px
}

.site-index .blog .title-area h3 {
  float: left;
  font-size: 28px;
  margin: 0 0 40px
}

@media screen and (max-width:768px) {
  .site-index .blog .title-area h3 {
    font-size: 22px;
    margin: 0 0 24px
  }
}

.site-index .blog .title-area h3:after {
  content: attr(data-text);
  font-size: 14px;
  display: inline-block;
  margin: 0 0 0 24px
}

@media screen and (max-width:768px) {
  .site-index .blog .title-area h3:after {
    font-size: 12px;
    margin: 0 0 0 16px;
    transform: translateY(-2px)
  }
}

.site-index .blog .title-area a {
  float: right
}

.site-dtp dl.context, .site-illust dl.context, .site-service dl.context, .site-video dl.context, .site-web dl.context {
  text-align: center;
  margin: 0 0 40px
}

@media screen and (max-width:768px) {
  .site-dtp dl.context, .site-illust dl.context, .site-service dl.context, .site-video dl.context, .site-web dl.context {
    margin: 0 0 32px
  }
}

.site-dtp dl.context dt, .site-illust dl.context dt, .site-service dl.context dt, .site-video dl.context dt, .site-web dl.context dt {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 12px
}

@media screen and (max-width:768px) {
  .site-dtp dl.context dt, .site-illust dl.context dt, .site-service dl.context dt, .site-video dl.context dt, .site-web dl.context dt {
    font-size: 20px;
    margin: 0 0 8px
  }
}

.site-dtp dl.context dd, .site-illust dl.context dd, .site-service dl.context dd, .site-video dl.context dd, .site-web dl.context dd {
  font-size: 15px
}

@media screen and (max-width:768px) {
  .site-dtp dl.context dd, .site-illust dl.context dd, .site-service dl.context dd, .site-video dl.context dd, .site-web dl.context dd {
    font-size: 13px;
    margin: 0 15px;
    text-align: justify
  }
  .site-dtp dl.context dd br, .site-illust dl.context dd br, .site-service dl.context dd br, .site-video dl.context dd br, .site-web dl.context dd br {
    display: none
  }
}

.site-dtp p.alert, .site-illust p.alert, .site-service p.alert, .site-video p.alert, .site-web p.alert {
  text-align: right;
  font-size: 12px;
  margin: 16px 0 0
}

@media screen and (max-width:768px) {
  .site-dtp p.alert, .site-illust p.alert, .site-service p.alert, .site-video p.alert, .site-web p.alert {
    font-size: 10px
  }
}

.site-dtp .margin, .site-illust .margin, .site-service .margin, .site-video .margin, .site-web .margin {
  margin: 0 0 64px
}

@media screen and (max-width:768px) {
  .site-dtp .margin, .site-illust .margin, .site-service .margin, .site-video .margin, .site-web .margin {
    margin: 0 0 40px
  }
}

.site-dtp .service-list, .site-illust .service-list, .site-service .service-list, .site-video .service-list, .site-web .service-list {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  margin: 0 0 64px
}

.site-dtp .service-list.m, .site-illust .service-list.m, .site-service .service-list.m, .site-video .service-list.m, .site-web .service-list.m {
  margin: 0 0 48px
}

@media screen and (max-width:768px) {
  .site-dtp .service-list.m, .site-illust .service-list.m, .site-service .service-list.m, .site-video .service-list.m, .site-web .service-list.m {
    margin: 0 0 32px
  }
}

@media screen and (max-width:768px) {
  .site-dtp .service-list, .site-illust .service-list, .site-service .service-list, .site-video .service-list, .site-web .service-list {
    display: block;
    margin: 0 0 40px
  }
}

.site-dtp .service-list li, .site-illust .service-list li, .site-service .service-list li, .site-video .service-list li, .site-web .service-list li {
  width: 31%;
  list-style: none;
  background: #f6f6f8
}

.site-dtp .service-list li.white, .site-illust .service-list li.white, .site-service .service-list li.white, .site-video .service-list li.white, .site-web .service-list li.white {
  background: #fff;
  box-shadow: 0 2px 16px rgba(0, 0, 0, .1)
}

.site-dtp .service-list li.white figure, .site-illust .service-list li.white figure, .site-service .service-list li.white figure, .site-video .service-list li.white figure, .site-web .service-list li.white figure {
  border-bottom: #e8e8e8 1px solid
}

.site-dtp .service-list li.white figure:before, .site-illust .service-list li.white figure:before, .site-service .service-list li.white figure:before, .site-video .service-list li.white figure:before, .site-web .service-list li.white figure:before {
  display: none
}

.site-dtp .service-list li.white dl dt, .site-illust .service-list li.white dl dt, .site-service .service-list li.white dl dt, .site-video .service-list li.white dl dt, .site-web .service-list li.white dl dt {
  border: none;
  margin: 0
}

@media screen and (max-width:768px) {
  .site-dtp .service-list li, .site-illust .service-list li, .site-service .service-list li, .site-video .service-list li, .site-web .service-list li {
    width: auto;
    margin: 0 0 24px
  }
  .site-dtp .service-list li:last-child, .site-illust .service-list li:last-child, .site-service .service-list li:last-child, .site-video .service-list li:last-child, .site-web .service-list li:last-child {
    margin: 0
  }
}

.site-dtp .service-list li figure, .site-illust .service-list li figure, .site-service .service-list li figure, .site-video .service-list li figure, .site-web .service-list li figure {
  position: relative;
  top: 0;
  left: 0
}

.site-dtp .service-list li figure:before, .site-illust .service-list li figure:before, .site-service .service-list li figure:before, .site-video .service-list li figure:before, .site-web .service-list li figure:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-style: solid;
  border-width: 20px 20px 0 0;
  border-color: #F4D780 transparent transparent transparent
}

.site-dtp .service-list li figure img, .site-illust .service-list li figure img, .site-service .service-list li figure img, .site-video .service-list li figure img, .site-web .service-list li figure img {
  width: 100%
}

.site-dtp .service-list li dl, .site-illust .service-list li dl, .site-service .service-list li dl, .site-video .service-list li dl, .site-web .service-list li dl {
  padding: 20px
}

.site-dtp .service-list li dl dt, .site-illust .service-list li dl dt, .site-service .service-list li dl dt, .site-video .service-list li dl dt, .site-web .service-list li dl dt {
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  border-bottom: #fff 2px solid;
  padding: 0 0 20px;
  margin: 0 0 16px
}

.site-dtp .service-list li dl dt:before, .site-illust .service-list li dl dt:before, .site-service .service-list li dl dt:before, .site-video .service-list li dl dt:before, .site-web .service-list li dl dt:before {
  font-family: Poppins, sans-serif;
  content: attr(data-eng);
  display: block;
  font-size: 12px;
  margin: 0 0 10px;
  letter-spacing: .06em;
  opacity: .32
}

.site-dtp .service-list li dl dd.price, .site-illust .service-list li dl dd.price, .site-service .service-list li dl dd.price, .site-video .service-list li dl dd.price, .site-web .service-list li dl dd.price {
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 12px
}

.site-dtp .service-list li dl dd.price strong, .site-illust .service-list li dl dd.price strong, .site-service .service-list li dl dd.price strong, .site-video .service-list li dl dd.price strong, .site-web .service-list li dl dd.price strong {
  line-height: 1;
  font-size: 44px;
  margin: 0 8px;
  color: #F4D780;
  display: inline-block
}

.site-dtp .service-list li dl dd.descript, .site-illust .service-list li dl dd.descript, .site-service .service-list li dl dd.descript, .site-video .service-list li dl dd.descript, .site-web .service-list li dl dd.descript {
  font-size: 13px;
  text-align: justify
}

.site-dtp .service-list li dl dd.schedule, .site-illust .service-list li dl dd.schedule, .site-service .service-list li dl dd.schedule, .site-video .service-list li dl dd.schedule, .site-web .service-list li dl dd.schedule {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 4px
}

.site-dtp .service-list li dl dd.schedule i, .site-illust .service-list li dl dd.schedule i, .site-service .service-list li dl dd.schedule i, .site-video .service-list li dl dd.schedule i, .site-web .service-list li dl dd.schedule i {
  display: inline-block;
  margin: 0 8px 0 0
}

.site-dtp .feature-list, .site-illust .feature-list, .site-service .feature-list, .site-video .feature-list, .site-web .feature-list {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between
}

@media screen and (max-width:768px) {
  .site-dtp .feature-list, .site-illust .feature-list, .site-service .feature-list, .site-video .feature-list, .site-web .feature-list {
    display: block
  }
}

.site-dtp .feature-list li, .site-illust .feature-list li, .site-service .feature-list li, .site-video .feature-list li, .site-web .feature-list li {
  width: 23%;
  background: #fff;
  margin: 0 0 2.5%;
  padding: 16px;
  border-radius: 6px;
  border: #f6f6f8 4px solid;
  position: relative
}

@media screen and (max-width:768px) {
  .site-dtp .feature-list li, .site-illust .feature-list li, .site-service .feature-list li, .site-video .feature-list li, .site-web .feature-list li {
    width: 100%;
    padding: 20px;
    margin: 0 0 16px
  }
  .site-dtp .feature-list li:after, .site-illust .feature-list li:after, .site-service .feature-list li:after, .site-video .feature-list li:after, .site-web .feature-list li:after {
    content: '';
    clear: both;
    display: block
  }
  .site-dtp .feature-list li:last-child, .site-illust .feature-list li:last-child, .site-service .feature-list li:last-child, .site-video .feature-list li:last-child, .site-web .feature-list li:last-child {
    margin: 0
  }
}

.site-dtp .feature-list li i, .site-illust .feature-list li i, .site-service .feature-list li i, .site-video .feature-list li i, .site-web .feature-list li i {
  display: block;
  font-size: 38px;
  line-height: 1;
  padding: 12px 0 16px;
  text-align: center;
  color: #bdbdcb
}

@media screen and (max-width:768px) {
  .site-dtp .feature-list li i, .site-illust .feature-list li i, .site-service .feature-list li i, .site-video .feature-list li i, .site-web .feature-list li i {
    padding: 0;
    float: left;
    font-size: 24px;
    padding: 0;
    margin: 0 20px 0 0;
    text-align: left
  }
}

.site-dtp .feature-list li dl dt, .site-illust .feature-list li dl dt, .site-service .feature-list li dl dt, .site-video .feature-list li dl dt, .site-web .feature-list li dl dt {
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 16px;
  padding: 0 0 12px;
  border-bottom: #e8e8e8 1px solid
}

@media screen and (max-width:768px) {
  .site-dtp .feature-list li dl dt, .site-illust .feature-list li dl dt, .site-service .feature-list li dl dt, .site-video .feature-list li dl dt, .site-web .feature-list li dl dt {
    border: none;
    text-align: left;
    margin: 0;
    padding: 0;
    transform: translateY(-3px)
  }
}

.site-dtp .feature-list li dl dd, .site-illust .feature-list li dl dd, .site-service .feature-list li dl dd, .site-video .feature-list li dl dd, .site-web .feature-list li dl dd {
  text-align: justify;
  font-size: 13px
}

@media screen and (max-width:768px) {
  .site-dtp .feature-list li dl dd, .site-illust .feature-list li dl dd, .site-service .feature-list li dl dd, .site-video .feature-list li dl dd, .site-web .feature-list li dl dd {
    clear: both;
    padding: 8px 0 0
  }
}

.site-dtp .chart-clums, .site-illust .chart-clums, .site-service .chart-clums, .site-video .chart-clums, .site-web .chart-clums {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  position: relative;
  margin: 0 0 48px
}

@media screen and (max-width:768px) {
  .site-dtp .chart-clums, .site-illust .chart-clums, .site-service .chart-clums, .site-video .chart-clums, .site-web .chart-clums {
    margin: 0 0 32px;
    display: block
  }
}

.site-dtp .chart-clums:before, .site-illust .chart-clums:before, .site-service .chart-clums:before, .site-video .chart-clums:before, .site-web .chart-clums:before {
  content: '';
  width: 1px;
  height: 100%;
  border: #e8e8e8 1px dashed;
  position: absolute;
  top: 0;
  left: 50%
}

@media screen and (max-width:768px) {
  .site-dtp .chart-clums:before, .site-illust .chart-clums:before, .site-service .chart-clums:before, .site-video .chart-clums:before, .site-web .chart-clums:before {
    display: none
  }
}

.site-dtp .chart-clums .one, .site-illust .chart-clums .one, .site-service .chart-clums .one, .site-video .chart-clums .one, .site-web .chart-clums .one {
  width: 50%;
  padding: 0 56px 0 0
}

@media screen and (max-width:768px) {
  .site-dtp .chart-clums .one, .site-illust .chart-clums .one, .site-service .chart-clums .one, .site-video .chart-clums .one, .site-web .chart-clums .one {
    width: auto;
    padding: 0;
    margin: 0 0 40px
  }
}

.site-dtp .chart-clums .one:last-of-type, .site-illust .chart-clums .one:last-of-type, .site-service .chart-clums .one:last-of-type, .site-video .chart-clums .one:last-of-type, .site-web .chart-clums .one:last-of-type {
  padding: 0 0 0 56px
}

@media screen and (max-width:768px) {
  .site-dtp .chart-clums .one:last-of-type, .site-illust .chart-clums .one:last-of-type, .site-service .chart-clums .one:last-of-type, .site-video .chart-clums .one:last-of-type, .site-web .chart-clums .one:last-of-type {
    padding: 0;
    margin: 0
  }
}

.site-dtp .chart-clums .one h4, .site-illust .chart-clums .one h4, .site-service .chart-clums .one h4, .site-video .chart-clums .one h4, .site-web .chart-clums .one h4 {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  background: #f6f6f8;
  padding: 12px 0
}

@media screen and (max-width:768px) {
  .site-dtp .chart-clums .one h4, .site-illust .chart-clums .one h4, .site-service .chart-clums .one h4, .site-video .chart-clums .one h4, .site-web .chart-clums .one h4 {
    padding: 10px 16px;
    font-size: 16px;
    text-align: left
  }
}

.site-dtp .chart-clums .one ul._active li dl dd.data-1:before, .site-illust .chart-clums .one ul._active li dl dd.data-1:before, .site-service .chart-clums .one ul._active li dl dd.data-1:before, .site-video .chart-clums .one ul._active li dl dd.data-1:before, .site-web .chart-clums .one ul._active li dl dd.data-1:before {
  width: calc((100% - 60px)/ 100 * 1);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-2:before, .site-illust .chart-clums .one ul._active li dl dd.data-2:before, .site-service .chart-clums .one ul._active li dl dd.data-2:before, .site-video .chart-clums .one ul._active li dl dd.data-2:before, .site-web .chart-clums .one ul._active li dl dd.data-2:before {
  width: calc((100% - 60px)/ 100 * 2);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-3:before, .site-illust .chart-clums .one ul._active li dl dd.data-3:before, .site-service .chart-clums .one ul._active li dl dd.data-3:before, .site-video .chart-clums .one ul._active li dl dd.data-3:before, .site-web .chart-clums .one ul._active li dl dd.data-3:before {
  width: calc((100% - 60px)/ 100 * 3);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-4:before, .site-illust .chart-clums .one ul._active li dl dd.data-4:before, .site-service .chart-clums .one ul._active li dl dd.data-4:before, .site-video .chart-clums .one ul._active li dl dd.data-4:before, .site-web .chart-clums .one ul._active li dl dd.data-4:before {
  width: calc((100% - 60px)/ 100 * 4);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-5:before, .site-illust .chart-clums .one ul._active li dl dd.data-5:before, .site-service .chart-clums .one ul._active li dl dd.data-5:before, .site-video .chart-clums .one ul._active li dl dd.data-5:before, .site-web .chart-clums .one ul._active li dl dd.data-5:before {
  width: calc((100% - 60px)/ 100 * 5);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-6:before, .site-illust .chart-clums .one ul._active li dl dd.data-6:before, .site-service .chart-clums .one ul._active li dl dd.data-6:before, .site-video .chart-clums .one ul._active li dl dd.data-6:before, .site-web .chart-clums .one ul._active li dl dd.data-6:before {
  width: calc((100% - 60px)/ 100 * 6);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-7:before, .site-illust .chart-clums .one ul._active li dl dd.data-7:before, .site-service .chart-clums .one ul._active li dl dd.data-7:before, .site-video .chart-clums .one ul._active li dl dd.data-7:before, .site-web .chart-clums .one ul._active li dl dd.data-7:before {
  width: calc((100% - 60px)/ 100 * 7);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-8:before, .site-illust .chart-clums .one ul._active li dl dd.data-8:before, .site-service .chart-clums .one ul._active li dl dd.data-8:before, .site-video .chart-clums .one ul._active li dl dd.data-8:before, .site-web .chart-clums .one ul._active li dl dd.data-8:before {
  width: calc((100% - 60px)/ 100 * 8);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-9:before, .site-illust .chart-clums .one ul._active li dl dd.data-9:before, .site-service .chart-clums .one ul._active li dl dd.data-9:before, .site-video .chart-clums .one ul._active li dl dd.data-9:before, .site-web .chart-clums .one ul._active li dl dd.data-9:before {
  width: calc((100% - 60px)/ 100 * 9);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-10:before, .site-illust .chart-clums .one ul._active li dl dd.data-10:before, .site-service .chart-clums .one ul._active li dl dd.data-10:before, .site-video .chart-clums .one ul._active li dl dd.data-10:before, .site-web .chart-clums .one ul._active li dl dd.data-10:before {
  width: calc((100% - 60px)/ 100 * 10);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-11:before, .site-illust .chart-clums .one ul._active li dl dd.data-11:before, .site-service .chart-clums .one ul._active li dl dd.data-11:before, .site-video .chart-clums .one ul._active li dl dd.data-11:before, .site-web .chart-clums .one ul._active li dl dd.data-11:before {
  width: calc((100% - 60px)/ 100 * 11);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-12:before, .site-illust .chart-clums .one ul._active li dl dd.data-12:before, .site-service .chart-clums .one ul._active li dl dd.data-12:before, .site-video .chart-clums .one ul._active li dl dd.data-12:before, .site-web .chart-clums .one ul._active li dl dd.data-12:before {
  width: calc((100% - 60px)/ 100 * 12);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-13:before, .site-illust .chart-clums .one ul._active li dl dd.data-13:before, .site-service .chart-clums .one ul._active li dl dd.data-13:before, .site-video .chart-clums .one ul._active li dl dd.data-13:before, .site-web .chart-clums .one ul._active li dl dd.data-13:before {
  width: calc((100% - 60px)/ 100 * 13);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-14:before, .site-illust .chart-clums .one ul._active li dl dd.data-14:before, .site-service .chart-clums .one ul._active li dl dd.data-14:before, .site-video .chart-clums .one ul._active li dl dd.data-14:before, .site-web .chart-clums .one ul._active li dl dd.data-14:before {
  width: calc((100% - 60px)/ 100 * 14);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-15:before, .site-illust .chart-clums .one ul._active li dl dd.data-15:before, .site-service .chart-clums .one ul._active li dl dd.data-15:before, .site-video .chart-clums .one ul._active li dl dd.data-15:before, .site-web .chart-clums .one ul._active li dl dd.data-15:before {
  width: calc((100% - 60px)/ 100 * 15);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-16:before, .site-illust .chart-clums .one ul._active li dl dd.data-16:before, .site-service .chart-clums .one ul._active li dl dd.data-16:before, .site-video .chart-clums .one ul._active li dl dd.data-16:before, .site-web .chart-clums .one ul._active li dl dd.data-16:before {
  width: calc((100% - 60px)/ 100 * 16);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-17:before, .site-illust .chart-clums .one ul._active li dl dd.data-17:before, .site-service .chart-clums .one ul._active li dl dd.data-17:before, .site-video .chart-clums .one ul._active li dl dd.data-17:before, .site-web .chart-clums .one ul._active li dl dd.data-17:before {
  width: calc((100% - 60px)/ 100 * 17);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-18:before, .site-illust .chart-clums .one ul._active li dl dd.data-18:before, .site-service .chart-clums .one ul._active li dl dd.data-18:before, .site-video .chart-clums .one ul._active li dl dd.data-18:before, .site-web .chart-clums .one ul._active li dl dd.data-18:before {
  width: calc((100% - 60px)/ 100 * 18);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-19:before, .site-illust .chart-clums .one ul._active li dl dd.data-19:before, .site-service .chart-clums .one ul._active li dl dd.data-19:before, .site-video .chart-clums .one ul._active li dl dd.data-19:before, .site-web .chart-clums .one ul._active li dl dd.data-19:before {
  width: calc((100% - 60px)/ 100 * 19);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-20:before, .site-illust .chart-clums .one ul._active li dl dd.data-20:before, .site-service .chart-clums .one ul._active li dl dd.data-20:before, .site-video .chart-clums .one ul._active li dl dd.data-20:before, .site-web .chart-clums .one ul._active li dl dd.data-20:before {
  width: calc((100% - 60px)/ 100 * 20);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-21:before, .site-illust .chart-clums .one ul._active li dl dd.data-21:before, .site-service .chart-clums .one ul._active li dl dd.data-21:before, .site-video .chart-clums .one ul._active li dl dd.data-21:before, .site-web .chart-clums .one ul._active li dl dd.data-21:before {
  width: calc((100% - 60px)/ 100 * 21);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-22:before, .site-illust .chart-clums .one ul._active li dl dd.data-22:before, .site-service .chart-clums .one ul._active li dl dd.data-22:before, .site-video .chart-clums .one ul._active li dl dd.data-22:before, .site-web .chart-clums .one ul._active li dl dd.data-22:before {
  width: calc((100% - 60px)/ 100 * 22);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-23:before, .site-illust .chart-clums .one ul._active li dl dd.data-23:before, .site-service .chart-clums .one ul._active li dl dd.data-23:before, .site-video .chart-clums .one ul._active li dl dd.data-23:before, .site-web .chart-clums .one ul._active li dl dd.data-23:before {
  width: calc((100% - 60px)/ 100 * 23);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-24:before, .site-illust .chart-clums .one ul._active li dl dd.data-24:before, .site-service .chart-clums .one ul._active li dl dd.data-24:before, .site-video .chart-clums .one ul._active li dl dd.data-24:before, .site-web .chart-clums .one ul._active li dl dd.data-24:before {
  width: calc((100% - 60px)/ 100 * 24);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-25:before, .site-illust .chart-clums .one ul._active li dl dd.data-25:before, .site-service .chart-clums .one ul._active li dl dd.data-25:before, .site-video .chart-clums .one ul._active li dl dd.data-25:before, .site-web .chart-clums .one ul._active li dl dd.data-25:before {
  width: calc((100% - 60px)/ 100 * 25);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-26:before, .site-illust .chart-clums .one ul._active li dl dd.data-26:before, .site-service .chart-clums .one ul._active li dl dd.data-26:before, .site-video .chart-clums .one ul._active li dl dd.data-26:before, .site-web .chart-clums .one ul._active li dl dd.data-26:before {
  width: calc((100% - 60px)/ 100 * 26);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-27:before, .site-illust .chart-clums .one ul._active li dl dd.data-27:before, .site-service .chart-clums .one ul._active li dl dd.data-27:before, .site-video .chart-clums .one ul._active li dl dd.data-27:before, .site-web .chart-clums .one ul._active li dl dd.data-27:before {
  width: calc((100% - 60px)/ 100 * 27);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-28:before, .site-illust .chart-clums .one ul._active li dl dd.data-28:before, .site-service .chart-clums .one ul._active li dl dd.data-28:before, .site-video .chart-clums .one ul._active li dl dd.data-28:before, .site-web .chart-clums .one ul._active li dl dd.data-28:before {
  width: calc((100% - 60px)/ 100 * 28);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-29:before, .site-illust .chart-clums .one ul._active li dl dd.data-29:before, .site-service .chart-clums .one ul._active li dl dd.data-29:before, .site-video .chart-clums .one ul._active li dl dd.data-29:before, .site-web .chart-clums .one ul._active li dl dd.data-29:before {
  width: calc((100% - 60px)/ 100 * 29);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-30:before, .site-illust .chart-clums .one ul._active li dl dd.data-30:before, .site-service .chart-clums .one ul._active li dl dd.data-30:before, .site-video .chart-clums .one ul._active li dl dd.data-30:before, .site-web .chart-clums .one ul._active li dl dd.data-30:before {
  width: calc((100% - 60px)/ 100 * 30);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-31:before, .site-illust .chart-clums .one ul._active li dl dd.data-31:before, .site-service .chart-clums .one ul._active li dl dd.data-31:before, .site-video .chart-clums .one ul._active li dl dd.data-31:before, .site-web .chart-clums .one ul._active li dl dd.data-31:before {
  width: calc((100% - 60px)/ 100 * 31);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-32:before, .site-illust .chart-clums .one ul._active li dl dd.data-32:before, .site-service .chart-clums .one ul._active li dl dd.data-32:before, .site-video .chart-clums .one ul._active li dl dd.data-32:before, .site-web .chart-clums .one ul._active li dl dd.data-32:before {
  width: calc((100% - 60px)/ 100 * 32);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-33:before, .site-illust .chart-clums .one ul._active li dl dd.data-33:before, .site-service .chart-clums .one ul._active li dl dd.data-33:before, .site-video .chart-clums .one ul._active li dl dd.data-33:before, .site-web .chart-clums .one ul._active li dl dd.data-33:before {
  width: calc((100% - 60px)/ 100 * 33);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-34:before, .site-illust .chart-clums .one ul._active li dl dd.data-34:before, .site-service .chart-clums .one ul._active li dl dd.data-34:before, .site-video .chart-clums .one ul._active li dl dd.data-34:before, .site-web .chart-clums .one ul._active li dl dd.data-34:before {
  width: calc((100% - 60px)/ 100 * 34);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-35:before, .site-illust .chart-clums .one ul._active li dl dd.data-35:before, .site-service .chart-clums .one ul._active li dl dd.data-35:before, .site-video .chart-clums .one ul._active li dl dd.data-35:before, .site-web .chart-clums .one ul._active li dl dd.data-35:before {
  width: calc((100% - 60px)/ 100 * 35);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-36:before, .site-illust .chart-clums .one ul._active li dl dd.data-36:before, .site-service .chart-clums .one ul._active li dl dd.data-36:before, .site-video .chart-clums .one ul._active li dl dd.data-36:before, .site-web .chart-clums .one ul._active li dl dd.data-36:before {
  width: calc((100% - 60px)/ 100 * 36);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-37:before, .site-illust .chart-clums .one ul._active li dl dd.data-37:before, .site-service .chart-clums .one ul._active li dl dd.data-37:before, .site-video .chart-clums .one ul._active li dl dd.data-37:before, .site-web .chart-clums .one ul._active li dl dd.data-37:before {
  width: calc((100% - 60px)/ 100 * 37);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-38:before, .site-illust .chart-clums .one ul._active li dl dd.data-38:before, .site-service .chart-clums .one ul._active li dl dd.data-38:before, .site-video .chart-clums .one ul._active li dl dd.data-38:before, .site-web .chart-clums .one ul._active li dl dd.data-38:before {
  width: calc((100% - 60px)/ 100 * 38);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-39:before, .site-illust .chart-clums .one ul._active li dl dd.data-39:before, .site-service .chart-clums .one ul._active li dl dd.data-39:before, .site-video .chart-clums .one ul._active li dl dd.data-39:before, .site-web .chart-clums .one ul._active li dl dd.data-39:before {
  width: calc((100% - 60px)/ 100 * 39);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-40:before, .site-illust .chart-clums .one ul._active li dl dd.data-40:before, .site-service .chart-clums .one ul._active li dl dd.data-40:before, .site-video .chart-clums .one ul._active li dl dd.data-40:before, .site-web .chart-clums .one ul._active li dl dd.data-40:before {
  width: calc((100% - 60px)/ 100 * 40);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-41:before, .site-illust .chart-clums .one ul._active li dl dd.data-41:before, .site-service .chart-clums .one ul._active li dl dd.data-41:before, .site-video .chart-clums .one ul._active li dl dd.data-41:before, .site-web .chart-clums .one ul._active li dl dd.data-41:before {
  width: calc((100% - 60px)/ 100 * 41);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-42:before, .site-illust .chart-clums .one ul._active li dl dd.data-42:before, .site-service .chart-clums .one ul._active li dl dd.data-42:before, .site-video .chart-clums .one ul._active li dl dd.data-42:before, .site-web .chart-clums .one ul._active li dl dd.data-42:before {
  width: calc((100% - 60px)/ 100 * 42);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-43:before, .site-illust .chart-clums .one ul._active li dl dd.data-43:before, .site-service .chart-clums .one ul._active li dl dd.data-43:before, .site-video .chart-clums .one ul._active li dl dd.data-43:before, .site-web .chart-clums .one ul._active li dl dd.data-43:before {
  width: calc((100% - 60px)/ 100 * 43);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-44:before, .site-illust .chart-clums .one ul._active li dl dd.data-44:before, .site-service .chart-clums .one ul._active li dl dd.data-44:before, .site-video .chart-clums .one ul._active li dl dd.data-44:before, .site-web .chart-clums .one ul._active li dl dd.data-44:before {
  width: calc((100% - 60px)/ 100 * 44);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-45:before, .site-illust .chart-clums .one ul._active li dl dd.data-45:before, .site-service .chart-clums .one ul._active li dl dd.data-45:before, .site-video .chart-clums .one ul._active li dl dd.data-45:before, .site-web .chart-clums .one ul._active li dl dd.data-45:before {
  width: calc((100% - 60px)/ 100 * 45);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-46:before, .site-illust .chart-clums .one ul._active li dl dd.data-46:before, .site-service .chart-clums .one ul._active li dl dd.data-46:before, .site-video .chart-clums .one ul._active li dl dd.data-46:before, .site-web .chart-clums .one ul._active li dl dd.data-46:before {
  width: calc((100% - 60px)/ 100 * 46);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-47:before, .site-illust .chart-clums .one ul._active li dl dd.data-47:before, .site-service .chart-clums .one ul._active li dl dd.data-47:before, .site-video .chart-clums .one ul._active li dl dd.data-47:before, .site-web .chart-clums .one ul._active li dl dd.data-47:before {
  width: calc((100% - 60px)/ 100 * 47);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-48:before, .site-illust .chart-clums .one ul._active li dl dd.data-48:before, .site-service .chart-clums .one ul._active li dl dd.data-48:before, .site-video .chart-clums .one ul._active li dl dd.data-48:before, .site-web .chart-clums .one ul._active li dl dd.data-48:before {
  width: calc((100% - 60px)/ 100 * 48);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-49:before, .site-illust .chart-clums .one ul._active li dl dd.data-49:before, .site-service .chart-clums .one ul._active li dl dd.data-49:before, .site-video .chart-clums .one ul._active li dl dd.data-49:before, .site-web .chart-clums .one ul._active li dl dd.data-49:before {
  width: calc((100% - 60px)/ 100 * 49);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-50:before, .site-illust .chart-clums .one ul._active li dl dd.data-50:before, .site-service .chart-clums .one ul._active li dl dd.data-50:before, .site-video .chart-clums .one ul._active li dl dd.data-50:before, .site-web .chart-clums .one ul._active li dl dd.data-50:before {
  width: calc((100% - 60px)/ 100 * 50);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-51:before, .site-illust .chart-clums .one ul._active li dl dd.data-51:before, .site-service .chart-clums .one ul._active li dl dd.data-51:before, .site-video .chart-clums .one ul._active li dl dd.data-51:before, .site-web .chart-clums .one ul._active li dl dd.data-51:before {
  width: calc((100% - 60px)/ 100 * 51);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-52:before, .site-illust .chart-clums .one ul._active li dl dd.data-52:before, .site-service .chart-clums .one ul._active li dl dd.data-52:before, .site-video .chart-clums .one ul._active li dl dd.data-52:before, .site-web .chart-clums .one ul._active li dl dd.data-52:before {
  width: calc((100% - 60px)/ 100 * 52);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-53:before, .site-illust .chart-clums .one ul._active li dl dd.data-53:before, .site-service .chart-clums .one ul._active li dl dd.data-53:before, .site-video .chart-clums .one ul._active li dl dd.data-53:before, .site-web .chart-clums .one ul._active li dl dd.data-53:before {
  width: calc((100% - 60px)/ 100 * 53);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-54:before, .site-illust .chart-clums .one ul._active li dl dd.data-54:before, .site-service .chart-clums .one ul._active li dl dd.data-54:before, .site-video .chart-clums .one ul._active li dl dd.data-54:before, .site-web .chart-clums .one ul._active li dl dd.data-54:before {
  width: calc((100% - 60px)/ 100 * 54);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-55:before, .site-illust .chart-clums .one ul._active li dl dd.data-55:before, .site-service .chart-clums .one ul._active li dl dd.data-55:before, .site-video .chart-clums .one ul._active li dl dd.data-55:before, .site-web .chart-clums .one ul._active li dl dd.data-55:before {
  width: calc((100% - 60px)/ 100 * 55);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-56:before, .site-illust .chart-clums .one ul._active li dl dd.data-56:before, .site-service .chart-clums .one ul._active li dl dd.data-56:before, .site-video .chart-clums .one ul._active li dl dd.data-56:before, .site-web .chart-clums .one ul._active li dl dd.data-56:before {
  width: calc((100% - 60px)/ 100 * 56);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-57:before, .site-illust .chart-clums .one ul._active li dl dd.data-57:before, .site-service .chart-clums .one ul._active li dl dd.data-57:before, .site-video .chart-clums .one ul._active li dl dd.data-57:before, .site-web .chart-clums .one ul._active li dl dd.data-57:before {
  width: calc((100% - 60px)/ 100 * 57);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-58:before, .site-illust .chart-clums .one ul._active li dl dd.data-58:before, .site-service .chart-clums .one ul._active li dl dd.data-58:before, .site-video .chart-clums .one ul._active li dl dd.data-58:before, .site-web .chart-clums .one ul._active li dl dd.data-58:before {
  width: calc((100% - 60px)/ 100 * 58);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-59:before, .site-illust .chart-clums .one ul._active li dl dd.data-59:before, .site-service .chart-clums .one ul._active li dl dd.data-59:before, .site-video .chart-clums .one ul._active li dl dd.data-59:before, .site-web .chart-clums .one ul._active li dl dd.data-59:before {
  width: calc((100% - 60px)/ 100 * 59);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-60:before, .site-illust .chart-clums .one ul._active li dl dd.data-60:before, .site-service .chart-clums .one ul._active li dl dd.data-60:before, .site-video .chart-clums .one ul._active li dl dd.data-60:before, .site-web .chart-clums .one ul._active li dl dd.data-60:before {
  width: calc((100% - 60px)/ 100 * 60);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-61:before, .site-illust .chart-clums .one ul._active li dl dd.data-61:before, .site-service .chart-clums .one ul._active li dl dd.data-61:before, .site-video .chart-clums .one ul._active li dl dd.data-61:before, .site-web .chart-clums .one ul._active li dl dd.data-61:before {
  width: calc((100% - 60px)/ 100 * 61);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-62:before, .site-illust .chart-clums .one ul._active li dl dd.data-62:before, .site-service .chart-clums .one ul._active li dl dd.data-62:before, .site-video .chart-clums .one ul._active li dl dd.data-62:before, .site-web .chart-clums .one ul._active li dl dd.data-62:before {
  width: calc((100% - 60px)/ 100 * 62);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-63:before, .site-illust .chart-clums .one ul._active li dl dd.data-63:before, .site-service .chart-clums .one ul._active li dl dd.data-63:before, .site-video .chart-clums .one ul._active li dl dd.data-63:before, .site-web .chart-clums .one ul._active li dl dd.data-63:before {
  width: calc((100% - 60px)/ 100 * 63);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-64:before, .site-illust .chart-clums .one ul._active li dl dd.data-64:before, .site-service .chart-clums .one ul._active li dl dd.data-64:before, .site-video .chart-clums .one ul._active li dl dd.data-64:before, .site-web .chart-clums .one ul._active li dl dd.data-64:before {
  width: calc((100% - 60px)/ 100 * 64);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-65:before, .site-illust .chart-clums .one ul._active li dl dd.data-65:before, .site-service .chart-clums .one ul._active li dl dd.data-65:before, .site-video .chart-clums .one ul._active li dl dd.data-65:before, .site-web .chart-clums .one ul._active li dl dd.data-65:before {
  width: calc((100% - 60px)/ 100 * 65);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-66:before, .site-illust .chart-clums .one ul._active li dl dd.data-66:before, .site-service .chart-clums .one ul._active li dl dd.data-66:before, .site-video .chart-clums .one ul._active li dl dd.data-66:before, .site-web .chart-clums .one ul._active li dl dd.data-66:before {
  width: calc((100% - 60px)/ 100 * 66);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-67:before, .site-illust .chart-clums .one ul._active li dl dd.data-67:before, .site-service .chart-clums .one ul._active li dl dd.data-67:before, .site-video .chart-clums .one ul._active li dl dd.data-67:before, .site-web .chart-clums .one ul._active li dl dd.data-67:before {
  width: calc((100% - 60px)/ 100 * 67);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-68:before, .site-illust .chart-clums .one ul._active li dl dd.data-68:before, .site-service .chart-clums .one ul._active li dl dd.data-68:before, .site-video .chart-clums .one ul._active li dl dd.data-68:before, .site-web .chart-clums .one ul._active li dl dd.data-68:before {
  width: calc((100% - 60px)/ 100 * 68);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-69:before, .site-illust .chart-clums .one ul._active li dl dd.data-69:before, .site-service .chart-clums .one ul._active li dl dd.data-69:before, .site-video .chart-clums .one ul._active li dl dd.data-69:before, .site-web .chart-clums .one ul._active li dl dd.data-69:before {
  width: calc((100% - 60px)/ 100 * 69);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-70:before, .site-illust .chart-clums .one ul._active li dl dd.data-70:before, .site-service .chart-clums .one ul._active li dl dd.data-70:before, .site-video .chart-clums .one ul._active li dl dd.data-70:before, .site-web .chart-clums .one ul._active li dl dd.data-70:before {
  width: calc((100% - 60px)/ 100 * 70);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-71:before, .site-illust .chart-clums .one ul._active li dl dd.data-71:before, .site-service .chart-clums .one ul._active li dl dd.data-71:before, .site-video .chart-clums .one ul._active li dl dd.data-71:before, .site-web .chart-clums .one ul._active li dl dd.data-71:before {
  width: calc((100% - 60px)/ 100 * 71);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-72:before, .site-illust .chart-clums .one ul._active li dl dd.data-72:before, .site-service .chart-clums .one ul._active li dl dd.data-72:before, .site-video .chart-clums .one ul._active li dl dd.data-72:before, .site-web .chart-clums .one ul._active li dl dd.data-72:before {
  width: calc((100% - 60px)/ 100 * 72);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-73:before, .site-illust .chart-clums .one ul._active li dl dd.data-73:before, .site-service .chart-clums .one ul._active li dl dd.data-73:before, .site-video .chart-clums .one ul._active li dl dd.data-73:before, .site-web .chart-clums .one ul._active li dl dd.data-73:before {
  width: calc((100% - 60px)/ 100 * 73);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-74:before, .site-illust .chart-clums .one ul._active li dl dd.data-74:before, .site-service .chart-clums .one ul._active li dl dd.data-74:before, .site-video .chart-clums .one ul._active li dl dd.data-74:before, .site-web .chart-clums .one ul._active li dl dd.data-74:before {
  width: calc((100% - 60px)/ 100 * 74);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-75:before, .site-illust .chart-clums .one ul._active li dl dd.data-75:before, .site-service .chart-clums .one ul._active li dl dd.data-75:before, .site-video .chart-clums .one ul._active li dl dd.data-75:before, .site-web .chart-clums .one ul._active li dl dd.data-75:before {
  width: calc((100% - 60px)/ 100 * 75);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-76:before, .site-illust .chart-clums .one ul._active li dl dd.data-76:before, .site-service .chart-clums .one ul._active li dl dd.data-76:before, .site-video .chart-clums .one ul._active li dl dd.data-76:before, .site-web .chart-clums .one ul._active li dl dd.data-76:before {
  width: calc((100% - 60px)/ 100 * 76);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-77:before, .site-illust .chart-clums .one ul._active li dl dd.data-77:before, .site-service .chart-clums .one ul._active li dl dd.data-77:before, .site-video .chart-clums .one ul._active li dl dd.data-77:before, .site-web .chart-clums .one ul._active li dl dd.data-77:before {
  width: calc((100% - 60px)/ 100 * 77);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-78:before, .site-illust .chart-clums .one ul._active li dl dd.data-78:before, .site-service .chart-clums .one ul._active li dl dd.data-78:before, .site-video .chart-clums .one ul._active li dl dd.data-78:before, .site-web .chart-clums .one ul._active li dl dd.data-78:before {
  width: calc((100% - 60px)/ 100 * 78);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-79:before, .site-illust .chart-clums .one ul._active li dl dd.data-79:before, .site-service .chart-clums .one ul._active li dl dd.data-79:before, .site-video .chart-clums .one ul._active li dl dd.data-79:before, .site-web .chart-clums .one ul._active li dl dd.data-79:before {
  width: calc((100% - 60px)/ 100 * 79);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-80:before, .site-illust .chart-clums .one ul._active li dl dd.data-80:before, .site-service .chart-clums .one ul._active li dl dd.data-80:before, .site-video .chart-clums .one ul._active li dl dd.data-80:before, .site-web .chart-clums .one ul._active li dl dd.data-80:before {
  width: calc((100% - 60px)/ 100 * 80);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-81:before, .site-illust .chart-clums .one ul._active li dl dd.data-81:before, .site-service .chart-clums .one ul._active li dl dd.data-81:before, .site-video .chart-clums .one ul._active li dl dd.data-81:before, .site-web .chart-clums .one ul._active li dl dd.data-81:before {
  width: calc((100% - 60px)/ 100 * 81);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-82:before, .site-illust .chart-clums .one ul._active li dl dd.data-82:before, .site-service .chart-clums .one ul._active li dl dd.data-82:before, .site-video .chart-clums .one ul._active li dl dd.data-82:before, .site-web .chart-clums .one ul._active li dl dd.data-82:before {
  width: calc((100% - 60px)/ 100 * 82);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-83:before, .site-illust .chart-clums .one ul._active li dl dd.data-83:before, .site-service .chart-clums .one ul._active li dl dd.data-83:before, .site-video .chart-clums .one ul._active li dl dd.data-83:before, .site-web .chart-clums .one ul._active li dl dd.data-83:before {
  width: calc((100% - 60px)/ 100 * 83);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-84:before, .site-illust .chart-clums .one ul._active li dl dd.data-84:before, .site-service .chart-clums .one ul._active li dl dd.data-84:before, .site-video .chart-clums .one ul._active li dl dd.data-84:before, .site-web .chart-clums .one ul._active li dl dd.data-84:before {
  width: calc((100% - 60px)/ 100 * 84);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-85:before, .site-illust .chart-clums .one ul._active li dl dd.data-85:before, .site-service .chart-clums .one ul._active li dl dd.data-85:before, .site-video .chart-clums .one ul._active li dl dd.data-85:before, .site-web .chart-clums .one ul._active li dl dd.data-85:before {
  width: calc((100% - 60px)/ 100 * 85);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-86:before, .site-illust .chart-clums .one ul._active li dl dd.data-86:before, .site-service .chart-clums .one ul._active li dl dd.data-86:before, .site-video .chart-clums .one ul._active li dl dd.data-86:before, .site-web .chart-clums .one ul._active li dl dd.data-86:before {
  width: calc((100% - 60px)/ 100 * 86);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-87:before, .site-illust .chart-clums .one ul._active li dl dd.data-87:before, .site-service .chart-clums .one ul._active li dl dd.data-87:before, .site-video .chart-clums .one ul._active li dl dd.data-87:before, .site-web .chart-clums .one ul._active li dl dd.data-87:before {
  width: calc((100% - 60px)/ 100 * 87);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-88:before, .site-illust .chart-clums .one ul._active li dl dd.data-88:before, .site-service .chart-clums .one ul._active li dl dd.data-88:before, .site-video .chart-clums .one ul._active li dl dd.data-88:before, .site-web .chart-clums .one ul._active li dl dd.data-88:before {
  width: calc((100% - 60px)/ 100 * 88);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-89:before, .site-illust .chart-clums .one ul._active li dl dd.data-89:before, .site-service .chart-clums .one ul._active li dl dd.data-89:before, .site-video .chart-clums .one ul._active li dl dd.data-89:before, .site-web .chart-clums .one ul._active li dl dd.data-89:before {
  width: calc((100% - 60px)/ 100 * 89);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-90:before, .site-illust .chart-clums .one ul._active li dl dd.data-90:before, .site-service .chart-clums .one ul._active li dl dd.data-90:before, .site-video .chart-clums .one ul._active li dl dd.data-90:before, .site-web .chart-clums .one ul._active li dl dd.data-90:before {
  width: calc((100% - 60px)/ 100 * 90);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-91:before, .site-illust .chart-clums .one ul._active li dl dd.data-91:before, .site-service .chart-clums .one ul._active li dl dd.data-91:before, .site-video .chart-clums .one ul._active li dl dd.data-91:before, .site-web .chart-clums .one ul._active li dl dd.data-91:before {
  width: calc((100% - 60px)/ 100 * 91);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-92:before, .site-illust .chart-clums .one ul._active li dl dd.data-92:before, .site-service .chart-clums .one ul._active li dl dd.data-92:before, .site-video .chart-clums .one ul._active li dl dd.data-92:before, .site-web .chart-clums .one ul._active li dl dd.data-92:before {
  width: calc((100% - 60px)/ 100 * 92);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-93:before, .site-illust .chart-clums .one ul._active li dl dd.data-93:before, .site-service .chart-clums .one ul._active li dl dd.data-93:before, .site-video .chart-clums .one ul._active li dl dd.data-93:before, .site-web .chart-clums .one ul._active li dl dd.data-93:before {
  width: calc((100% - 60px)/ 100 * 93);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-94:before, .site-illust .chart-clums .one ul._active li dl dd.data-94:before, .site-service .chart-clums .one ul._active li dl dd.data-94:before, .site-video .chart-clums .one ul._active li dl dd.data-94:before, .site-web .chart-clums .one ul._active li dl dd.data-94:before {
  width: calc((100% - 60px)/ 100 * 94);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-95:before, .site-illust .chart-clums .one ul._active li dl dd.data-95:before, .site-service .chart-clums .one ul._active li dl dd.data-95:before, .site-video .chart-clums .one ul._active li dl dd.data-95:before, .site-web .chart-clums .one ul._active li dl dd.data-95:before {
  width: calc((100% - 60px)/ 100 * 95);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-96:before, .site-illust .chart-clums .one ul._active li dl dd.data-96:before, .site-service .chart-clums .one ul._active li dl dd.data-96:before, .site-video .chart-clums .one ul._active li dl dd.data-96:before, .site-web .chart-clums .one ul._active li dl dd.data-96:before {
  width: calc((100% - 60px)/ 100 * 96);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-97:before, .site-illust .chart-clums .one ul._active li dl dd.data-97:before, .site-service .chart-clums .one ul._active li dl dd.data-97:before, .site-video .chart-clums .one ul._active li dl dd.data-97:before, .site-web .chart-clums .one ul._active li dl dd.data-97:before {
  width: calc((100% - 60px)/ 100 * 97);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-98:before, .site-illust .chart-clums .one ul._active li dl dd.data-98:before, .site-service .chart-clums .one ul._active li dl dd.data-98:before, .site-video .chart-clums .one ul._active li dl dd.data-98:before, .site-web .chart-clums .one ul._active li dl dd.data-98:before {
  width: calc((100% - 60px)/ 100 * 98);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-99:before, .site-illust .chart-clums .one ul._active li dl dd.data-99:before, .site-service .chart-clums .one ul._active li dl dd.data-99:before, .site-video .chart-clums .one ul._active li dl dd.data-99:before, .site-web .chart-clums .one ul._active li dl dd.data-99:before {
  width: calc((100% - 60px)/ 100 * 99);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul._active li dl dd.data-100:before, .site-illust .chart-clums .one ul._active li dl dd.data-100:before, .site-service .chart-clums .one ul._active li dl dd.data-100:before, .site-video .chart-clums .one ul._active li dl dd.data-100:before, .site-web .chart-clums .one ul._active li dl dd.data-100:before {
  width: calc((100% - 60px)/ 100 * 100);
  transition: all .8s .4s cubic-bezier(.86, 0, .07, 1)
}

.site-dtp .chart-clums .one ul li, .site-illust .chart-clums .one ul li, .site-service .chart-clums .one ul li, .site-video .chart-clums .one ul li, .site-web .chart-clums .one ul li {
  margin: 16px 0 0
}

.site-dtp .chart-clums .one ul li dl, .site-illust .chart-clums .one ul li dl, .site-service .chart-clums .one ul li dl, .site-video .chart-clums .one ul li dl, .site-web .chart-clums .one ul li dl {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  font-size: 15px
}

@media screen and (max-width:768px) {
  .site-dtp .chart-clums .one ul li dl, .site-illust .chart-clums .one ul li dl, .site-service .chart-clums .one ul li dl, .site-video .chart-clums .one ul li dl, .site-web .chart-clums .one ul li dl {
    font-size: 13px
  }
}

.site-dtp .chart-clums .one ul li dl dt, .site-illust .chart-clums .one ul li dl dt, .site-service .chart-clums .one ul li dl dt, .site-video .chart-clums .one ul li dl dt, .site-web .chart-clums .one ul li dl dt {
  width: 30%;
  font-weight: 700
}

@media screen and (max-width:768px) {
  .site-dtp .chart-clums .one ul li dl dt, .site-illust .chart-clums .one ul li dl dt, .site-service .chart-clums .one ul li dl dt, .site-video .chart-clums .one ul li dl dt, .site-web .chart-clums .one ul li dl dt {
    width: 40%
  }
}

.site-dtp .chart-clums .one ul li dl dd, .site-illust .chart-clums .one ul li dl dd, .site-service .chart-clums .one ul li dl dd, .site-video .chart-clums .one ul li dl dd, .site-web .chart-clums .one ul li dl dd {
  width: 70%;
  position: relative
}

@media screen and (max-width:768px) {
  .site-dtp .chart-clums .one ul li dl dd, .site-illust .chart-clums .one ul li dl dd, .site-service .chart-clums .one ul li dl dd, .site-video .chart-clums .one ul li dl dd, .site-web .chart-clums .one ul li dl dd {
    width: 60%
  }
}

.site-dtp .chart-clums .one ul li dl dd i, .site-illust .chart-clums .one ul li dl dd i, .site-service .chart-clums .one ul li dl dd i, .site-video .chart-clums .one ul li dl dd i, .site-web .chart-clums .one ul li dl dd i {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  font-weight: 700
}

.site-dtp .chart-clums .one ul li dl dd.data-1, .site-illust .chart-clums .one ul li dl dd.data-1, .site-service .chart-clums .one ul li dl dd.data-1, .site-video .chart-clums .one ul li dl dd.data-1, .site-web .chart-clums .one ul li dl dd.data-1 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-1 i, .site-illust .chart-clums .one ul li dl dd.data-1 i, .site-service .chart-clums .one ul li dl dd.data-1 i, .site-video .chart-clums .one ul li dl dd.data-1 i, .site-web .chart-clums .one ul li dl dd.data-1 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-1:after, .site-dtp .chart-clums .one ul li dl dd.data-1:before, .site-illust .chart-clums .one ul li dl dd.data-1:after, .site-illust .chart-clums .one ul li dl dd.data-1:before, .site-service .chart-clums .one ul li dl dd.data-1:after, .site-service .chart-clums .one ul li dl dd.data-1:before, .site-video .chart-clums .one ul li dl dd.data-1:after, .site-video .chart-clums .one ul li dl dd.data-1:before, .site-web .chart-clums .one ul li dl dd.data-1:after, .site-web .chart-clums .one ul li dl dd.data-1:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-1:after, .site-illust .chart-clums .one ul li dl dd.data-1:after, .site-service .chart-clums .one ul li dl dd.data-1:after, .site-video .chart-clums .one ul li dl dd.data-1:after, .site-web .chart-clums .one ul li dl dd.data-1:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-2, .site-illust .chart-clums .one ul li dl dd.data-2, .site-service .chart-clums .one ul li dl dd.data-2, .site-video .chart-clums .one ul li dl dd.data-2, .site-web .chart-clums .one ul li dl dd.data-2 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-2 i, .site-illust .chart-clums .one ul li dl dd.data-2 i, .site-service .chart-clums .one ul li dl dd.data-2 i, .site-video .chart-clums .one ul li dl dd.data-2 i, .site-web .chart-clums .one ul li dl dd.data-2 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-2:after, .site-dtp .chart-clums .one ul li dl dd.data-2:before, .site-illust .chart-clums .one ul li dl dd.data-2:after, .site-illust .chart-clums .one ul li dl dd.data-2:before, .site-service .chart-clums .one ul li dl dd.data-2:after, .site-service .chart-clums .one ul li dl dd.data-2:before, .site-video .chart-clums .one ul li dl dd.data-2:after, .site-video .chart-clums .one ul li dl dd.data-2:before, .site-web .chart-clums .one ul li dl dd.data-2:after, .site-web .chart-clums .one ul li dl dd.data-2:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-2:after, .site-illust .chart-clums .one ul li dl dd.data-2:after, .site-service .chart-clums .one ul li dl dd.data-2:after, .site-video .chart-clums .one ul li dl dd.data-2:after, .site-web .chart-clums .one ul li dl dd.data-2:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-3, .site-illust .chart-clums .one ul li dl dd.data-3, .site-service .chart-clums .one ul li dl dd.data-3, .site-video .chart-clums .one ul li dl dd.data-3, .site-web .chart-clums .one ul li dl dd.data-3 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-3 i, .site-illust .chart-clums .one ul li dl dd.data-3 i, .site-service .chart-clums .one ul li dl dd.data-3 i, .site-video .chart-clums .one ul li dl dd.data-3 i, .site-web .chart-clums .one ul li dl dd.data-3 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-3:after, .site-dtp .chart-clums .one ul li dl dd.data-3:before, .site-illust .chart-clums .one ul li dl dd.data-3:after, .site-illust .chart-clums .one ul li dl dd.data-3:before, .site-service .chart-clums .one ul li dl dd.data-3:after, .site-service .chart-clums .one ul li dl dd.data-3:before, .site-video .chart-clums .one ul li dl dd.data-3:after, .site-video .chart-clums .one ul li dl dd.data-3:before, .site-web .chart-clums .one ul li dl dd.data-3:after, .site-web .chart-clums .one ul li dl dd.data-3:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-3:after, .site-illust .chart-clums .one ul li dl dd.data-3:after, .site-service .chart-clums .one ul li dl dd.data-3:after, .site-video .chart-clums .one ul li dl dd.data-3:after, .site-web .chart-clums .one ul li dl dd.data-3:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-4, .site-illust .chart-clums .one ul li dl dd.data-4, .site-service .chart-clums .one ul li dl dd.data-4, .site-video .chart-clums .one ul li dl dd.data-4, .site-web .chart-clums .one ul li dl dd.data-4 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-4 i, .site-illust .chart-clums .one ul li dl dd.data-4 i, .site-service .chart-clums .one ul li dl dd.data-4 i, .site-video .chart-clums .one ul li dl dd.data-4 i, .site-web .chart-clums .one ul li dl dd.data-4 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-4:after, .site-dtp .chart-clums .one ul li dl dd.data-4:before, .site-illust .chart-clums .one ul li dl dd.data-4:after, .site-illust .chart-clums .one ul li dl dd.data-4:before, .site-service .chart-clums .one ul li dl dd.data-4:after, .site-service .chart-clums .one ul li dl dd.data-4:before, .site-video .chart-clums .one ul li dl dd.data-4:after, .site-video .chart-clums .one ul li dl dd.data-4:before, .site-web .chart-clums .one ul li dl dd.data-4:after, .site-web .chart-clums .one ul li dl dd.data-4:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-4:after, .site-illust .chart-clums .one ul li dl dd.data-4:after, .site-service .chart-clums .one ul li dl dd.data-4:after, .site-video .chart-clums .one ul li dl dd.data-4:after, .site-web .chart-clums .one ul li dl dd.data-4:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-5, .site-illust .chart-clums .one ul li dl dd.data-5, .site-service .chart-clums .one ul li dl dd.data-5, .site-video .chart-clums .one ul li dl dd.data-5, .site-web .chart-clums .one ul li dl dd.data-5 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-5 i, .site-illust .chart-clums .one ul li dl dd.data-5 i, .site-service .chart-clums .one ul li dl dd.data-5 i, .site-video .chart-clums .one ul li dl dd.data-5 i, .site-web .chart-clums .one ul li dl dd.data-5 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-5:after, .site-dtp .chart-clums .one ul li dl dd.data-5:before, .site-illust .chart-clums .one ul li dl dd.data-5:after, .site-illust .chart-clums .one ul li dl dd.data-5:before, .site-service .chart-clums .one ul li dl dd.data-5:after, .site-service .chart-clums .one ul li dl dd.data-5:before, .site-video .chart-clums .one ul li dl dd.data-5:after, .site-video .chart-clums .one ul li dl dd.data-5:before, .site-web .chart-clums .one ul li dl dd.data-5:after, .site-web .chart-clums .one ul li dl dd.data-5:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-5:after, .site-illust .chart-clums .one ul li dl dd.data-5:after, .site-service .chart-clums .one ul li dl dd.data-5:after, .site-video .chart-clums .one ul li dl dd.data-5:after, .site-web .chart-clums .one ul li dl dd.data-5:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-6, .site-illust .chart-clums .one ul li dl dd.data-6, .site-service .chart-clums .one ul li dl dd.data-6, .site-video .chart-clums .one ul li dl dd.data-6, .site-web .chart-clums .one ul li dl dd.data-6 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-6 i, .site-illust .chart-clums .one ul li dl dd.data-6 i, .site-service .chart-clums .one ul li dl dd.data-6 i, .site-video .chart-clums .one ul li dl dd.data-6 i, .site-web .chart-clums .one ul li dl dd.data-6 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-6:after, .site-dtp .chart-clums .one ul li dl dd.data-6:before, .site-illust .chart-clums .one ul li dl dd.data-6:after, .site-illust .chart-clums .one ul li dl dd.data-6:before, .site-service .chart-clums .one ul li dl dd.data-6:after, .site-service .chart-clums .one ul li dl dd.data-6:before, .site-video .chart-clums .one ul li dl dd.data-6:after, .site-video .chart-clums .one ul li dl dd.data-6:before, .site-web .chart-clums .one ul li dl dd.data-6:after, .site-web .chart-clums .one ul li dl dd.data-6:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-6:after, .site-illust .chart-clums .one ul li dl dd.data-6:after, .site-service .chart-clums .one ul li dl dd.data-6:after, .site-video .chart-clums .one ul li dl dd.data-6:after, .site-web .chart-clums .one ul li dl dd.data-6:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-7, .site-illust .chart-clums .one ul li dl dd.data-7, .site-service .chart-clums .one ul li dl dd.data-7, .site-video .chart-clums .one ul li dl dd.data-7, .site-web .chart-clums .one ul li dl dd.data-7 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-7 i, .site-illust .chart-clums .one ul li dl dd.data-7 i, .site-service .chart-clums .one ul li dl dd.data-7 i, .site-video .chart-clums .one ul li dl dd.data-7 i, .site-web .chart-clums .one ul li dl dd.data-7 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-7:after, .site-dtp .chart-clums .one ul li dl dd.data-7:before, .site-illust .chart-clums .one ul li dl dd.data-7:after, .site-illust .chart-clums .one ul li dl dd.data-7:before, .site-service .chart-clums .one ul li dl dd.data-7:after, .site-service .chart-clums .one ul li dl dd.data-7:before, .site-video .chart-clums .one ul li dl dd.data-7:after, .site-video .chart-clums .one ul li dl dd.data-7:before, .site-web .chart-clums .one ul li dl dd.data-7:after, .site-web .chart-clums .one ul li dl dd.data-7:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-7:after, .site-illust .chart-clums .one ul li dl dd.data-7:after, .site-service .chart-clums .one ul li dl dd.data-7:after, .site-video .chart-clums .one ul li dl dd.data-7:after, .site-web .chart-clums .one ul li dl dd.data-7:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-8, .site-illust .chart-clums .one ul li dl dd.data-8, .site-service .chart-clums .one ul li dl dd.data-8, .site-video .chart-clums .one ul li dl dd.data-8, .site-web .chart-clums .one ul li dl dd.data-8 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-8 i, .site-illust .chart-clums .one ul li dl dd.data-8 i, .site-service .chart-clums .one ul li dl dd.data-8 i, .site-video .chart-clums .one ul li dl dd.data-8 i, .site-web .chart-clums .one ul li dl dd.data-8 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-8:after, .site-dtp .chart-clums .one ul li dl dd.data-8:before, .site-illust .chart-clums .one ul li dl dd.data-8:after, .site-illust .chart-clums .one ul li dl dd.data-8:before, .site-service .chart-clums .one ul li dl dd.data-8:after, .site-service .chart-clums .one ul li dl dd.data-8:before, .site-video .chart-clums .one ul li dl dd.data-8:after, .site-video .chart-clums .one ul li dl dd.data-8:before, .site-web .chart-clums .one ul li dl dd.data-8:after, .site-web .chart-clums .one ul li dl dd.data-8:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-8:after, .site-illust .chart-clums .one ul li dl dd.data-8:after, .site-service .chart-clums .one ul li dl dd.data-8:after, .site-video .chart-clums .one ul li dl dd.data-8:after, .site-web .chart-clums .one ul li dl dd.data-8:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-9, .site-illust .chart-clums .one ul li dl dd.data-9, .site-service .chart-clums .one ul li dl dd.data-9, .site-video .chart-clums .one ul li dl dd.data-9, .site-web .chart-clums .one ul li dl dd.data-9 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-9 i, .site-illust .chart-clums .one ul li dl dd.data-9 i, .site-service .chart-clums .one ul li dl dd.data-9 i, .site-video .chart-clums .one ul li dl dd.data-9 i, .site-web .chart-clums .one ul li dl dd.data-9 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-9:after, .site-dtp .chart-clums .one ul li dl dd.data-9:before, .site-illust .chart-clums .one ul li dl dd.data-9:after, .site-illust .chart-clums .one ul li dl dd.data-9:before, .site-service .chart-clums .one ul li dl dd.data-9:after, .site-service .chart-clums .one ul li dl dd.data-9:before, .site-video .chart-clums .one ul li dl dd.data-9:after, .site-video .chart-clums .one ul li dl dd.data-9:before, .site-web .chart-clums .one ul li dl dd.data-9:after, .site-web .chart-clums .one ul li dl dd.data-9:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-9:after, .site-illust .chart-clums .one ul li dl dd.data-9:after, .site-service .chart-clums .one ul li dl dd.data-9:after, .site-video .chart-clums .one ul li dl dd.data-9:after, .site-web .chart-clums .one ul li dl dd.data-9:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-10, .site-illust .chart-clums .one ul li dl dd.data-10, .site-service .chart-clums .one ul li dl dd.data-10, .site-video .chart-clums .one ul li dl dd.data-10, .site-web .chart-clums .one ul li dl dd.data-10 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-10 i, .site-illust .chart-clums .one ul li dl dd.data-10 i, .site-service .chart-clums .one ul li dl dd.data-10 i, .site-video .chart-clums .one ul li dl dd.data-10 i, .site-web .chart-clums .one ul li dl dd.data-10 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-10:after, .site-dtp .chart-clums .one ul li dl dd.data-10:before, .site-illust .chart-clums .one ul li dl dd.data-10:after, .site-illust .chart-clums .one ul li dl dd.data-10:before, .site-service .chart-clums .one ul li dl dd.data-10:after, .site-service .chart-clums .one ul li dl dd.data-10:before, .site-video .chart-clums .one ul li dl dd.data-10:after, .site-video .chart-clums .one ul li dl dd.data-10:before, .site-web .chart-clums .one ul li dl dd.data-10:after, .site-web .chart-clums .one ul li dl dd.data-10:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-10:after, .site-illust .chart-clums .one ul li dl dd.data-10:after, .site-service .chart-clums .one ul li dl dd.data-10:after, .site-video .chart-clums .one ul li dl dd.data-10:after, .site-web .chart-clums .one ul li dl dd.data-10:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-11, .site-illust .chart-clums .one ul li dl dd.data-11, .site-service .chart-clums .one ul li dl dd.data-11, .site-video .chart-clums .one ul li dl dd.data-11, .site-web .chart-clums .one ul li dl dd.data-11 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-11 i, .site-illust .chart-clums .one ul li dl dd.data-11 i, .site-service .chart-clums .one ul li dl dd.data-11 i, .site-video .chart-clums .one ul li dl dd.data-11 i, .site-web .chart-clums .one ul li dl dd.data-11 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-11:after, .site-dtp .chart-clums .one ul li dl dd.data-11:before, .site-illust .chart-clums .one ul li dl dd.data-11:after, .site-illust .chart-clums .one ul li dl dd.data-11:before, .site-service .chart-clums .one ul li dl dd.data-11:after, .site-service .chart-clums .one ul li dl dd.data-11:before, .site-video .chart-clums .one ul li dl dd.data-11:after, .site-video .chart-clums .one ul li dl dd.data-11:before, .site-web .chart-clums .one ul li dl dd.data-11:after, .site-web .chart-clums .one ul li dl dd.data-11:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-11:after, .site-illust .chart-clums .one ul li dl dd.data-11:after, .site-service .chart-clums .one ul li dl dd.data-11:after, .site-video .chart-clums .one ul li dl dd.data-11:after, .site-web .chart-clums .one ul li dl dd.data-11:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-12, .site-illust .chart-clums .one ul li dl dd.data-12, .site-service .chart-clums .one ul li dl dd.data-12, .site-video .chart-clums .one ul li dl dd.data-12, .site-web .chart-clums .one ul li dl dd.data-12 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-12 i, .site-illust .chart-clums .one ul li dl dd.data-12 i, .site-service .chart-clums .one ul li dl dd.data-12 i, .site-video .chart-clums .one ul li dl dd.data-12 i, .site-web .chart-clums .one ul li dl dd.data-12 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-12:after, .site-dtp .chart-clums .one ul li dl dd.data-12:before, .site-illust .chart-clums .one ul li dl dd.data-12:after, .site-illust .chart-clums .one ul li dl dd.data-12:before, .site-service .chart-clums .one ul li dl dd.data-12:after, .site-service .chart-clums .one ul li dl dd.data-12:before, .site-video .chart-clums .one ul li dl dd.data-12:after, .site-video .chart-clums .one ul li dl dd.data-12:before, .site-web .chart-clums .one ul li dl dd.data-12:after, .site-web .chart-clums .one ul li dl dd.data-12:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-12:after, .site-illust .chart-clums .one ul li dl dd.data-12:after, .site-service .chart-clums .one ul li dl dd.data-12:after, .site-video .chart-clums .one ul li dl dd.data-12:after, .site-web .chart-clums .one ul li dl dd.data-12:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-13, .site-illust .chart-clums .one ul li dl dd.data-13, .site-service .chart-clums .one ul li dl dd.data-13, .site-video .chart-clums .one ul li dl dd.data-13, .site-web .chart-clums .one ul li dl dd.data-13 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-13 i, .site-illust .chart-clums .one ul li dl dd.data-13 i, .site-service .chart-clums .one ul li dl dd.data-13 i, .site-video .chart-clums .one ul li dl dd.data-13 i, .site-web .chart-clums .one ul li dl dd.data-13 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-13:after, .site-dtp .chart-clums .one ul li dl dd.data-13:before, .site-illust .chart-clums .one ul li dl dd.data-13:after, .site-illust .chart-clums .one ul li dl dd.data-13:before, .site-service .chart-clums .one ul li dl dd.data-13:after, .site-service .chart-clums .one ul li dl dd.data-13:before, .site-video .chart-clums .one ul li dl dd.data-13:after, .site-video .chart-clums .one ul li dl dd.data-13:before, .site-web .chart-clums .one ul li dl dd.data-13:after, .site-web .chart-clums .one ul li dl dd.data-13:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-13:after, .site-illust .chart-clums .one ul li dl dd.data-13:after, .site-service .chart-clums .one ul li dl dd.data-13:after, .site-video .chart-clums .one ul li dl dd.data-13:after, .site-web .chart-clums .one ul li dl dd.data-13:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-14, .site-illust .chart-clums .one ul li dl dd.data-14, .site-service .chart-clums .one ul li dl dd.data-14, .site-video .chart-clums .one ul li dl dd.data-14, .site-web .chart-clums .one ul li dl dd.data-14 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-14 i, .site-illust .chart-clums .one ul li dl dd.data-14 i, .site-service .chart-clums .one ul li dl dd.data-14 i, .site-video .chart-clums .one ul li dl dd.data-14 i, .site-web .chart-clums .one ul li dl dd.data-14 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-14:after, .site-dtp .chart-clums .one ul li dl dd.data-14:before, .site-illust .chart-clums .one ul li dl dd.data-14:after, .site-illust .chart-clums .one ul li dl dd.data-14:before, .site-service .chart-clums .one ul li dl dd.data-14:after, .site-service .chart-clums .one ul li dl dd.data-14:before, .site-video .chart-clums .one ul li dl dd.data-14:after, .site-video .chart-clums .one ul li dl dd.data-14:before, .site-web .chart-clums .one ul li dl dd.data-14:after, .site-web .chart-clums .one ul li dl dd.data-14:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-14:after, .site-illust .chart-clums .one ul li dl dd.data-14:after, .site-service .chart-clums .one ul li dl dd.data-14:after, .site-video .chart-clums .one ul li dl dd.data-14:after, .site-web .chart-clums .one ul li dl dd.data-14:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-15, .site-illust .chart-clums .one ul li dl dd.data-15, .site-service .chart-clums .one ul li dl dd.data-15, .site-video .chart-clums .one ul li dl dd.data-15, .site-web .chart-clums .one ul li dl dd.data-15 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-15 i, .site-illust .chart-clums .one ul li dl dd.data-15 i, .site-service .chart-clums .one ul li dl dd.data-15 i, .site-video .chart-clums .one ul li dl dd.data-15 i, .site-web .chart-clums .one ul li dl dd.data-15 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-15:after, .site-dtp .chart-clums .one ul li dl dd.data-15:before, .site-illust .chart-clums .one ul li dl dd.data-15:after, .site-illust .chart-clums .one ul li dl dd.data-15:before, .site-service .chart-clums .one ul li dl dd.data-15:after, .site-service .chart-clums .one ul li dl dd.data-15:before, .site-video .chart-clums .one ul li dl dd.data-15:after, .site-video .chart-clums .one ul li dl dd.data-15:before, .site-web .chart-clums .one ul li dl dd.data-15:after, .site-web .chart-clums .one ul li dl dd.data-15:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-15:after, .site-illust .chart-clums .one ul li dl dd.data-15:after, .site-service .chart-clums .one ul li dl dd.data-15:after, .site-video .chart-clums .one ul li dl dd.data-15:after, .site-web .chart-clums .one ul li dl dd.data-15:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-16, .site-illust .chart-clums .one ul li dl dd.data-16, .site-service .chart-clums .one ul li dl dd.data-16, .site-video .chart-clums .one ul li dl dd.data-16, .site-web .chart-clums .one ul li dl dd.data-16 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-16 i, .site-illust .chart-clums .one ul li dl dd.data-16 i, .site-service .chart-clums .one ul li dl dd.data-16 i, .site-video .chart-clums .one ul li dl dd.data-16 i, .site-web .chart-clums .one ul li dl dd.data-16 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-16:after, .site-dtp .chart-clums .one ul li dl dd.data-16:before, .site-illust .chart-clums .one ul li dl dd.data-16:after, .site-illust .chart-clums .one ul li dl dd.data-16:before, .site-service .chart-clums .one ul li dl dd.data-16:after, .site-service .chart-clums .one ul li dl dd.data-16:before, .site-video .chart-clums .one ul li dl dd.data-16:after, .site-video .chart-clums .one ul li dl dd.data-16:before, .site-web .chart-clums .one ul li dl dd.data-16:after, .site-web .chart-clums .one ul li dl dd.data-16:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-16:after, .site-illust .chart-clums .one ul li dl dd.data-16:after, .site-service .chart-clums .one ul li dl dd.data-16:after, .site-video .chart-clums .one ul li dl dd.data-16:after, .site-web .chart-clums .one ul li dl dd.data-16:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-17, .site-illust .chart-clums .one ul li dl dd.data-17, .site-service .chart-clums .one ul li dl dd.data-17, .site-video .chart-clums .one ul li dl dd.data-17, .site-web .chart-clums .one ul li dl dd.data-17 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-17 i, .site-illust .chart-clums .one ul li dl dd.data-17 i, .site-service .chart-clums .one ul li dl dd.data-17 i, .site-video .chart-clums .one ul li dl dd.data-17 i, .site-web .chart-clums .one ul li dl dd.data-17 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-17:after, .site-dtp .chart-clums .one ul li dl dd.data-17:before, .site-illust .chart-clums .one ul li dl dd.data-17:after, .site-illust .chart-clums .one ul li dl dd.data-17:before, .site-service .chart-clums .one ul li dl dd.data-17:after, .site-service .chart-clums .one ul li dl dd.data-17:before, .site-video .chart-clums .one ul li dl dd.data-17:after, .site-video .chart-clums .one ul li dl dd.data-17:before, .site-web .chart-clums .one ul li dl dd.data-17:after, .site-web .chart-clums .one ul li dl dd.data-17:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-17:after, .site-illust .chart-clums .one ul li dl dd.data-17:after, .site-service .chart-clums .one ul li dl dd.data-17:after, .site-video .chart-clums .one ul li dl dd.data-17:after, .site-web .chart-clums .one ul li dl dd.data-17:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-18, .site-illust .chart-clums .one ul li dl dd.data-18, .site-service .chart-clums .one ul li dl dd.data-18, .site-video .chart-clums .one ul li dl dd.data-18, .site-web .chart-clums .one ul li dl dd.data-18 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-18 i, .site-illust .chart-clums .one ul li dl dd.data-18 i, .site-service .chart-clums .one ul li dl dd.data-18 i, .site-video .chart-clums .one ul li dl dd.data-18 i, .site-web .chart-clums .one ul li dl dd.data-18 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-18:after, .site-dtp .chart-clums .one ul li dl dd.data-18:before, .site-illust .chart-clums .one ul li dl dd.data-18:after, .site-illust .chart-clums .one ul li dl dd.data-18:before, .site-service .chart-clums .one ul li dl dd.data-18:after, .site-service .chart-clums .one ul li dl dd.data-18:before, .site-video .chart-clums .one ul li dl dd.data-18:after, .site-video .chart-clums .one ul li dl dd.data-18:before, .site-web .chart-clums .one ul li dl dd.data-18:after, .site-web .chart-clums .one ul li dl dd.data-18:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-18:after, .site-illust .chart-clums .one ul li dl dd.data-18:after, .site-service .chart-clums .one ul li dl dd.data-18:after, .site-video .chart-clums .one ul li dl dd.data-18:after, .site-web .chart-clums .one ul li dl dd.data-18:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-19, .site-illust .chart-clums .one ul li dl dd.data-19, .site-service .chart-clums .one ul li dl dd.data-19, .site-video .chart-clums .one ul li dl dd.data-19, .site-web .chart-clums .one ul li dl dd.data-19 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-19 i, .site-illust .chart-clums .one ul li dl dd.data-19 i, .site-service .chart-clums .one ul li dl dd.data-19 i, .site-video .chart-clums .one ul li dl dd.data-19 i, .site-web .chart-clums .one ul li dl dd.data-19 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-19:after, .site-dtp .chart-clums .one ul li dl dd.data-19:before, .site-illust .chart-clums .one ul li dl dd.data-19:after, .site-illust .chart-clums .one ul li dl dd.data-19:before, .site-service .chart-clums .one ul li dl dd.data-19:after, .site-service .chart-clums .one ul li dl dd.data-19:before, .site-video .chart-clums .one ul li dl dd.data-19:after, .site-video .chart-clums .one ul li dl dd.data-19:before, .site-web .chart-clums .one ul li dl dd.data-19:after, .site-web .chart-clums .one ul li dl dd.data-19:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-19:after, .site-illust .chart-clums .one ul li dl dd.data-19:after, .site-service .chart-clums .one ul li dl dd.data-19:after, .site-video .chart-clums .one ul li dl dd.data-19:after, .site-web .chart-clums .one ul li dl dd.data-19:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-20, .site-illust .chart-clums .one ul li dl dd.data-20, .site-service .chart-clums .one ul li dl dd.data-20, .site-video .chart-clums .one ul li dl dd.data-20, .site-web .chart-clums .one ul li dl dd.data-20 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-20 i, .site-illust .chart-clums .one ul li dl dd.data-20 i, .site-service .chart-clums .one ul li dl dd.data-20 i, .site-video .chart-clums .one ul li dl dd.data-20 i, .site-web .chart-clums .one ul li dl dd.data-20 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-20:after, .site-dtp .chart-clums .one ul li dl dd.data-20:before, .site-illust .chart-clums .one ul li dl dd.data-20:after, .site-illust .chart-clums .one ul li dl dd.data-20:before, .site-service .chart-clums .one ul li dl dd.data-20:after, .site-service .chart-clums .one ul li dl dd.data-20:before, .site-video .chart-clums .one ul li dl dd.data-20:after, .site-video .chart-clums .one ul li dl dd.data-20:before, .site-web .chart-clums .one ul li dl dd.data-20:after, .site-web .chart-clums .one ul li dl dd.data-20:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-20:after, .site-illust .chart-clums .one ul li dl dd.data-20:after, .site-service .chart-clums .one ul li dl dd.data-20:after, .site-video .chart-clums .one ul li dl dd.data-20:after, .site-web .chart-clums .one ul li dl dd.data-20:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-21, .site-illust .chart-clums .one ul li dl dd.data-21, .site-service .chart-clums .one ul li dl dd.data-21, .site-video .chart-clums .one ul li dl dd.data-21, .site-web .chart-clums .one ul li dl dd.data-21 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-21 i, .site-illust .chart-clums .one ul li dl dd.data-21 i, .site-service .chart-clums .one ul li dl dd.data-21 i, .site-video .chart-clums .one ul li dl dd.data-21 i, .site-web .chart-clums .one ul li dl dd.data-21 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-21:after, .site-dtp .chart-clums .one ul li dl dd.data-21:before, .site-illust .chart-clums .one ul li dl dd.data-21:after, .site-illust .chart-clums .one ul li dl dd.data-21:before, .site-service .chart-clums .one ul li dl dd.data-21:after, .site-service .chart-clums .one ul li dl dd.data-21:before, .site-video .chart-clums .one ul li dl dd.data-21:after, .site-video .chart-clums .one ul li dl dd.data-21:before, .site-web .chart-clums .one ul li dl dd.data-21:after, .site-web .chart-clums .one ul li dl dd.data-21:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-21:after, .site-illust .chart-clums .one ul li dl dd.data-21:after, .site-service .chart-clums .one ul li dl dd.data-21:after, .site-video .chart-clums .one ul li dl dd.data-21:after, .site-web .chart-clums .one ul li dl dd.data-21:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-22, .site-illust .chart-clums .one ul li dl dd.data-22, .site-service .chart-clums .one ul li dl dd.data-22, .site-video .chart-clums .one ul li dl dd.data-22, .site-web .chart-clums .one ul li dl dd.data-22 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-22 i, .site-illust .chart-clums .one ul li dl dd.data-22 i, .site-service .chart-clums .one ul li dl dd.data-22 i, .site-video .chart-clums .one ul li dl dd.data-22 i, .site-web .chart-clums .one ul li dl dd.data-22 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-22:after, .site-dtp .chart-clums .one ul li dl dd.data-22:before, .site-illust .chart-clums .one ul li dl dd.data-22:after, .site-illust .chart-clums .one ul li dl dd.data-22:before, .site-service .chart-clums .one ul li dl dd.data-22:after, .site-service .chart-clums .one ul li dl dd.data-22:before, .site-video .chart-clums .one ul li dl dd.data-22:after, .site-video .chart-clums .one ul li dl dd.data-22:before, .site-web .chart-clums .one ul li dl dd.data-22:after, .site-web .chart-clums .one ul li dl dd.data-22:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-22:after, .site-illust .chart-clums .one ul li dl dd.data-22:after, .site-service .chart-clums .one ul li dl dd.data-22:after, .site-video .chart-clums .one ul li dl dd.data-22:after, .site-web .chart-clums .one ul li dl dd.data-22:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-23, .site-illust .chart-clums .one ul li dl dd.data-23, .site-service .chart-clums .one ul li dl dd.data-23, .site-video .chart-clums .one ul li dl dd.data-23, .site-web .chart-clums .one ul li dl dd.data-23 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-23 i, .site-illust .chart-clums .one ul li dl dd.data-23 i, .site-service .chart-clums .one ul li dl dd.data-23 i, .site-video .chart-clums .one ul li dl dd.data-23 i, .site-web .chart-clums .one ul li dl dd.data-23 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-23:after, .site-dtp .chart-clums .one ul li dl dd.data-23:before, .site-illust .chart-clums .one ul li dl dd.data-23:after, .site-illust .chart-clums .one ul li dl dd.data-23:before, .site-service .chart-clums .one ul li dl dd.data-23:after, .site-service .chart-clums .one ul li dl dd.data-23:before, .site-video .chart-clums .one ul li dl dd.data-23:after, .site-video .chart-clums .one ul li dl dd.data-23:before, .site-web .chart-clums .one ul li dl dd.data-23:after, .site-web .chart-clums .one ul li dl dd.data-23:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-23:after, .site-illust .chart-clums .one ul li dl dd.data-23:after, .site-service .chart-clums .one ul li dl dd.data-23:after, .site-video .chart-clums .one ul li dl dd.data-23:after, .site-web .chart-clums .one ul li dl dd.data-23:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-24, .site-illust .chart-clums .one ul li dl dd.data-24, .site-service .chart-clums .one ul li dl dd.data-24, .site-video .chart-clums .one ul li dl dd.data-24, .site-web .chart-clums .one ul li dl dd.data-24 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-24 i, .site-illust .chart-clums .one ul li dl dd.data-24 i, .site-service .chart-clums .one ul li dl dd.data-24 i, .site-video .chart-clums .one ul li dl dd.data-24 i, .site-web .chart-clums .one ul li dl dd.data-24 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-24:after, .site-dtp .chart-clums .one ul li dl dd.data-24:before, .site-illust .chart-clums .one ul li dl dd.data-24:after, .site-illust .chart-clums .one ul li dl dd.data-24:before, .site-service .chart-clums .one ul li dl dd.data-24:after, .site-service .chart-clums .one ul li dl dd.data-24:before, .site-video .chart-clums .one ul li dl dd.data-24:after, .site-video .chart-clums .one ul li dl dd.data-24:before, .site-web .chart-clums .one ul li dl dd.data-24:after, .site-web .chart-clums .one ul li dl dd.data-24:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-24:after, .site-illust .chart-clums .one ul li dl dd.data-24:after, .site-service .chart-clums .one ul li dl dd.data-24:after, .site-video .chart-clums .one ul li dl dd.data-24:after, .site-web .chart-clums .one ul li dl dd.data-24:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-25, .site-illust .chart-clums .one ul li dl dd.data-25, .site-service .chart-clums .one ul li dl dd.data-25, .site-video .chart-clums .one ul li dl dd.data-25, .site-web .chart-clums .one ul li dl dd.data-25 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-25 i, .site-illust .chart-clums .one ul li dl dd.data-25 i, .site-service .chart-clums .one ul li dl dd.data-25 i, .site-video .chart-clums .one ul li dl dd.data-25 i, .site-web .chart-clums .one ul li dl dd.data-25 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-25:after, .site-dtp .chart-clums .one ul li dl dd.data-25:before, .site-illust .chart-clums .one ul li dl dd.data-25:after, .site-illust .chart-clums .one ul li dl dd.data-25:before, .site-service .chart-clums .one ul li dl dd.data-25:after, .site-service .chart-clums .one ul li dl dd.data-25:before, .site-video .chart-clums .one ul li dl dd.data-25:after, .site-video .chart-clums .one ul li dl dd.data-25:before, .site-web .chart-clums .one ul li dl dd.data-25:after, .site-web .chart-clums .one ul li dl dd.data-25:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-25:after, .site-illust .chart-clums .one ul li dl dd.data-25:after, .site-service .chart-clums .one ul li dl dd.data-25:after, .site-video .chart-clums .one ul li dl dd.data-25:after, .site-web .chart-clums .one ul li dl dd.data-25:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-26, .site-illust .chart-clums .one ul li dl dd.data-26, .site-service .chart-clums .one ul li dl dd.data-26, .site-video .chart-clums .one ul li dl dd.data-26, .site-web .chart-clums .one ul li dl dd.data-26 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-26 i, .site-illust .chart-clums .one ul li dl dd.data-26 i, .site-service .chart-clums .one ul li dl dd.data-26 i, .site-video .chart-clums .one ul li dl dd.data-26 i, .site-web .chart-clums .one ul li dl dd.data-26 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-26:after, .site-dtp .chart-clums .one ul li dl dd.data-26:before, .site-illust .chart-clums .one ul li dl dd.data-26:after, .site-illust .chart-clums .one ul li dl dd.data-26:before, .site-service .chart-clums .one ul li dl dd.data-26:after, .site-service .chart-clums .one ul li dl dd.data-26:before, .site-video .chart-clums .one ul li dl dd.data-26:after, .site-video .chart-clums .one ul li dl dd.data-26:before, .site-web .chart-clums .one ul li dl dd.data-26:after, .site-web .chart-clums .one ul li dl dd.data-26:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-26:after, .site-illust .chart-clums .one ul li dl dd.data-26:after, .site-service .chart-clums .one ul li dl dd.data-26:after, .site-video .chart-clums .one ul li dl dd.data-26:after, .site-web .chart-clums .one ul li dl dd.data-26:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-27, .site-illust .chart-clums .one ul li dl dd.data-27, .site-service .chart-clums .one ul li dl dd.data-27, .site-video .chart-clums .one ul li dl dd.data-27, .site-web .chart-clums .one ul li dl dd.data-27 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-27 i, .site-illust .chart-clums .one ul li dl dd.data-27 i, .site-service .chart-clums .one ul li dl dd.data-27 i, .site-video .chart-clums .one ul li dl dd.data-27 i, .site-web .chart-clums .one ul li dl dd.data-27 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-27:after, .site-dtp .chart-clums .one ul li dl dd.data-27:before, .site-illust .chart-clums .one ul li dl dd.data-27:after, .site-illust .chart-clums .one ul li dl dd.data-27:before, .site-service .chart-clums .one ul li dl dd.data-27:after, .site-service .chart-clums .one ul li dl dd.data-27:before, .site-video .chart-clums .one ul li dl dd.data-27:after, .site-video .chart-clums .one ul li dl dd.data-27:before, .site-web .chart-clums .one ul li dl dd.data-27:after, .site-web .chart-clums .one ul li dl dd.data-27:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-27:after, .site-illust .chart-clums .one ul li dl dd.data-27:after, .site-service .chart-clums .one ul li dl dd.data-27:after, .site-video .chart-clums .one ul li dl dd.data-27:after, .site-web .chart-clums .one ul li dl dd.data-27:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-28, .site-illust .chart-clums .one ul li dl dd.data-28, .site-service .chart-clums .one ul li dl dd.data-28, .site-video .chart-clums .one ul li dl dd.data-28, .site-web .chart-clums .one ul li dl dd.data-28 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-28 i, .site-illust .chart-clums .one ul li dl dd.data-28 i, .site-service .chart-clums .one ul li dl dd.data-28 i, .site-video .chart-clums .one ul li dl dd.data-28 i, .site-web .chart-clums .one ul li dl dd.data-28 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-28:after, .site-dtp .chart-clums .one ul li dl dd.data-28:before, .site-illust .chart-clums .one ul li dl dd.data-28:after, .site-illust .chart-clums .one ul li dl dd.data-28:before, .site-service .chart-clums .one ul li dl dd.data-28:after, .site-service .chart-clums .one ul li dl dd.data-28:before, .site-video .chart-clums .one ul li dl dd.data-28:after, .site-video .chart-clums .one ul li dl dd.data-28:before, .site-web .chart-clums .one ul li dl dd.data-28:after, .site-web .chart-clums .one ul li dl dd.data-28:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-28:after, .site-illust .chart-clums .one ul li dl dd.data-28:after, .site-service .chart-clums .one ul li dl dd.data-28:after, .site-video .chart-clums .one ul li dl dd.data-28:after, .site-web .chart-clums .one ul li dl dd.data-28:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-29, .site-illust .chart-clums .one ul li dl dd.data-29, .site-service .chart-clums .one ul li dl dd.data-29, .site-video .chart-clums .one ul li dl dd.data-29, .site-web .chart-clums .one ul li dl dd.data-29 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-29 i, .site-illust .chart-clums .one ul li dl dd.data-29 i, .site-service .chart-clums .one ul li dl dd.data-29 i, .site-video .chart-clums .one ul li dl dd.data-29 i, .site-web .chart-clums .one ul li dl dd.data-29 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-29:after, .site-dtp .chart-clums .one ul li dl dd.data-29:before, .site-illust .chart-clums .one ul li dl dd.data-29:after, .site-illust .chart-clums .one ul li dl dd.data-29:before, .site-service .chart-clums .one ul li dl dd.data-29:after, .site-service .chart-clums .one ul li dl dd.data-29:before, .site-video .chart-clums .one ul li dl dd.data-29:after, .site-video .chart-clums .one ul li dl dd.data-29:before, .site-web .chart-clums .one ul li dl dd.data-29:after, .site-web .chart-clums .one ul li dl dd.data-29:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-29:after, .site-illust .chart-clums .one ul li dl dd.data-29:after, .site-service .chart-clums .one ul li dl dd.data-29:after, .site-video .chart-clums .one ul li dl dd.data-29:after, .site-web .chart-clums .one ul li dl dd.data-29:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-30, .site-illust .chart-clums .one ul li dl dd.data-30, .site-service .chart-clums .one ul li dl dd.data-30, .site-video .chart-clums .one ul li dl dd.data-30, .site-web .chart-clums .one ul li dl dd.data-30 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-30 i, .site-illust .chart-clums .one ul li dl dd.data-30 i, .site-service .chart-clums .one ul li dl dd.data-30 i, .site-video .chart-clums .one ul li dl dd.data-30 i, .site-web .chart-clums .one ul li dl dd.data-30 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-30:after, .site-dtp .chart-clums .one ul li dl dd.data-30:before, .site-illust .chart-clums .one ul li dl dd.data-30:after, .site-illust .chart-clums .one ul li dl dd.data-30:before, .site-service .chart-clums .one ul li dl dd.data-30:after, .site-service .chart-clums .one ul li dl dd.data-30:before, .site-video .chart-clums .one ul li dl dd.data-30:after, .site-video .chart-clums .one ul li dl dd.data-30:before, .site-web .chart-clums .one ul li dl dd.data-30:after, .site-web .chart-clums .one ul li dl dd.data-30:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-30:after, .site-illust .chart-clums .one ul li dl dd.data-30:after, .site-service .chart-clums .one ul li dl dd.data-30:after, .site-video .chart-clums .one ul li dl dd.data-30:after, .site-web .chart-clums .one ul li dl dd.data-30:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-31, .site-illust .chart-clums .one ul li dl dd.data-31, .site-service .chart-clums .one ul li dl dd.data-31, .site-video .chart-clums .one ul li dl dd.data-31, .site-web .chart-clums .one ul li dl dd.data-31 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-31 i, .site-illust .chart-clums .one ul li dl dd.data-31 i, .site-service .chart-clums .one ul li dl dd.data-31 i, .site-video .chart-clums .one ul li dl dd.data-31 i, .site-web .chart-clums .one ul li dl dd.data-31 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-31:after, .site-dtp .chart-clums .one ul li dl dd.data-31:before, .site-illust .chart-clums .one ul li dl dd.data-31:after, .site-illust .chart-clums .one ul li dl dd.data-31:before, .site-service .chart-clums .one ul li dl dd.data-31:after, .site-service .chart-clums .one ul li dl dd.data-31:before, .site-video .chart-clums .one ul li dl dd.data-31:after, .site-video .chart-clums .one ul li dl dd.data-31:before, .site-web .chart-clums .one ul li dl dd.data-31:after, .site-web .chart-clums .one ul li dl dd.data-31:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-31:after, .site-illust .chart-clums .one ul li dl dd.data-31:after, .site-service .chart-clums .one ul li dl dd.data-31:after, .site-video .chart-clums .one ul li dl dd.data-31:after, .site-web .chart-clums .one ul li dl dd.data-31:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-32, .site-illust .chart-clums .one ul li dl dd.data-32, .site-service .chart-clums .one ul li dl dd.data-32, .site-video .chart-clums .one ul li dl dd.data-32, .site-web .chart-clums .one ul li dl dd.data-32 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-32 i, .site-illust .chart-clums .one ul li dl dd.data-32 i, .site-service .chart-clums .one ul li dl dd.data-32 i, .site-video .chart-clums .one ul li dl dd.data-32 i, .site-web .chart-clums .one ul li dl dd.data-32 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-32:after, .site-dtp .chart-clums .one ul li dl dd.data-32:before, .site-illust .chart-clums .one ul li dl dd.data-32:after, .site-illust .chart-clums .one ul li dl dd.data-32:before, .site-service .chart-clums .one ul li dl dd.data-32:after, .site-service .chart-clums .one ul li dl dd.data-32:before, .site-video .chart-clums .one ul li dl dd.data-32:after, .site-video .chart-clums .one ul li dl dd.data-32:before, .site-web .chart-clums .one ul li dl dd.data-32:after, .site-web .chart-clums .one ul li dl dd.data-32:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-32:after, .site-illust .chart-clums .one ul li dl dd.data-32:after, .site-service .chart-clums .one ul li dl dd.data-32:after, .site-video .chart-clums .one ul li dl dd.data-32:after, .site-web .chart-clums .one ul li dl dd.data-32:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-33, .site-illust .chart-clums .one ul li dl dd.data-33, .site-service .chart-clums .one ul li dl dd.data-33, .site-video .chart-clums .one ul li dl dd.data-33, .site-web .chart-clums .one ul li dl dd.data-33 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-33 i, .site-illust .chart-clums .one ul li dl dd.data-33 i, .site-service .chart-clums .one ul li dl dd.data-33 i, .site-video .chart-clums .one ul li dl dd.data-33 i, .site-web .chart-clums .one ul li dl dd.data-33 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-33:after, .site-dtp .chart-clums .one ul li dl dd.data-33:before, .site-illust .chart-clums .one ul li dl dd.data-33:after, .site-illust .chart-clums .one ul li dl dd.data-33:before, .site-service .chart-clums .one ul li dl dd.data-33:after, .site-service .chart-clums .one ul li dl dd.data-33:before, .site-video .chart-clums .one ul li dl dd.data-33:after, .site-video .chart-clums .one ul li dl dd.data-33:before, .site-web .chart-clums .one ul li dl dd.data-33:after, .site-web .chart-clums .one ul li dl dd.data-33:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-33:after, .site-illust .chart-clums .one ul li dl dd.data-33:after, .site-service .chart-clums .one ul li dl dd.data-33:after, .site-video .chart-clums .one ul li dl dd.data-33:after, .site-web .chart-clums .one ul li dl dd.data-33:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-34, .site-illust .chart-clums .one ul li dl dd.data-34, .site-service .chart-clums .one ul li dl dd.data-34, .site-video .chart-clums .one ul li dl dd.data-34, .site-web .chart-clums .one ul li dl dd.data-34 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-34 i, .site-illust .chart-clums .one ul li dl dd.data-34 i, .site-service .chart-clums .one ul li dl dd.data-34 i, .site-video .chart-clums .one ul li dl dd.data-34 i, .site-web .chart-clums .one ul li dl dd.data-34 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-34:after, .site-dtp .chart-clums .one ul li dl dd.data-34:before, .site-illust .chart-clums .one ul li dl dd.data-34:after, .site-illust .chart-clums .one ul li dl dd.data-34:before, .site-service .chart-clums .one ul li dl dd.data-34:after, .site-service .chart-clums .one ul li dl dd.data-34:before, .site-video .chart-clums .one ul li dl dd.data-34:after, .site-video .chart-clums .one ul li dl dd.data-34:before, .site-web .chart-clums .one ul li dl dd.data-34:after, .site-web .chart-clums .one ul li dl dd.data-34:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-34:after, .site-illust .chart-clums .one ul li dl dd.data-34:after, .site-service .chart-clums .one ul li dl dd.data-34:after, .site-video .chart-clums .one ul li dl dd.data-34:after, .site-web .chart-clums .one ul li dl dd.data-34:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-35, .site-illust .chart-clums .one ul li dl dd.data-35, .site-service .chart-clums .one ul li dl dd.data-35, .site-video .chart-clums .one ul li dl dd.data-35, .site-web .chart-clums .one ul li dl dd.data-35 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-35 i, .site-illust .chart-clums .one ul li dl dd.data-35 i, .site-service .chart-clums .one ul li dl dd.data-35 i, .site-video .chart-clums .one ul li dl dd.data-35 i, .site-web .chart-clums .one ul li dl dd.data-35 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-35:after, .site-dtp .chart-clums .one ul li dl dd.data-35:before, .site-illust .chart-clums .one ul li dl dd.data-35:after, .site-illust .chart-clums .one ul li dl dd.data-35:before, .site-service .chart-clums .one ul li dl dd.data-35:after, .site-service .chart-clums .one ul li dl dd.data-35:before, .site-video .chart-clums .one ul li dl dd.data-35:after, .site-video .chart-clums .one ul li dl dd.data-35:before, .site-web .chart-clums .one ul li dl dd.data-35:after, .site-web .chart-clums .one ul li dl dd.data-35:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-35:after, .site-illust .chart-clums .one ul li dl dd.data-35:after, .site-service .chart-clums .one ul li dl dd.data-35:after, .site-video .chart-clums .one ul li dl dd.data-35:after, .site-web .chart-clums .one ul li dl dd.data-35:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-36, .site-illust .chart-clums .one ul li dl dd.data-36, .site-service .chart-clums .one ul li dl dd.data-36, .site-video .chart-clums .one ul li dl dd.data-36, .site-web .chart-clums .one ul li dl dd.data-36 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-36 i, .site-illust .chart-clums .one ul li dl dd.data-36 i, .site-service .chart-clums .one ul li dl dd.data-36 i, .site-video .chart-clums .one ul li dl dd.data-36 i, .site-web .chart-clums .one ul li dl dd.data-36 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-36:after, .site-dtp .chart-clums .one ul li dl dd.data-36:before, .site-illust .chart-clums .one ul li dl dd.data-36:after, .site-illust .chart-clums .one ul li dl dd.data-36:before, .site-service .chart-clums .one ul li dl dd.data-36:after, .site-service .chart-clums .one ul li dl dd.data-36:before, .site-video .chart-clums .one ul li dl dd.data-36:after, .site-video .chart-clums .one ul li dl dd.data-36:before, .site-web .chart-clums .one ul li dl dd.data-36:after, .site-web .chart-clums .one ul li dl dd.data-36:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-36:after, .site-illust .chart-clums .one ul li dl dd.data-36:after, .site-service .chart-clums .one ul li dl dd.data-36:after, .site-video .chart-clums .one ul li dl dd.data-36:after, .site-web .chart-clums .one ul li dl dd.data-36:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-37, .site-illust .chart-clums .one ul li dl dd.data-37, .site-service .chart-clums .one ul li dl dd.data-37, .site-video .chart-clums .one ul li dl dd.data-37, .site-web .chart-clums .one ul li dl dd.data-37 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-37 i, .site-illust .chart-clums .one ul li dl dd.data-37 i, .site-service .chart-clums .one ul li dl dd.data-37 i, .site-video .chart-clums .one ul li dl dd.data-37 i, .site-web .chart-clums .one ul li dl dd.data-37 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-37:after, .site-dtp .chart-clums .one ul li dl dd.data-37:before, .site-illust .chart-clums .one ul li dl dd.data-37:after, .site-illust .chart-clums .one ul li dl dd.data-37:before, .site-service .chart-clums .one ul li dl dd.data-37:after, .site-service .chart-clums .one ul li dl dd.data-37:before, .site-video .chart-clums .one ul li dl dd.data-37:after, .site-video .chart-clums .one ul li dl dd.data-37:before, .site-web .chart-clums .one ul li dl dd.data-37:after, .site-web .chart-clums .one ul li dl dd.data-37:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-37:after, .site-illust .chart-clums .one ul li dl dd.data-37:after, .site-service .chart-clums .one ul li dl dd.data-37:after, .site-video .chart-clums .one ul li dl dd.data-37:after, .site-web .chart-clums .one ul li dl dd.data-37:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-38, .site-illust .chart-clums .one ul li dl dd.data-38, .site-service .chart-clums .one ul li dl dd.data-38, .site-video .chart-clums .one ul li dl dd.data-38, .site-web .chart-clums .one ul li dl dd.data-38 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-38 i, .site-illust .chart-clums .one ul li dl dd.data-38 i, .site-service .chart-clums .one ul li dl dd.data-38 i, .site-video .chart-clums .one ul li dl dd.data-38 i, .site-web .chart-clums .one ul li dl dd.data-38 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-38:after, .site-dtp .chart-clums .one ul li dl dd.data-38:before, .site-illust .chart-clums .one ul li dl dd.data-38:after, .site-illust .chart-clums .one ul li dl dd.data-38:before, .site-service .chart-clums .one ul li dl dd.data-38:after, .site-service .chart-clums .one ul li dl dd.data-38:before, .site-video .chart-clums .one ul li dl dd.data-38:after, .site-video .chart-clums .one ul li dl dd.data-38:before, .site-web .chart-clums .one ul li dl dd.data-38:after, .site-web .chart-clums .one ul li dl dd.data-38:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-38:after, .site-illust .chart-clums .one ul li dl dd.data-38:after, .site-service .chart-clums .one ul li dl dd.data-38:after, .site-video .chart-clums .one ul li dl dd.data-38:after, .site-web .chart-clums .one ul li dl dd.data-38:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-39, .site-illust .chart-clums .one ul li dl dd.data-39, .site-service .chart-clums .one ul li dl dd.data-39, .site-video .chart-clums .one ul li dl dd.data-39, .site-web .chart-clums .one ul li dl dd.data-39 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-39 i, .site-illust .chart-clums .one ul li dl dd.data-39 i, .site-service .chart-clums .one ul li dl dd.data-39 i, .site-video .chart-clums .one ul li dl dd.data-39 i, .site-web .chart-clums .one ul li dl dd.data-39 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-39:after, .site-dtp .chart-clums .one ul li dl dd.data-39:before, .site-illust .chart-clums .one ul li dl dd.data-39:after, .site-illust .chart-clums .one ul li dl dd.data-39:before, .site-service .chart-clums .one ul li dl dd.data-39:after, .site-service .chart-clums .one ul li dl dd.data-39:before, .site-video .chart-clums .one ul li dl dd.data-39:after, .site-video .chart-clums .one ul li dl dd.data-39:before, .site-web .chart-clums .one ul li dl dd.data-39:after, .site-web .chart-clums .one ul li dl dd.data-39:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-39:after, .site-illust .chart-clums .one ul li dl dd.data-39:after, .site-service .chart-clums .one ul li dl dd.data-39:after, .site-video .chart-clums .one ul li dl dd.data-39:after, .site-web .chart-clums .one ul li dl dd.data-39:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-40, .site-illust .chart-clums .one ul li dl dd.data-40, .site-service .chart-clums .one ul li dl dd.data-40, .site-video .chart-clums .one ul li dl dd.data-40, .site-web .chart-clums .one ul li dl dd.data-40 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-40 i, .site-illust .chart-clums .one ul li dl dd.data-40 i, .site-service .chart-clums .one ul li dl dd.data-40 i, .site-video .chart-clums .one ul li dl dd.data-40 i, .site-web .chart-clums .one ul li dl dd.data-40 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-40:after, .site-dtp .chart-clums .one ul li dl dd.data-40:before, .site-illust .chart-clums .one ul li dl dd.data-40:after, .site-illust .chart-clums .one ul li dl dd.data-40:before, .site-service .chart-clums .one ul li dl dd.data-40:after, .site-service .chart-clums .one ul li dl dd.data-40:before, .site-video .chart-clums .one ul li dl dd.data-40:after, .site-video .chart-clums .one ul li dl dd.data-40:before, .site-web .chart-clums .one ul li dl dd.data-40:after, .site-web .chart-clums .one ul li dl dd.data-40:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-40:after, .site-illust .chart-clums .one ul li dl dd.data-40:after, .site-service .chart-clums .one ul li dl dd.data-40:after, .site-video .chart-clums .one ul li dl dd.data-40:after, .site-web .chart-clums .one ul li dl dd.data-40:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-41, .site-illust .chart-clums .one ul li dl dd.data-41, .site-service .chart-clums .one ul li dl dd.data-41, .site-video .chart-clums .one ul li dl dd.data-41, .site-web .chart-clums .one ul li dl dd.data-41 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-41 i, .site-illust .chart-clums .one ul li dl dd.data-41 i, .site-service .chart-clums .one ul li dl dd.data-41 i, .site-video .chart-clums .one ul li dl dd.data-41 i, .site-web .chart-clums .one ul li dl dd.data-41 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-41:after, .site-dtp .chart-clums .one ul li dl dd.data-41:before, .site-illust .chart-clums .one ul li dl dd.data-41:after, .site-illust .chart-clums .one ul li dl dd.data-41:before, .site-service .chart-clums .one ul li dl dd.data-41:after, .site-service .chart-clums .one ul li dl dd.data-41:before, .site-video .chart-clums .one ul li dl dd.data-41:after, .site-video .chart-clums .one ul li dl dd.data-41:before, .site-web .chart-clums .one ul li dl dd.data-41:after, .site-web .chart-clums .one ul li dl dd.data-41:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-41:after, .site-illust .chart-clums .one ul li dl dd.data-41:after, .site-service .chart-clums .one ul li dl dd.data-41:after, .site-video .chart-clums .one ul li dl dd.data-41:after, .site-web .chart-clums .one ul li dl dd.data-41:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-42, .site-illust .chart-clums .one ul li dl dd.data-42, .site-service .chart-clums .one ul li dl dd.data-42, .site-video .chart-clums .one ul li dl dd.data-42, .site-web .chart-clums .one ul li dl dd.data-42 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-42 i, .site-illust .chart-clums .one ul li dl dd.data-42 i, .site-service .chart-clums .one ul li dl dd.data-42 i, .site-video .chart-clums .one ul li dl dd.data-42 i, .site-web .chart-clums .one ul li dl dd.data-42 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-42:after, .site-dtp .chart-clums .one ul li dl dd.data-42:before, .site-illust .chart-clums .one ul li dl dd.data-42:after, .site-illust .chart-clums .one ul li dl dd.data-42:before, .site-service .chart-clums .one ul li dl dd.data-42:after, .site-service .chart-clums .one ul li dl dd.data-42:before, .site-video .chart-clums .one ul li dl dd.data-42:after, .site-video .chart-clums .one ul li dl dd.data-42:before, .site-web .chart-clums .one ul li dl dd.data-42:after, .site-web .chart-clums .one ul li dl dd.data-42:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-42:after, .site-illust .chart-clums .one ul li dl dd.data-42:after, .site-service .chart-clums .one ul li dl dd.data-42:after, .site-video .chart-clums .one ul li dl dd.data-42:after, .site-web .chart-clums .one ul li dl dd.data-42:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-43, .site-illust .chart-clums .one ul li dl dd.data-43, .site-service .chart-clums .one ul li dl dd.data-43, .site-video .chart-clums .one ul li dl dd.data-43, .site-web .chart-clums .one ul li dl dd.data-43 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-43 i, .site-illust .chart-clums .one ul li dl dd.data-43 i, .site-service .chart-clums .one ul li dl dd.data-43 i, .site-video .chart-clums .one ul li dl dd.data-43 i, .site-web .chart-clums .one ul li dl dd.data-43 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-43:after, .site-dtp .chart-clums .one ul li dl dd.data-43:before, .site-illust .chart-clums .one ul li dl dd.data-43:after, .site-illust .chart-clums .one ul li dl dd.data-43:before, .site-service .chart-clums .one ul li dl dd.data-43:after, .site-service .chart-clums .one ul li dl dd.data-43:before, .site-video .chart-clums .one ul li dl dd.data-43:after, .site-video .chart-clums .one ul li dl dd.data-43:before, .site-web .chart-clums .one ul li dl dd.data-43:after, .site-web .chart-clums .one ul li dl dd.data-43:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-43:after, .site-illust .chart-clums .one ul li dl dd.data-43:after, .site-service .chart-clums .one ul li dl dd.data-43:after, .site-video .chart-clums .one ul li dl dd.data-43:after, .site-web .chart-clums .one ul li dl dd.data-43:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-44, .site-illust .chart-clums .one ul li dl dd.data-44, .site-service .chart-clums .one ul li dl dd.data-44, .site-video .chart-clums .one ul li dl dd.data-44, .site-web .chart-clums .one ul li dl dd.data-44 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-44 i, .site-illust .chart-clums .one ul li dl dd.data-44 i, .site-service .chart-clums .one ul li dl dd.data-44 i, .site-video .chart-clums .one ul li dl dd.data-44 i, .site-web .chart-clums .one ul li dl dd.data-44 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-44:after, .site-dtp .chart-clums .one ul li dl dd.data-44:before, .site-illust .chart-clums .one ul li dl dd.data-44:after, .site-illust .chart-clums .one ul li dl dd.data-44:before, .site-service .chart-clums .one ul li dl dd.data-44:after, .site-service .chart-clums .one ul li dl dd.data-44:before, .site-video .chart-clums .one ul li dl dd.data-44:after, .site-video .chart-clums .one ul li dl dd.data-44:before, .site-web .chart-clums .one ul li dl dd.data-44:after, .site-web .chart-clums .one ul li dl dd.data-44:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-44:after, .site-illust .chart-clums .one ul li dl dd.data-44:after, .site-service .chart-clums .one ul li dl dd.data-44:after, .site-video .chart-clums .one ul li dl dd.data-44:after, .site-web .chart-clums .one ul li dl dd.data-44:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-45, .site-illust .chart-clums .one ul li dl dd.data-45, .site-service .chart-clums .one ul li dl dd.data-45, .site-video .chart-clums .one ul li dl dd.data-45, .site-web .chart-clums .one ul li dl dd.data-45 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-45 i, .site-illust .chart-clums .one ul li dl dd.data-45 i, .site-service .chart-clums .one ul li dl dd.data-45 i, .site-video .chart-clums .one ul li dl dd.data-45 i, .site-web .chart-clums .one ul li dl dd.data-45 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-45:after, .site-dtp .chart-clums .one ul li dl dd.data-45:before, .site-illust .chart-clums .one ul li dl dd.data-45:after, .site-illust .chart-clums .one ul li dl dd.data-45:before, .site-service .chart-clums .one ul li dl dd.data-45:after, .site-service .chart-clums .one ul li dl dd.data-45:before, .site-video .chart-clums .one ul li dl dd.data-45:after, .site-video .chart-clums .one ul li dl dd.data-45:before, .site-web .chart-clums .one ul li dl dd.data-45:after, .site-web .chart-clums .one ul li dl dd.data-45:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-45:after, .site-illust .chart-clums .one ul li dl dd.data-45:after, .site-service .chart-clums .one ul li dl dd.data-45:after, .site-video .chart-clums .one ul li dl dd.data-45:after, .site-web .chart-clums .one ul li dl dd.data-45:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-46, .site-illust .chart-clums .one ul li dl dd.data-46, .site-service .chart-clums .one ul li dl dd.data-46, .site-video .chart-clums .one ul li dl dd.data-46, .site-web .chart-clums .one ul li dl dd.data-46 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-46 i, .site-illust .chart-clums .one ul li dl dd.data-46 i, .site-service .chart-clums .one ul li dl dd.data-46 i, .site-video .chart-clums .one ul li dl dd.data-46 i, .site-web .chart-clums .one ul li dl dd.data-46 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-46:after, .site-dtp .chart-clums .one ul li dl dd.data-46:before, .site-illust .chart-clums .one ul li dl dd.data-46:after, .site-illust .chart-clums .one ul li dl dd.data-46:before, .site-service .chart-clums .one ul li dl dd.data-46:after, .site-service .chart-clums .one ul li dl dd.data-46:before, .site-video .chart-clums .one ul li dl dd.data-46:after, .site-video .chart-clums .one ul li dl dd.data-46:before, .site-web .chart-clums .one ul li dl dd.data-46:after, .site-web .chart-clums .one ul li dl dd.data-46:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-46:after, .site-illust .chart-clums .one ul li dl dd.data-46:after, .site-service .chart-clums .one ul li dl dd.data-46:after, .site-video .chart-clums .one ul li dl dd.data-46:after, .site-web .chart-clums .one ul li dl dd.data-46:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-47, .site-illust .chart-clums .one ul li dl dd.data-47, .site-service .chart-clums .one ul li dl dd.data-47, .site-video .chart-clums .one ul li dl dd.data-47, .site-web .chart-clums .one ul li dl dd.data-47 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-47 i, .site-illust .chart-clums .one ul li dl dd.data-47 i, .site-service .chart-clums .one ul li dl dd.data-47 i, .site-video .chart-clums .one ul li dl dd.data-47 i, .site-web .chart-clums .one ul li dl dd.data-47 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-47:after, .site-dtp .chart-clums .one ul li dl dd.data-47:before, .site-illust .chart-clums .one ul li dl dd.data-47:after, .site-illust .chart-clums .one ul li dl dd.data-47:before, .site-service .chart-clums .one ul li dl dd.data-47:after, .site-service .chart-clums .one ul li dl dd.data-47:before, .site-video .chart-clums .one ul li dl dd.data-47:after, .site-video .chart-clums .one ul li dl dd.data-47:before, .site-web .chart-clums .one ul li dl dd.data-47:after, .site-web .chart-clums .one ul li dl dd.data-47:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-47:after, .site-illust .chart-clums .one ul li dl dd.data-47:after, .site-service .chart-clums .one ul li dl dd.data-47:after, .site-video .chart-clums .one ul li dl dd.data-47:after, .site-web .chart-clums .one ul li dl dd.data-47:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-48, .site-illust .chart-clums .one ul li dl dd.data-48, .site-service .chart-clums .one ul li dl dd.data-48, .site-video .chart-clums .one ul li dl dd.data-48, .site-web .chart-clums .one ul li dl dd.data-48 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-48 i, .site-illust .chart-clums .one ul li dl dd.data-48 i, .site-service .chart-clums .one ul li dl dd.data-48 i, .site-video .chart-clums .one ul li dl dd.data-48 i, .site-web .chart-clums .one ul li dl dd.data-48 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-48:after, .site-dtp .chart-clums .one ul li dl dd.data-48:before, .site-illust .chart-clums .one ul li dl dd.data-48:after, .site-illust .chart-clums .one ul li dl dd.data-48:before, .site-service .chart-clums .one ul li dl dd.data-48:after, .site-service .chart-clums .one ul li dl dd.data-48:before, .site-video .chart-clums .one ul li dl dd.data-48:after, .site-video .chart-clums .one ul li dl dd.data-48:before, .site-web .chart-clums .one ul li dl dd.data-48:after, .site-web .chart-clums .one ul li dl dd.data-48:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-48:after, .site-illust .chart-clums .one ul li dl dd.data-48:after, .site-service .chart-clums .one ul li dl dd.data-48:after, .site-video .chart-clums .one ul li dl dd.data-48:after, .site-web .chart-clums .one ul li dl dd.data-48:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-49, .site-illust .chart-clums .one ul li dl dd.data-49, .site-service .chart-clums .one ul li dl dd.data-49, .site-video .chart-clums .one ul li dl dd.data-49, .site-web .chart-clums .one ul li dl dd.data-49 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-49 i, .site-illust .chart-clums .one ul li dl dd.data-49 i, .site-service .chart-clums .one ul li dl dd.data-49 i, .site-video .chart-clums .one ul li dl dd.data-49 i, .site-web .chart-clums .one ul li dl dd.data-49 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-49:after, .site-dtp .chart-clums .one ul li dl dd.data-49:before, .site-illust .chart-clums .one ul li dl dd.data-49:after, .site-illust .chart-clums .one ul li dl dd.data-49:before, .site-service .chart-clums .one ul li dl dd.data-49:after, .site-service .chart-clums .one ul li dl dd.data-49:before, .site-video .chart-clums .one ul li dl dd.data-49:after, .site-video .chart-clums .one ul li dl dd.data-49:before, .site-web .chart-clums .one ul li dl dd.data-49:after, .site-web .chart-clums .one ul li dl dd.data-49:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-49:after, .site-illust .chart-clums .one ul li dl dd.data-49:after, .site-service .chart-clums .one ul li dl dd.data-49:after, .site-video .chart-clums .one ul li dl dd.data-49:after, .site-web .chart-clums .one ul li dl dd.data-49:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-50, .site-illust .chart-clums .one ul li dl dd.data-50, .site-service .chart-clums .one ul li dl dd.data-50, .site-video .chart-clums .one ul li dl dd.data-50, .site-web .chart-clums .one ul li dl dd.data-50 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-50 i, .site-illust .chart-clums .one ul li dl dd.data-50 i, .site-service .chart-clums .one ul li dl dd.data-50 i, .site-video .chart-clums .one ul li dl dd.data-50 i, .site-web .chart-clums .one ul li dl dd.data-50 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-50:after, .site-dtp .chart-clums .one ul li dl dd.data-50:before, .site-illust .chart-clums .one ul li dl dd.data-50:after, .site-illust .chart-clums .one ul li dl dd.data-50:before, .site-service .chart-clums .one ul li dl dd.data-50:after, .site-service .chart-clums .one ul li dl dd.data-50:before, .site-video .chart-clums .one ul li dl dd.data-50:after, .site-video .chart-clums .one ul li dl dd.data-50:before, .site-web .chart-clums .one ul li dl dd.data-50:after, .site-web .chart-clums .one ul li dl dd.data-50:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-50:after, .site-illust .chart-clums .one ul li dl dd.data-50:after, .site-service .chart-clums .one ul li dl dd.data-50:after, .site-video .chart-clums .one ul li dl dd.data-50:after, .site-web .chart-clums .one ul li dl dd.data-50:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-51, .site-illust .chart-clums .one ul li dl dd.data-51, .site-service .chart-clums .one ul li dl dd.data-51, .site-video .chart-clums .one ul li dl dd.data-51, .site-web .chart-clums .one ul li dl dd.data-51 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-51 i, .site-illust .chart-clums .one ul li dl dd.data-51 i, .site-service .chart-clums .one ul li dl dd.data-51 i, .site-video .chart-clums .one ul li dl dd.data-51 i, .site-web .chart-clums .one ul li dl dd.data-51 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-51:after, .site-dtp .chart-clums .one ul li dl dd.data-51:before, .site-illust .chart-clums .one ul li dl dd.data-51:after, .site-illust .chart-clums .one ul li dl dd.data-51:before, .site-service .chart-clums .one ul li dl dd.data-51:after, .site-service .chart-clums .one ul li dl dd.data-51:before, .site-video .chart-clums .one ul li dl dd.data-51:after, .site-video .chart-clums .one ul li dl dd.data-51:before, .site-web .chart-clums .one ul li dl dd.data-51:after, .site-web .chart-clums .one ul li dl dd.data-51:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-51:after, .site-illust .chart-clums .one ul li dl dd.data-51:after, .site-service .chart-clums .one ul li dl dd.data-51:after, .site-video .chart-clums .one ul li dl dd.data-51:after, .site-web .chart-clums .one ul li dl dd.data-51:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-52, .site-illust .chart-clums .one ul li dl dd.data-52, .site-service .chart-clums .one ul li dl dd.data-52, .site-video .chart-clums .one ul li dl dd.data-52, .site-web .chart-clums .one ul li dl dd.data-52 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-52 i, .site-illust .chart-clums .one ul li dl dd.data-52 i, .site-service .chart-clums .one ul li dl dd.data-52 i, .site-video .chart-clums .one ul li dl dd.data-52 i, .site-web .chart-clums .one ul li dl dd.data-52 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-52:after, .site-dtp .chart-clums .one ul li dl dd.data-52:before, .site-illust .chart-clums .one ul li dl dd.data-52:after, .site-illust .chart-clums .one ul li dl dd.data-52:before, .site-service .chart-clums .one ul li dl dd.data-52:after, .site-service .chart-clums .one ul li dl dd.data-52:before, .site-video .chart-clums .one ul li dl dd.data-52:after, .site-video .chart-clums .one ul li dl dd.data-52:before, .site-web .chart-clums .one ul li dl dd.data-52:after, .site-web .chart-clums .one ul li dl dd.data-52:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-52:after, .site-illust .chart-clums .one ul li dl dd.data-52:after, .site-service .chart-clums .one ul li dl dd.data-52:after, .site-video .chart-clums .one ul li dl dd.data-52:after, .site-web .chart-clums .one ul li dl dd.data-52:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-53, .site-illust .chart-clums .one ul li dl dd.data-53, .site-service .chart-clums .one ul li dl dd.data-53, .site-video .chart-clums .one ul li dl dd.data-53, .site-web .chart-clums .one ul li dl dd.data-53 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-53 i, .site-illust .chart-clums .one ul li dl dd.data-53 i, .site-service .chart-clums .one ul li dl dd.data-53 i, .site-video .chart-clums .one ul li dl dd.data-53 i, .site-web .chart-clums .one ul li dl dd.data-53 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-53:after, .site-dtp .chart-clums .one ul li dl dd.data-53:before, .site-illust .chart-clums .one ul li dl dd.data-53:after, .site-illust .chart-clums .one ul li dl dd.data-53:before, .site-service .chart-clums .one ul li dl dd.data-53:after, .site-service .chart-clums .one ul li dl dd.data-53:before, .site-video .chart-clums .one ul li dl dd.data-53:after, .site-video .chart-clums .one ul li dl dd.data-53:before, .site-web .chart-clums .one ul li dl dd.data-53:after, .site-web .chart-clums .one ul li dl dd.data-53:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-53:after, .site-illust .chart-clums .one ul li dl dd.data-53:after, .site-service .chart-clums .one ul li dl dd.data-53:after, .site-video .chart-clums .one ul li dl dd.data-53:after, .site-web .chart-clums .one ul li dl dd.data-53:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-54, .site-illust .chart-clums .one ul li dl dd.data-54, .site-service .chart-clums .one ul li dl dd.data-54, .site-video .chart-clums .one ul li dl dd.data-54, .site-web .chart-clums .one ul li dl dd.data-54 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-54 i, .site-illust .chart-clums .one ul li dl dd.data-54 i, .site-service .chart-clums .one ul li dl dd.data-54 i, .site-video .chart-clums .one ul li dl dd.data-54 i, .site-web .chart-clums .one ul li dl dd.data-54 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-54:after, .site-dtp .chart-clums .one ul li dl dd.data-54:before, .site-illust .chart-clums .one ul li dl dd.data-54:after, .site-illust .chart-clums .one ul li dl dd.data-54:before, .site-service .chart-clums .one ul li dl dd.data-54:after, .site-service .chart-clums .one ul li dl dd.data-54:before, .site-video .chart-clums .one ul li dl dd.data-54:after, .site-video .chart-clums .one ul li dl dd.data-54:before, .site-web .chart-clums .one ul li dl dd.data-54:after, .site-web .chart-clums .one ul li dl dd.data-54:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-54:after, .site-illust .chart-clums .one ul li dl dd.data-54:after, .site-service .chart-clums .one ul li dl dd.data-54:after, .site-video .chart-clums .one ul li dl dd.data-54:after, .site-web .chart-clums .one ul li dl dd.data-54:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-55, .site-illust .chart-clums .one ul li dl dd.data-55, .site-service .chart-clums .one ul li dl dd.data-55, .site-video .chart-clums .one ul li dl dd.data-55, .site-web .chart-clums .one ul li dl dd.data-55 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-55 i, .site-illust .chart-clums .one ul li dl dd.data-55 i, .site-service .chart-clums .one ul li dl dd.data-55 i, .site-video .chart-clums .one ul li dl dd.data-55 i, .site-web .chart-clums .one ul li dl dd.data-55 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-55:after, .site-dtp .chart-clums .one ul li dl dd.data-55:before, .site-illust .chart-clums .one ul li dl dd.data-55:after, .site-illust .chart-clums .one ul li dl dd.data-55:before, .site-service .chart-clums .one ul li dl dd.data-55:after, .site-service .chart-clums .one ul li dl dd.data-55:before, .site-video .chart-clums .one ul li dl dd.data-55:after, .site-video .chart-clums .one ul li dl dd.data-55:before, .site-web .chart-clums .one ul li dl dd.data-55:after, .site-web .chart-clums .one ul li dl dd.data-55:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-55:after, .site-illust .chart-clums .one ul li dl dd.data-55:after, .site-service .chart-clums .one ul li dl dd.data-55:after, .site-video .chart-clums .one ul li dl dd.data-55:after, .site-web .chart-clums .one ul li dl dd.data-55:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-56, .site-illust .chart-clums .one ul li dl dd.data-56, .site-service .chart-clums .one ul li dl dd.data-56, .site-video .chart-clums .one ul li dl dd.data-56, .site-web .chart-clums .one ul li dl dd.data-56 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-56 i, .site-illust .chart-clums .one ul li dl dd.data-56 i, .site-service .chart-clums .one ul li dl dd.data-56 i, .site-video .chart-clums .one ul li dl dd.data-56 i, .site-web .chart-clums .one ul li dl dd.data-56 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-56:after, .site-dtp .chart-clums .one ul li dl dd.data-56:before, .site-illust .chart-clums .one ul li dl dd.data-56:after, .site-illust .chart-clums .one ul li dl dd.data-56:before, .site-service .chart-clums .one ul li dl dd.data-56:after, .site-service .chart-clums .one ul li dl dd.data-56:before, .site-video .chart-clums .one ul li dl dd.data-56:after, .site-video .chart-clums .one ul li dl dd.data-56:before, .site-web .chart-clums .one ul li dl dd.data-56:after, .site-web .chart-clums .one ul li dl dd.data-56:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-56:after, .site-illust .chart-clums .one ul li dl dd.data-56:after, .site-service .chart-clums .one ul li dl dd.data-56:after, .site-video .chart-clums .one ul li dl dd.data-56:after, .site-web .chart-clums .one ul li dl dd.data-56:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-57, .site-illust .chart-clums .one ul li dl dd.data-57, .site-service .chart-clums .one ul li dl dd.data-57, .site-video .chart-clums .one ul li dl dd.data-57, .site-web .chart-clums .one ul li dl dd.data-57 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-57 i, .site-illust .chart-clums .one ul li dl dd.data-57 i, .site-service .chart-clums .one ul li dl dd.data-57 i, .site-video .chart-clums .one ul li dl dd.data-57 i, .site-web .chart-clums .one ul li dl dd.data-57 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-57:after, .site-dtp .chart-clums .one ul li dl dd.data-57:before, .site-illust .chart-clums .one ul li dl dd.data-57:after, .site-illust .chart-clums .one ul li dl dd.data-57:before, .site-service .chart-clums .one ul li dl dd.data-57:after, .site-service .chart-clums .one ul li dl dd.data-57:before, .site-video .chart-clums .one ul li dl dd.data-57:after, .site-video .chart-clums .one ul li dl dd.data-57:before, .site-web .chart-clums .one ul li dl dd.data-57:after, .site-web .chart-clums .one ul li dl dd.data-57:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-57:after, .site-illust .chart-clums .one ul li dl dd.data-57:after, .site-service .chart-clums .one ul li dl dd.data-57:after, .site-video .chart-clums .one ul li dl dd.data-57:after, .site-web .chart-clums .one ul li dl dd.data-57:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-58, .site-illust .chart-clums .one ul li dl dd.data-58, .site-service .chart-clums .one ul li dl dd.data-58, .site-video .chart-clums .one ul li dl dd.data-58, .site-web .chart-clums .one ul li dl dd.data-58 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-58 i, .site-illust .chart-clums .one ul li dl dd.data-58 i, .site-service .chart-clums .one ul li dl dd.data-58 i, .site-video .chart-clums .one ul li dl dd.data-58 i, .site-web .chart-clums .one ul li dl dd.data-58 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-58:after, .site-dtp .chart-clums .one ul li dl dd.data-58:before, .site-illust .chart-clums .one ul li dl dd.data-58:after, .site-illust .chart-clums .one ul li dl dd.data-58:before, .site-service .chart-clums .one ul li dl dd.data-58:after, .site-service .chart-clums .one ul li dl dd.data-58:before, .site-video .chart-clums .one ul li dl dd.data-58:after, .site-video .chart-clums .one ul li dl dd.data-58:before, .site-web .chart-clums .one ul li dl dd.data-58:after, .site-web .chart-clums .one ul li dl dd.data-58:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-58:after, .site-illust .chart-clums .one ul li dl dd.data-58:after, .site-service .chart-clums .one ul li dl dd.data-58:after, .site-video .chart-clums .one ul li dl dd.data-58:after, .site-web .chart-clums .one ul li dl dd.data-58:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-59, .site-illust .chart-clums .one ul li dl dd.data-59, .site-service .chart-clums .one ul li dl dd.data-59, .site-video .chart-clums .one ul li dl dd.data-59, .site-web .chart-clums .one ul li dl dd.data-59 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-59 i, .site-illust .chart-clums .one ul li dl dd.data-59 i, .site-service .chart-clums .one ul li dl dd.data-59 i, .site-video .chart-clums .one ul li dl dd.data-59 i, .site-web .chart-clums .one ul li dl dd.data-59 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-59:after, .site-dtp .chart-clums .one ul li dl dd.data-59:before, .site-illust .chart-clums .one ul li dl dd.data-59:after, .site-illust .chart-clums .one ul li dl dd.data-59:before, .site-service .chart-clums .one ul li dl dd.data-59:after, .site-service .chart-clums .one ul li dl dd.data-59:before, .site-video .chart-clums .one ul li dl dd.data-59:after, .site-video .chart-clums .one ul li dl dd.data-59:before, .site-web .chart-clums .one ul li dl dd.data-59:after, .site-web .chart-clums .one ul li dl dd.data-59:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-59:after, .site-illust .chart-clums .one ul li dl dd.data-59:after, .site-service .chart-clums .one ul li dl dd.data-59:after, .site-video .chart-clums .one ul li dl dd.data-59:after, .site-web .chart-clums .one ul li dl dd.data-59:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-60, .site-illust .chart-clums .one ul li dl dd.data-60, .site-service .chart-clums .one ul li dl dd.data-60, .site-video .chart-clums .one ul li dl dd.data-60, .site-web .chart-clums .one ul li dl dd.data-60 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-60 i, .site-illust .chart-clums .one ul li dl dd.data-60 i, .site-service .chart-clums .one ul li dl dd.data-60 i, .site-video .chart-clums .one ul li dl dd.data-60 i, .site-web .chart-clums .one ul li dl dd.data-60 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-60:after, .site-dtp .chart-clums .one ul li dl dd.data-60:before, .site-illust .chart-clums .one ul li dl dd.data-60:after, .site-illust .chart-clums .one ul li dl dd.data-60:before, .site-service .chart-clums .one ul li dl dd.data-60:after, .site-service .chart-clums .one ul li dl dd.data-60:before, .site-video .chart-clums .one ul li dl dd.data-60:after, .site-video .chart-clums .one ul li dl dd.data-60:before, .site-web .chart-clums .one ul li dl dd.data-60:after, .site-web .chart-clums .one ul li dl dd.data-60:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-60:after, .site-illust .chart-clums .one ul li dl dd.data-60:after, .site-service .chart-clums .one ul li dl dd.data-60:after, .site-video .chart-clums .one ul li dl dd.data-60:after, .site-web .chart-clums .one ul li dl dd.data-60:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-61, .site-illust .chart-clums .one ul li dl dd.data-61, .site-service .chart-clums .one ul li dl dd.data-61, .site-video .chart-clums .one ul li dl dd.data-61, .site-web .chart-clums .one ul li dl dd.data-61 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-61 i, .site-illust .chart-clums .one ul li dl dd.data-61 i, .site-service .chart-clums .one ul li dl dd.data-61 i, .site-video .chart-clums .one ul li dl dd.data-61 i, .site-web .chart-clums .one ul li dl dd.data-61 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-61:after, .site-dtp .chart-clums .one ul li dl dd.data-61:before, .site-illust .chart-clums .one ul li dl dd.data-61:after, .site-illust .chart-clums .one ul li dl dd.data-61:before, .site-service .chart-clums .one ul li dl dd.data-61:after, .site-service .chart-clums .one ul li dl dd.data-61:before, .site-video .chart-clums .one ul li dl dd.data-61:after, .site-video .chart-clums .one ul li dl dd.data-61:before, .site-web .chart-clums .one ul li dl dd.data-61:after, .site-web .chart-clums .one ul li dl dd.data-61:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-61:after, .site-illust .chart-clums .one ul li dl dd.data-61:after, .site-service .chart-clums .one ul li dl dd.data-61:after, .site-video .chart-clums .one ul li dl dd.data-61:after, .site-web .chart-clums .one ul li dl dd.data-61:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-62, .site-illust .chart-clums .one ul li dl dd.data-62, .site-service .chart-clums .one ul li dl dd.data-62, .site-video .chart-clums .one ul li dl dd.data-62, .site-web .chart-clums .one ul li dl dd.data-62 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-62 i, .site-illust .chart-clums .one ul li dl dd.data-62 i, .site-service .chart-clums .one ul li dl dd.data-62 i, .site-video .chart-clums .one ul li dl dd.data-62 i, .site-web .chart-clums .one ul li dl dd.data-62 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-62:after, .site-dtp .chart-clums .one ul li dl dd.data-62:before, .site-illust .chart-clums .one ul li dl dd.data-62:after, .site-illust .chart-clums .one ul li dl dd.data-62:before, .site-service .chart-clums .one ul li dl dd.data-62:after, .site-service .chart-clums .one ul li dl dd.data-62:before, .site-video .chart-clums .one ul li dl dd.data-62:after, .site-video .chart-clums .one ul li dl dd.data-62:before, .site-web .chart-clums .one ul li dl dd.data-62:after, .site-web .chart-clums .one ul li dl dd.data-62:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-62:after, .site-illust .chart-clums .one ul li dl dd.data-62:after, .site-service .chart-clums .one ul li dl dd.data-62:after, .site-video .chart-clums .one ul li dl dd.data-62:after, .site-web .chart-clums .one ul li dl dd.data-62:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-63, .site-illust .chart-clums .one ul li dl dd.data-63, .site-service .chart-clums .one ul li dl dd.data-63, .site-video .chart-clums .one ul li dl dd.data-63, .site-web .chart-clums .one ul li dl dd.data-63 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-63 i, .site-illust .chart-clums .one ul li dl dd.data-63 i, .site-service .chart-clums .one ul li dl dd.data-63 i, .site-video .chart-clums .one ul li dl dd.data-63 i, .site-web .chart-clums .one ul li dl dd.data-63 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-63:after, .site-dtp .chart-clums .one ul li dl dd.data-63:before, .site-illust .chart-clums .one ul li dl dd.data-63:after, .site-illust .chart-clums .one ul li dl dd.data-63:before, .site-service .chart-clums .one ul li dl dd.data-63:after, .site-service .chart-clums .one ul li dl dd.data-63:before, .site-video .chart-clums .one ul li dl dd.data-63:after, .site-video .chart-clums .one ul li dl dd.data-63:before, .site-web .chart-clums .one ul li dl dd.data-63:after, .site-web .chart-clums .one ul li dl dd.data-63:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-63:after, .site-illust .chart-clums .one ul li dl dd.data-63:after, .site-service .chart-clums .one ul li dl dd.data-63:after, .site-video .chart-clums .one ul li dl dd.data-63:after, .site-web .chart-clums .one ul li dl dd.data-63:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-64, .site-illust .chart-clums .one ul li dl dd.data-64, .site-service .chart-clums .one ul li dl dd.data-64, .site-video .chart-clums .one ul li dl dd.data-64, .site-web .chart-clums .one ul li dl dd.data-64 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-64 i, .site-illust .chart-clums .one ul li dl dd.data-64 i, .site-service .chart-clums .one ul li dl dd.data-64 i, .site-video .chart-clums .one ul li dl dd.data-64 i, .site-web .chart-clums .one ul li dl dd.data-64 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-64:after, .site-dtp .chart-clums .one ul li dl dd.data-64:before, .site-illust .chart-clums .one ul li dl dd.data-64:after, .site-illust .chart-clums .one ul li dl dd.data-64:before, .site-service .chart-clums .one ul li dl dd.data-64:after, .site-service .chart-clums .one ul li dl dd.data-64:before, .site-video .chart-clums .one ul li dl dd.data-64:after, .site-video .chart-clums .one ul li dl dd.data-64:before, .site-web .chart-clums .one ul li dl dd.data-64:after, .site-web .chart-clums .one ul li dl dd.data-64:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-64:after, .site-illust .chart-clums .one ul li dl dd.data-64:after, .site-service .chart-clums .one ul li dl dd.data-64:after, .site-video .chart-clums .one ul li dl dd.data-64:after, .site-web .chart-clums .one ul li dl dd.data-64:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-65, .site-illust .chart-clums .one ul li dl dd.data-65, .site-service .chart-clums .one ul li dl dd.data-65, .site-video .chart-clums .one ul li dl dd.data-65, .site-web .chart-clums .one ul li dl dd.data-65 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-65 i, .site-illust .chart-clums .one ul li dl dd.data-65 i, .site-service .chart-clums .one ul li dl dd.data-65 i, .site-video .chart-clums .one ul li dl dd.data-65 i, .site-web .chart-clums .one ul li dl dd.data-65 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-65:after, .site-dtp .chart-clums .one ul li dl dd.data-65:before, .site-illust .chart-clums .one ul li dl dd.data-65:after, .site-illust .chart-clums .one ul li dl dd.data-65:before, .site-service .chart-clums .one ul li dl dd.data-65:after, .site-service .chart-clums .one ul li dl dd.data-65:before, .site-video .chart-clums .one ul li dl dd.data-65:after, .site-video .chart-clums .one ul li dl dd.data-65:before, .site-web .chart-clums .one ul li dl dd.data-65:after, .site-web .chart-clums .one ul li dl dd.data-65:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-65:after, .site-illust .chart-clums .one ul li dl dd.data-65:after, .site-service .chart-clums .one ul li dl dd.data-65:after, .site-video .chart-clums .one ul li dl dd.data-65:after, .site-web .chart-clums .one ul li dl dd.data-65:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-66, .site-illust .chart-clums .one ul li dl dd.data-66, .site-service .chart-clums .one ul li dl dd.data-66, .site-video .chart-clums .one ul li dl dd.data-66, .site-web .chart-clums .one ul li dl dd.data-66 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-66 i, .site-illust .chart-clums .one ul li dl dd.data-66 i, .site-service .chart-clums .one ul li dl dd.data-66 i, .site-video .chart-clums .one ul li dl dd.data-66 i, .site-web .chart-clums .one ul li dl dd.data-66 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-66:after, .site-dtp .chart-clums .one ul li dl dd.data-66:before, .site-illust .chart-clums .one ul li dl dd.data-66:after, .site-illust .chart-clums .one ul li dl dd.data-66:before, .site-service .chart-clums .one ul li dl dd.data-66:after, .site-service .chart-clums .one ul li dl dd.data-66:before, .site-video .chart-clums .one ul li dl dd.data-66:after, .site-video .chart-clums .one ul li dl dd.data-66:before, .site-web .chart-clums .one ul li dl dd.data-66:after, .site-web .chart-clums .one ul li dl dd.data-66:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-66:after, .site-illust .chart-clums .one ul li dl dd.data-66:after, .site-service .chart-clums .one ul li dl dd.data-66:after, .site-video .chart-clums .one ul li dl dd.data-66:after, .site-web .chart-clums .one ul li dl dd.data-66:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-67, .site-illust .chart-clums .one ul li dl dd.data-67, .site-service .chart-clums .one ul li dl dd.data-67, .site-video .chart-clums .one ul li dl dd.data-67, .site-web .chart-clums .one ul li dl dd.data-67 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-67 i, .site-illust .chart-clums .one ul li dl dd.data-67 i, .site-service .chart-clums .one ul li dl dd.data-67 i, .site-video .chart-clums .one ul li dl dd.data-67 i, .site-web .chart-clums .one ul li dl dd.data-67 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-67:after, .site-dtp .chart-clums .one ul li dl dd.data-67:before, .site-illust .chart-clums .one ul li dl dd.data-67:after, .site-illust .chart-clums .one ul li dl dd.data-67:before, .site-service .chart-clums .one ul li dl dd.data-67:after, .site-service .chart-clums .one ul li dl dd.data-67:before, .site-video .chart-clums .one ul li dl dd.data-67:after, .site-video .chart-clums .one ul li dl dd.data-67:before, .site-web .chart-clums .one ul li dl dd.data-67:after, .site-web .chart-clums .one ul li dl dd.data-67:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-67:after, .site-illust .chart-clums .one ul li dl dd.data-67:after, .site-service .chart-clums .one ul li dl dd.data-67:after, .site-video .chart-clums .one ul li dl dd.data-67:after, .site-web .chart-clums .one ul li dl dd.data-67:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-68, .site-illust .chart-clums .one ul li dl dd.data-68, .site-service .chart-clums .one ul li dl dd.data-68, .site-video .chart-clums .one ul li dl dd.data-68, .site-web .chart-clums .one ul li dl dd.data-68 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-68 i, .site-illust .chart-clums .one ul li dl dd.data-68 i, .site-service .chart-clums .one ul li dl dd.data-68 i, .site-video .chart-clums .one ul li dl dd.data-68 i, .site-web .chart-clums .one ul li dl dd.data-68 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-68:after, .site-dtp .chart-clums .one ul li dl dd.data-68:before, .site-illust .chart-clums .one ul li dl dd.data-68:after, .site-illust .chart-clums .one ul li dl dd.data-68:before, .site-service .chart-clums .one ul li dl dd.data-68:after, .site-service .chart-clums .one ul li dl dd.data-68:before, .site-video .chart-clums .one ul li dl dd.data-68:after, .site-video .chart-clums .one ul li dl dd.data-68:before, .site-web .chart-clums .one ul li dl dd.data-68:after, .site-web .chart-clums .one ul li dl dd.data-68:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-68:after, .site-illust .chart-clums .one ul li dl dd.data-68:after, .site-service .chart-clums .one ul li dl dd.data-68:after, .site-video .chart-clums .one ul li dl dd.data-68:after, .site-web .chart-clums .one ul li dl dd.data-68:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-69, .site-illust .chart-clums .one ul li dl dd.data-69, .site-service .chart-clums .one ul li dl dd.data-69, .site-video .chart-clums .one ul li dl dd.data-69, .site-web .chart-clums .one ul li dl dd.data-69 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-69 i, .site-illust .chart-clums .one ul li dl dd.data-69 i, .site-service .chart-clums .one ul li dl dd.data-69 i, .site-video .chart-clums .one ul li dl dd.data-69 i, .site-web .chart-clums .one ul li dl dd.data-69 i {
  color: #0fd468;
  color: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-69:after, .site-dtp .chart-clums .one ul li dl dd.data-69:before, .site-illust .chart-clums .one ul li dl dd.data-69:after, .site-illust .chart-clums .one ul li dl dd.data-69:before, .site-service .chart-clums .one ul li dl dd.data-69:after, .site-service .chart-clums .one ul li dl dd.data-69:before, .site-video .chart-clums .one ul li dl dd.data-69:after, .site-video .chart-clums .one ul li dl dd.data-69:before, .site-web .chart-clums .one ul li dl dd.data-69:after, .site-web .chart-clums .one ul li dl dd.data-69:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #fe5848
}

.site-dtp .chart-clums .one ul li dl dd.data-69:after, .site-illust .chart-clums .one ul li dl dd.data-69:after, .site-service .chart-clums .one ul li dl dd.data-69:after, .site-video .chart-clums .one ul li dl dd.data-69:after, .site-web .chart-clums .one ul li dl dd.data-69:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-70, .site-illust .chart-clums .one ul li dl dd.data-70, .site-service .chart-clums .one ul li dl dd.data-70, .site-video .chart-clums .one ul li dl dd.data-70, .site-web .chart-clums .one ul li dl dd.data-70 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-70 i, .site-illust .chart-clums .one ul li dl dd.data-70 i, .site-service .chart-clums .one ul li dl dd.data-70 i, .site-video .chart-clums .one ul li dl dd.data-70 i, .site-web .chart-clums .one ul li dl dd.data-70 i {
  color: #0fd468;
  color: #feae00
}

.site-dtp .chart-clums .one ul li dl dd.data-70:after, .site-dtp .chart-clums .one ul li dl dd.data-70:before, .site-illust .chart-clums .one ul li dl dd.data-70:after, .site-illust .chart-clums .one ul li dl dd.data-70:before, .site-service .chart-clums .one ul li dl dd.data-70:after, .site-service .chart-clums .one ul li dl dd.data-70:before, .site-video .chart-clums .one ul li dl dd.data-70:after, .site-video .chart-clums .one ul li dl dd.data-70:before, .site-web .chart-clums .one ul li dl dd.data-70:after, .site-web .chart-clums .one ul li dl dd.data-70:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #feae00
}

.site-dtp .chart-clums .one ul li dl dd.data-70:after, .site-illust .chart-clums .one ul li dl dd.data-70:after, .site-service .chart-clums .one ul li dl dd.data-70:after, .site-video .chart-clums .one ul li dl dd.data-70:after, .site-web .chart-clums .one ul li dl dd.data-70:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-71, .site-illust .chart-clums .one ul li dl dd.data-71, .site-service .chart-clums .one ul li dl dd.data-71, .site-video .chart-clums .one ul li dl dd.data-71, .site-web .chart-clums .one ul li dl dd.data-71 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-71 i, .site-illust .chart-clums .one ul li dl dd.data-71 i, .site-service .chart-clums .one ul li dl dd.data-71 i, .site-video .chart-clums .one ul li dl dd.data-71 i, .site-web .chart-clums .one ul li dl dd.data-71 i {
  color: #0fd468;
  color: #feae00
}

.site-dtp .chart-clums .one ul li dl dd.data-71:after, .site-dtp .chart-clums .one ul li dl dd.data-71:before, .site-illust .chart-clums .one ul li dl dd.data-71:after, .site-illust .chart-clums .one ul li dl dd.data-71:before, .site-service .chart-clums .one ul li dl dd.data-71:after, .site-service .chart-clums .one ul li dl dd.data-71:before, .site-video .chart-clums .one ul li dl dd.data-71:after, .site-video .chart-clums .one ul li dl dd.data-71:before, .site-web .chart-clums .one ul li dl dd.data-71:after, .site-web .chart-clums .one ul li dl dd.data-71:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #feae00
}

.site-dtp .chart-clums .one ul li dl dd.data-71:after, .site-illust .chart-clums .one ul li dl dd.data-71:after, .site-service .chart-clums .one ul li dl dd.data-71:after, .site-video .chart-clums .one ul li dl dd.data-71:after, .site-web .chart-clums .one ul li dl dd.data-71:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-72, .site-illust .chart-clums .one ul li dl dd.data-72, .site-service .chart-clums .one ul li dl dd.data-72, .site-video .chart-clums .one ul li dl dd.data-72, .site-web .chart-clums .one ul li dl dd.data-72 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-72 i, .site-illust .chart-clums .one ul li dl dd.data-72 i, .site-service .chart-clums .one ul li dl dd.data-72 i, .site-video .chart-clums .one ul li dl dd.data-72 i, .site-web .chart-clums .one ul li dl dd.data-72 i {
  color: #0fd468;
  color: #feae00
}

.site-dtp .chart-clums .one ul li dl dd.data-72:after, .site-dtp .chart-clums .one ul li dl dd.data-72:before, .site-illust .chart-clums .one ul li dl dd.data-72:after, .site-illust .chart-clums .one ul li dl dd.data-72:before, .site-service .chart-clums .one ul li dl dd.data-72:after, .site-service .chart-clums .one ul li dl dd.data-72:before, .site-video .chart-clums .one ul li dl dd.data-72:after, .site-video .chart-clums .one ul li dl dd.data-72:before, .site-web .chart-clums .one ul li dl dd.data-72:after, .site-web .chart-clums .one ul li dl dd.data-72:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #feae00
}

.site-dtp .chart-clums .one ul li dl dd.data-72:after, .site-illust .chart-clums .one ul li dl dd.data-72:after, .site-service .chart-clums .one ul li dl dd.data-72:after, .site-video .chart-clums .one ul li dl dd.data-72:after, .site-web .chart-clums .one ul li dl dd.data-72:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-73, .site-illust .chart-clums .one ul li dl dd.data-73, .site-service .chart-clums .one ul li dl dd.data-73, .site-video .chart-clums .one ul li dl dd.data-73, .site-web .chart-clums .one ul li dl dd.data-73 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-73 i, .site-illust .chart-clums .one ul li dl dd.data-73 i, .site-service .chart-clums .one ul li dl dd.data-73 i, .site-video .chart-clums .one ul li dl dd.data-73 i, .site-web .chart-clums .one ul li dl dd.data-73 i {
  color: #0fd468;
  color: #feae00
}

.site-dtp .chart-clums .one ul li dl dd.data-73:after, .site-dtp .chart-clums .one ul li dl dd.data-73:before, .site-illust .chart-clums .one ul li dl dd.data-73:after, .site-illust .chart-clums .one ul li dl dd.data-73:before, .site-service .chart-clums .one ul li dl dd.data-73:after, .site-service .chart-clums .one ul li dl dd.data-73:before, .site-video .chart-clums .one ul li dl dd.data-73:after, .site-video .chart-clums .one ul li dl dd.data-73:before, .site-web .chart-clums .one ul li dl dd.data-73:after, .site-web .chart-clums .one ul li dl dd.data-73:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #feae00
}

.site-dtp .chart-clums .one ul li dl dd.data-73:after, .site-illust .chart-clums .one ul li dl dd.data-73:after, .site-service .chart-clums .one ul li dl dd.data-73:after, .site-video .chart-clums .one ul li dl dd.data-73:after, .site-web .chart-clums .one ul li dl dd.data-73:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-74, .site-illust .chart-clums .one ul li dl dd.data-74, .site-service .chart-clums .one ul li dl dd.data-74, .site-video .chart-clums .one ul li dl dd.data-74, .site-web .chart-clums .one ul li dl dd.data-74 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-74 i, .site-illust .chart-clums .one ul li dl dd.data-74 i, .site-service .chart-clums .one ul li dl dd.data-74 i, .site-video .chart-clums .one ul li dl dd.data-74 i, .site-web .chart-clums .one ul li dl dd.data-74 i {
  color: #0fd468;
  color: #feae00
}

.site-dtp .chart-clums .one ul li dl dd.data-74:after, .site-dtp .chart-clums .one ul li dl dd.data-74:before, .site-illust .chart-clums .one ul li dl dd.data-74:after, .site-illust .chart-clums .one ul li dl dd.data-74:before, .site-service .chart-clums .one ul li dl dd.data-74:after, .site-service .chart-clums .one ul li dl dd.data-74:before, .site-video .chart-clums .one ul li dl dd.data-74:after, .site-video .chart-clums .one ul li dl dd.data-74:before, .site-web .chart-clums .one ul li dl dd.data-74:after, .site-web .chart-clums .one ul li dl dd.data-74:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #feae00
}

.site-dtp .chart-clums .one ul li dl dd.data-74:after, .site-illust .chart-clums .one ul li dl dd.data-74:after, .site-service .chart-clums .one ul li dl dd.data-74:after, .site-video .chart-clums .one ul li dl dd.data-74:after, .site-web .chart-clums .one ul li dl dd.data-74:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-75, .site-illust .chart-clums .one ul li dl dd.data-75, .site-service .chart-clums .one ul li dl dd.data-75, .site-video .chart-clums .one ul li dl dd.data-75, .site-web .chart-clums .one ul li dl dd.data-75 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-75 i, .site-illust .chart-clums .one ul li dl dd.data-75 i, .site-service .chart-clums .one ul li dl dd.data-75 i, .site-video .chart-clums .one ul li dl dd.data-75 i, .site-web .chart-clums .one ul li dl dd.data-75 i {
  color: #0fd468;
  color: #feae00
}

.site-dtp .chart-clums .one ul li dl dd.data-75:after, .site-dtp .chart-clums .one ul li dl dd.data-75:before, .site-illust .chart-clums .one ul li dl dd.data-75:after, .site-illust .chart-clums .one ul li dl dd.data-75:before, .site-service .chart-clums .one ul li dl dd.data-75:after, .site-service .chart-clums .one ul li dl dd.data-75:before, .site-video .chart-clums .one ul li dl dd.data-75:after, .site-video .chart-clums .one ul li dl dd.data-75:before, .site-web .chart-clums .one ul li dl dd.data-75:after, .site-web .chart-clums .one ul li dl dd.data-75:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #feae00
}

.site-dtp .chart-clums .one ul li dl dd.data-75:after, .site-illust .chart-clums .one ul li dl dd.data-75:after, .site-service .chart-clums .one ul li dl dd.data-75:after, .site-video .chart-clums .one ul li dl dd.data-75:after, .site-web .chart-clums .one ul li dl dd.data-75:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-76, .site-illust .chart-clums .one ul li dl dd.data-76, .site-service .chart-clums .one ul li dl dd.data-76, .site-video .chart-clums .one ul li dl dd.data-76, .site-web .chart-clums .one ul li dl dd.data-76 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-76 i, .site-illust .chart-clums .one ul li dl dd.data-76 i, .site-service .chart-clums .one ul li dl dd.data-76 i, .site-video .chart-clums .one ul li dl dd.data-76 i, .site-web .chart-clums .one ul li dl dd.data-76 i {
  color: #0fd468;
  color: #feae00
}

.site-dtp .chart-clums .one ul li dl dd.data-76:after, .site-dtp .chart-clums .one ul li dl dd.data-76:before, .site-illust .chart-clums .one ul li dl dd.data-76:after, .site-illust .chart-clums .one ul li dl dd.data-76:before, .site-service .chart-clums .one ul li dl dd.data-76:after, .site-service .chart-clums .one ul li dl dd.data-76:before, .site-video .chart-clums .one ul li dl dd.data-76:after, .site-video .chart-clums .one ul li dl dd.data-76:before, .site-web .chart-clums .one ul li dl dd.data-76:after, .site-web .chart-clums .one ul li dl dd.data-76:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #feae00
}

.site-dtp .chart-clums .one ul li dl dd.data-76:after, .site-illust .chart-clums .one ul li dl dd.data-76:after, .site-service .chart-clums .one ul li dl dd.data-76:after, .site-video .chart-clums .one ul li dl dd.data-76:after, .site-web .chart-clums .one ul li dl dd.data-76:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-77, .site-illust .chart-clums .one ul li dl dd.data-77, .site-service .chart-clums .one ul li dl dd.data-77, .site-video .chart-clums .one ul li dl dd.data-77, .site-web .chart-clums .one ul li dl dd.data-77 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-77 i, .site-illust .chart-clums .one ul li dl dd.data-77 i, .site-service .chart-clums .one ul li dl dd.data-77 i, .site-video .chart-clums .one ul li dl dd.data-77 i, .site-web .chart-clums .one ul li dl dd.data-77 i {
  color: #0fd468;
  color: #feae00
}

.site-dtp .chart-clums .one ul li dl dd.data-77:after, .site-dtp .chart-clums .one ul li dl dd.data-77:before, .site-illust .chart-clums .one ul li dl dd.data-77:after, .site-illust .chart-clums .one ul li dl dd.data-77:before, .site-service .chart-clums .one ul li dl dd.data-77:after, .site-service .chart-clums .one ul li dl dd.data-77:before, .site-video .chart-clums .one ul li dl dd.data-77:after, .site-video .chart-clums .one ul li dl dd.data-77:before, .site-web .chart-clums .one ul li dl dd.data-77:after, .site-web .chart-clums .one ul li dl dd.data-77:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #feae00
}

.site-dtp .chart-clums .one ul li dl dd.data-77:after, .site-illust .chart-clums .one ul li dl dd.data-77:after, .site-service .chart-clums .one ul li dl dd.data-77:after, .site-video .chart-clums .one ul li dl dd.data-77:after, .site-web .chart-clums .one ul li dl dd.data-77:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-78, .site-illust .chart-clums .one ul li dl dd.data-78, .site-service .chart-clums .one ul li dl dd.data-78, .site-video .chart-clums .one ul li dl dd.data-78, .site-web .chart-clums .one ul li dl dd.data-78 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-78 i, .site-illust .chart-clums .one ul li dl dd.data-78 i, .site-service .chart-clums .one ul li dl dd.data-78 i, .site-video .chart-clums .one ul li dl dd.data-78 i, .site-web .chart-clums .one ul li dl dd.data-78 i {
  color: #0fd468;
  color: #feae00
}

.site-dtp .chart-clums .one ul li dl dd.data-78:after, .site-dtp .chart-clums .one ul li dl dd.data-78:before, .site-illust .chart-clums .one ul li dl dd.data-78:after, .site-illust .chart-clums .one ul li dl dd.data-78:before, .site-service .chart-clums .one ul li dl dd.data-78:after, .site-service .chart-clums .one ul li dl dd.data-78:before, .site-video .chart-clums .one ul li dl dd.data-78:after, .site-video .chart-clums .one ul li dl dd.data-78:before, .site-web .chart-clums .one ul li dl dd.data-78:after, .site-web .chart-clums .one ul li dl dd.data-78:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #feae00
}

.site-dtp .chart-clums .one ul li dl dd.data-78:after, .site-illust .chart-clums .one ul li dl dd.data-78:after, .site-service .chart-clums .one ul li dl dd.data-78:after, .site-video .chart-clums .one ul li dl dd.data-78:after, .site-web .chart-clums .one ul li dl dd.data-78:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-79, .site-illust .chart-clums .one ul li dl dd.data-79, .site-service .chart-clums .one ul li dl dd.data-79, .site-video .chart-clums .one ul li dl dd.data-79, .site-web .chart-clums .one ul li dl dd.data-79 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-79 i, .site-illust .chart-clums .one ul li dl dd.data-79 i, .site-service .chart-clums .one ul li dl dd.data-79 i, .site-video .chart-clums .one ul li dl dd.data-79 i, .site-web .chart-clums .one ul li dl dd.data-79 i {
  color: #0fd468;
  color: #feae00
}

.site-dtp .chart-clums .one ul li dl dd.data-79:after, .site-dtp .chart-clums .one ul li dl dd.data-79:before, .site-illust .chart-clums .one ul li dl dd.data-79:after, .site-illust .chart-clums .one ul li dl dd.data-79:before, .site-service .chart-clums .one ul li dl dd.data-79:after, .site-service .chart-clums .one ul li dl dd.data-79:before, .site-video .chart-clums .one ul li dl dd.data-79:after, .site-video .chart-clums .one ul li dl dd.data-79:before, .site-web .chart-clums .one ul li dl dd.data-79:after, .site-web .chart-clums .one ul li dl dd.data-79:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12);
  background: #feae00
}

.site-dtp .chart-clums .one ul li dl dd.data-79:after, .site-illust .chart-clums .one ul li dl dd.data-79:after, .site-service .chart-clums .one ul li dl dd.data-79:after, .site-video .chart-clums .one ul li dl dd.data-79:after, .site-web .chart-clums .one ul li dl dd.data-79:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-80, .site-illust .chart-clums .one ul li dl dd.data-80, .site-service .chart-clums .one ul li dl dd.data-80, .site-video .chart-clums .one ul li dl dd.data-80, .site-web .chart-clums .one ul li dl dd.data-80 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-80 i, .site-illust .chart-clums .one ul li dl dd.data-80 i, .site-service .chart-clums .one ul li dl dd.data-80 i, .site-video .chart-clums .one ul li dl dd.data-80 i, .site-web .chart-clums .one ul li dl dd.data-80 i {
  color: #0fd468
}

.site-dtp .chart-clums .one ul li dl dd.data-80:after, .site-dtp .chart-clums .one ul li dl dd.data-80:before, .site-illust .chart-clums .one ul li dl dd.data-80:after, .site-illust .chart-clums .one ul li dl dd.data-80:before, .site-service .chart-clums .one ul li dl dd.data-80:after, .site-service .chart-clums .one ul li dl dd.data-80:before, .site-video .chart-clums .one ul li dl dd.data-80:after, .site-video .chart-clums .one ul li dl dd.data-80:before, .site-web .chart-clums .one ul li dl dd.data-80:after, .site-web .chart-clums .one ul li dl dd.data-80:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12)
}

.site-dtp .chart-clums .one ul li dl dd.data-80:after, .site-illust .chart-clums .one ul li dl dd.data-80:after, .site-service .chart-clums .one ul li dl dd.data-80:after, .site-video .chart-clums .one ul li dl dd.data-80:after, .site-web .chart-clums .one ul li dl dd.data-80:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-81, .site-illust .chart-clums .one ul li dl dd.data-81, .site-service .chart-clums .one ul li dl dd.data-81, .site-video .chart-clums .one ul li dl dd.data-81, .site-web .chart-clums .one ul li dl dd.data-81 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-81 i, .site-illust .chart-clums .one ul li dl dd.data-81 i, .site-service .chart-clums .one ul li dl dd.data-81 i, .site-video .chart-clums .one ul li dl dd.data-81 i, .site-web .chart-clums .one ul li dl dd.data-81 i {
  color: #0fd468
}

.site-dtp .chart-clums .one ul li dl dd.data-81:after, .site-dtp .chart-clums .one ul li dl dd.data-81:before, .site-illust .chart-clums .one ul li dl dd.data-81:after, .site-illust .chart-clums .one ul li dl dd.data-81:before, .site-service .chart-clums .one ul li dl dd.data-81:after, .site-service .chart-clums .one ul li dl dd.data-81:before, .site-video .chart-clums .one ul li dl dd.data-81:after, .site-video .chart-clums .one ul li dl dd.data-81:before, .site-web .chart-clums .one ul li dl dd.data-81:after, .site-web .chart-clums .one ul li dl dd.data-81:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12)
}

.site-dtp .chart-clums .one ul li dl dd.data-81:after, .site-illust .chart-clums .one ul li dl dd.data-81:after, .site-service .chart-clums .one ul li dl dd.data-81:after, .site-video .chart-clums .one ul li dl dd.data-81:after, .site-web .chart-clums .one ul li dl dd.data-81:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-82, .site-illust .chart-clums .one ul li dl dd.data-82, .site-service .chart-clums .one ul li dl dd.data-82, .site-video .chart-clums .one ul li dl dd.data-82, .site-web .chart-clums .one ul li dl dd.data-82 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-82 i, .site-illust .chart-clums .one ul li dl dd.data-82 i, .site-service .chart-clums .one ul li dl dd.data-82 i, .site-video .chart-clums .one ul li dl dd.data-82 i, .site-web .chart-clums .one ul li dl dd.data-82 i {
  color: #0fd468
}

.site-dtp .chart-clums .one ul li dl dd.data-82:after, .site-dtp .chart-clums .one ul li dl dd.data-82:before, .site-illust .chart-clums .one ul li dl dd.data-82:after, .site-illust .chart-clums .one ul li dl dd.data-82:before, .site-service .chart-clums .one ul li dl dd.data-82:after, .site-service .chart-clums .one ul li dl dd.data-82:before, .site-video .chart-clums .one ul li dl dd.data-82:after, .site-video .chart-clums .one ul li dl dd.data-82:before, .site-web .chart-clums .one ul li dl dd.data-82:after, .site-web .chart-clums .one ul li dl dd.data-82:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12)
}

.site-dtp .chart-clums .one ul li dl dd.data-82:after, .site-illust .chart-clums .one ul li dl dd.data-82:after, .site-service .chart-clums .one ul li dl dd.data-82:after, .site-video .chart-clums .one ul li dl dd.data-82:after, .site-web .chart-clums .one ul li dl dd.data-82:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-83, .site-illust .chart-clums .one ul li dl dd.data-83, .site-service .chart-clums .one ul li dl dd.data-83, .site-video .chart-clums .one ul li dl dd.data-83, .site-web .chart-clums .one ul li dl dd.data-83 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-83 i, .site-illust .chart-clums .one ul li dl dd.data-83 i, .site-service .chart-clums .one ul li dl dd.data-83 i, .site-video .chart-clums .one ul li dl dd.data-83 i, .site-web .chart-clums .one ul li dl dd.data-83 i {
  color: #0fd468
}

.site-dtp .chart-clums .one ul li dl dd.data-83:after, .site-dtp .chart-clums .one ul li dl dd.data-83:before, .site-illust .chart-clums .one ul li dl dd.data-83:after, .site-illust .chart-clums .one ul li dl dd.data-83:before, .site-service .chart-clums .one ul li dl dd.data-83:after, .site-service .chart-clums .one ul li dl dd.data-83:before, .site-video .chart-clums .one ul li dl dd.data-83:after, .site-video .chart-clums .one ul li dl dd.data-83:before, .site-web .chart-clums .one ul li dl dd.data-83:after, .site-web .chart-clums .one ul li dl dd.data-83:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12)
}

.site-dtp .chart-clums .one ul li dl dd.data-83:after, .site-illust .chart-clums .one ul li dl dd.data-83:after, .site-service .chart-clums .one ul li dl dd.data-83:after, .site-video .chart-clums .one ul li dl dd.data-83:after, .site-web .chart-clums .one ul li dl dd.data-83:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-84, .site-illust .chart-clums .one ul li dl dd.data-84, .site-service .chart-clums .one ul li dl dd.data-84, .site-video .chart-clums .one ul li dl dd.data-84, .site-web .chart-clums .one ul li dl dd.data-84 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-84 i, .site-illust .chart-clums .one ul li dl dd.data-84 i, .site-service .chart-clums .one ul li dl dd.data-84 i, .site-video .chart-clums .one ul li dl dd.data-84 i, .site-web .chart-clums .one ul li dl dd.data-84 i {
  color: #0fd468
}

.site-dtp .chart-clums .one ul li dl dd.data-84:after, .site-dtp .chart-clums .one ul li dl dd.data-84:before, .site-illust .chart-clums .one ul li dl dd.data-84:after, .site-illust .chart-clums .one ul li dl dd.data-84:before, .site-service .chart-clums .one ul li dl dd.data-84:after, .site-service .chart-clums .one ul li dl dd.data-84:before, .site-video .chart-clums .one ul li dl dd.data-84:after, .site-video .chart-clums .one ul li dl dd.data-84:before, .site-web .chart-clums .one ul li dl dd.data-84:after, .site-web .chart-clums .one ul li dl dd.data-84:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12)
}

.site-dtp .chart-clums .one ul li dl dd.data-84:after, .site-illust .chart-clums .one ul li dl dd.data-84:after, .site-service .chart-clums .one ul li dl dd.data-84:after, .site-video .chart-clums .one ul li dl dd.data-84:after, .site-web .chart-clums .one ul li dl dd.data-84:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-85, .site-illust .chart-clums .one ul li dl dd.data-85, .site-service .chart-clums .one ul li dl dd.data-85, .site-video .chart-clums .one ul li dl dd.data-85, .site-web .chart-clums .one ul li dl dd.data-85 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-85 i, .site-illust .chart-clums .one ul li dl dd.data-85 i, .site-service .chart-clums .one ul li dl dd.data-85 i, .site-video .chart-clums .one ul li dl dd.data-85 i, .site-web .chart-clums .one ul li dl dd.data-85 i {
  color: #0fd468
}

.site-dtp .chart-clums .one ul li dl dd.data-85:after, .site-dtp .chart-clums .one ul li dl dd.data-85:before, .site-illust .chart-clums .one ul li dl dd.data-85:after, .site-illust .chart-clums .one ul li dl dd.data-85:before, .site-service .chart-clums .one ul li dl dd.data-85:after, .site-service .chart-clums .one ul li dl dd.data-85:before, .site-video .chart-clums .one ul li dl dd.data-85:after, .site-video .chart-clums .one ul li dl dd.data-85:before, .site-web .chart-clums .one ul li dl dd.data-85:after, .site-web .chart-clums .one ul li dl dd.data-85:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12)
}

.site-dtp .chart-clums .one ul li dl dd.data-85:after, .site-illust .chart-clums .one ul li dl dd.data-85:after, .site-service .chart-clums .one ul li dl dd.data-85:after, .site-video .chart-clums .one ul li dl dd.data-85:after, .site-web .chart-clums .one ul li dl dd.data-85:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-86, .site-illust .chart-clums .one ul li dl dd.data-86, .site-service .chart-clums .one ul li dl dd.data-86, .site-video .chart-clums .one ul li dl dd.data-86, .site-web .chart-clums .one ul li dl dd.data-86 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-86 i, .site-illust .chart-clums .one ul li dl dd.data-86 i, .site-service .chart-clums .one ul li dl dd.data-86 i, .site-video .chart-clums .one ul li dl dd.data-86 i, .site-web .chart-clums .one ul li dl dd.data-86 i {
  color: #0fd468
}

.site-dtp .chart-clums .one ul li dl dd.data-86:after, .site-dtp .chart-clums .one ul li dl dd.data-86:before, .site-illust .chart-clums .one ul li dl dd.data-86:after, .site-illust .chart-clums .one ul li dl dd.data-86:before, .site-service .chart-clums .one ul li dl dd.data-86:after, .site-service .chart-clums .one ul li dl dd.data-86:before, .site-video .chart-clums .one ul li dl dd.data-86:after, .site-video .chart-clums .one ul li dl dd.data-86:before, .site-web .chart-clums .one ul li dl dd.data-86:after, .site-web .chart-clums .one ul li dl dd.data-86:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12)
}

.site-dtp .chart-clums .one ul li dl dd.data-86:after, .site-illust .chart-clums .one ul li dl dd.data-86:after, .site-service .chart-clums .one ul li dl dd.data-86:after, .site-video .chart-clums .one ul li dl dd.data-86:after, .site-web .chart-clums .one ul li dl dd.data-86:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-87, .site-illust .chart-clums .one ul li dl dd.data-87, .site-service .chart-clums .one ul li dl dd.data-87, .site-video .chart-clums .one ul li dl dd.data-87, .site-web .chart-clums .one ul li dl dd.data-87 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-87 i, .site-illust .chart-clums .one ul li dl dd.data-87 i, .site-service .chart-clums .one ul li dl dd.data-87 i, .site-video .chart-clums .one ul li dl dd.data-87 i, .site-web .chart-clums .one ul li dl dd.data-87 i {
  color: #0fd468
}

.site-dtp .chart-clums .one ul li dl dd.data-87:after, .site-dtp .chart-clums .one ul li dl dd.data-87:before, .site-illust .chart-clums .one ul li dl dd.data-87:after, .site-illust .chart-clums .one ul li dl dd.data-87:before, .site-service .chart-clums .one ul li dl dd.data-87:after, .site-service .chart-clums .one ul li dl dd.data-87:before, .site-video .chart-clums .one ul li dl dd.data-87:after, .site-video .chart-clums .one ul li dl dd.data-87:before, .site-web .chart-clums .one ul li dl dd.data-87:after, .site-web .chart-clums .one ul li dl dd.data-87:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12)
}

.site-dtp .chart-clums .one ul li dl dd.data-87:after, .site-illust .chart-clums .one ul li dl dd.data-87:after, .site-service .chart-clums .one ul li dl dd.data-87:after, .site-video .chart-clums .one ul li dl dd.data-87:after, .site-web .chart-clums .one ul li dl dd.data-87:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-88, .site-illust .chart-clums .one ul li dl dd.data-88, .site-service .chart-clums .one ul li dl dd.data-88, .site-video .chart-clums .one ul li dl dd.data-88, .site-web .chart-clums .one ul li dl dd.data-88 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-88 i, .site-illust .chart-clums .one ul li dl dd.data-88 i, .site-service .chart-clums .one ul li dl dd.data-88 i, .site-video .chart-clums .one ul li dl dd.data-88 i, .site-web .chart-clums .one ul li dl dd.data-88 i {
  color: #0fd468
}

.site-dtp .chart-clums .one ul li dl dd.data-88:after, .site-dtp .chart-clums .one ul li dl dd.data-88:before, .site-illust .chart-clums .one ul li dl dd.data-88:after, .site-illust .chart-clums .one ul li dl dd.data-88:before, .site-service .chart-clums .one ul li dl dd.data-88:after, .site-service .chart-clums .one ul li dl dd.data-88:before, .site-video .chart-clums .one ul li dl dd.data-88:after, .site-video .chart-clums .one ul li dl dd.data-88:before, .site-web .chart-clums .one ul li dl dd.data-88:after, .site-web .chart-clums .one ul li dl dd.data-88:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12)
}

.site-dtp .chart-clums .one ul li dl dd.data-88:after, .site-illust .chart-clums .one ul li dl dd.data-88:after, .site-service .chart-clums .one ul li dl dd.data-88:after, .site-video .chart-clums .one ul li dl dd.data-88:after, .site-web .chart-clums .one ul li dl dd.data-88:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-89, .site-illust .chart-clums .one ul li dl dd.data-89, .site-service .chart-clums .one ul li dl dd.data-89, .site-video .chart-clums .one ul li dl dd.data-89, .site-web .chart-clums .one ul li dl dd.data-89 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-89 i, .site-illust .chart-clums .one ul li dl dd.data-89 i, .site-service .chart-clums .one ul li dl dd.data-89 i, .site-video .chart-clums .one ul li dl dd.data-89 i, .site-web .chart-clums .one ul li dl dd.data-89 i {
  color: #0fd468
}

.site-dtp .chart-clums .one ul li dl dd.data-89:after, .site-dtp .chart-clums .one ul li dl dd.data-89:before, .site-illust .chart-clums .one ul li dl dd.data-89:after, .site-illust .chart-clums .one ul li dl dd.data-89:before, .site-service .chart-clums .one ul li dl dd.data-89:after, .site-service .chart-clums .one ul li dl dd.data-89:before, .site-video .chart-clums .one ul li dl dd.data-89:after, .site-video .chart-clums .one ul li dl dd.data-89:before, .site-web .chart-clums .one ul li dl dd.data-89:after, .site-web .chart-clums .one ul li dl dd.data-89:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12)
}

.site-dtp .chart-clums .one ul li dl dd.data-89:after, .site-illust .chart-clums .one ul li dl dd.data-89:after, .site-service .chart-clums .one ul li dl dd.data-89:after, .site-video .chart-clums .one ul li dl dd.data-89:after, .site-web .chart-clums .one ul li dl dd.data-89:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-90, .site-illust .chart-clums .one ul li dl dd.data-90, .site-service .chart-clums .one ul li dl dd.data-90, .site-video .chart-clums .one ul li dl dd.data-90, .site-web .chart-clums .one ul li dl dd.data-90 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-90 i, .site-illust .chart-clums .one ul li dl dd.data-90 i, .site-service .chart-clums .one ul li dl dd.data-90 i, .site-video .chart-clums .one ul li dl dd.data-90 i, .site-web .chart-clums .one ul li dl dd.data-90 i {
  color: #0fd468
}

.site-dtp .chart-clums .one ul li dl dd.data-90:after, .site-dtp .chart-clums .one ul li dl dd.data-90:before, .site-illust .chart-clums .one ul li dl dd.data-90:after, .site-illust .chart-clums .one ul li dl dd.data-90:before, .site-service .chart-clums .one ul li dl dd.data-90:after, .site-service .chart-clums .one ul li dl dd.data-90:before, .site-video .chart-clums .one ul li dl dd.data-90:after, .site-video .chart-clums .one ul li dl dd.data-90:before, .site-web .chart-clums .one ul li dl dd.data-90:after, .site-web .chart-clums .one ul li dl dd.data-90:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12)
}

.site-dtp .chart-clums .one ul li dl dd.data-90:after, .site-illust .chart-clums .one ul li dl dd.data-90:after, .site-service .chart-clums .one ul li dl dd.data-90:after, .site-video .chart-clums .one ul li dl dd.data-90:after, .site-web .chart-clums .one ul li dl dd.data-90:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-91, .site-illust .chart-clums .one ul li dl dd.data-91, .site-service .chart-clums .one ul li dl dd.data-91, .site-video .chart-clums .one ul li dl dd.data-91, .site-web .chart-clums .one ul li dl dd.data-91 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-91 i, .site-illust .chart-clums .one ul li dl dd.data-91 i, .site-service .chart-clums .one ul li dl dd.data-91 i, .site-video .chart-clums .one ul li dl dd.data-91 i, .site-web .chart-clums .one ul li dl dd.data-91 i {
  color: #0fd468
}

.site-dtp .chart-clums .one ul li dl dd.data-91:after, .site-dtp .chart-clums .one ul li dl dd.data-91:before, .site-illust .chart-clums .one ul li dl dd.data-91:after, .site-illust .chart-clums .one ul li dl dd.data-91:before, .site-service .chart-clums .one ul li dl dd.data-91:after, .site-service .chart-clums .one ul li dl dd.data-91:before, .site-video .chart-clums .one ul li dl dd.data-91:after, .site-video .chart-clums .one ul li dl dd.data-91:before, .site-web .chart-clums .one ul li dl dd.data-91:after, .site-web .chart-clums .one ul li dl dd.data-91:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12)
}

.site-dtp .chart-clums .one ul li dl dd.data-91:after, .site-illust .chart-clums .one ul li dl dd.data-91:after, .site-service .chart-clums .one ul li dl dd.data-91:after, .site-video .chart-clums .one ul li dl dd.data-91:after, .site-web .chart-clums .one ul li dl dd.data-91:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-92, .site-illust .chart-clums .one ul li dl dd.data-92, .site-service .chart-clums .one ul li dl dd.data-92, .site-video .chart-clums .one ul li dl dd.data-92, .site-web .chart-clums .one ul li dl dd.data-92 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-92 i, .site-illust .chart-clums .one ul li dl dd.data-92 i, .site-service .chart-clums .one ul li dl dd.data-92 i, .site-video .chart-clums .one ul li dl dd.data-92 i, .site-web .chart-clums .one ul li dl dd.data-92 i {
  color: #0fd468
}

.site-dtp .chart-clums .one ul li dl dd.data-92:after, .site-dtp .chart-clums .one ul li dl dd.data-92:before, .site-illust .chart-clums .one ul li dl dd.data-92:after, .site-illust .chart-clums .one ul li dl dd.data-92:before, .site-service .chart-clums .one ul li dl dd.data-92:after, .site-service .chart-clums .one ul li dl dd.data-92:before, .site-video .chart-clums .one ul li dl dd.data-92:after, .site-video .chart-clums .one ul li dl dd.data-92:before, .site-web .chart-clums .one ul li dl dd.data-92:after, .site-web .chart-clums .one ul li dl dd.data-92:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12)
}

.site-dtp .chart-clums .one ul li dl dd.data-92:after, .site-illust .chart-clums .one ul li dl dd.data-92:after, .site-service .chart-clums .one ul li dl dd.data-92:after, .site-video .chart-clums .one ul li dl dd.data-92:after, .site-web .chart-clums .one ul li dl dd.data-92:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-93, .site-illust .chart-clums .one ul li dl dd.data-93, .site-service .chart-clums .one ul li dl dd.data-93, .site-video .chart-clums .one ul li dl dd.data-93, .site-web .chart-clums .one ul li dl dd.data-93 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-93 i, .site-illust .chart-clums .one ul li dl dd.data-93 i, .site-service .chart-clums .one ul li dl dd.data-93 i, .site-video .chart-clums .one ul li dl dd.data-93 i, .site-web .chart-clums .one ul li dl dd.data-93 i {
  color: #0fd468
}

.site-dtp .chart-clums .one ul li dl dd.data-93:after, .site-dtp .chart-clums .one ul li dl dd.data-93:before, .site-illust .chart-clums .one ul li dl dd.data-93:after, .site-illust .chart-clums .one ul li dl dd.data-93:before, .site-service .chart-clums .one ul li dl dd.data-93:after, .site-service .chart-clums .one ul li dl dd.data-93:before, .site-video .chart-clums .one ul li dl dd.data-93:after, .site-video .chart-clums .one ul li dl dd.data-93:before, .site-web .chart-clums .one ul li dl dd.data-93:after, .site-web .chart-clums .one ul li dl dd.data-93:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12)
}

.site-dtp .chart-clums .one ul li dl dd.data-93:after, .site-illust .chart-clums .one ul li dl dd.data-93:after, .site-service .chart-clums .one ul li dl dd.data-93:after, .site-video .chart-clums .one ul li dl dd.data-93:after, .site-web .chart-clums .one ul li dl dd.data-93:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-94, .site-illust .chart-clums .one ul li dl dd.data-94, .site-service .chart-clums .one ul li dl dd.data-94, .site-video .chart-clums .one ul li dl dd.data-94, .site-web .chart-clums .one ul li dl dd.data-94 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-94 i, .site-illust .chart-clums .one ul li dl dd.data-94 i, .site-service .chart-clums .one ul li dl dd.data-94 i, .site-video .chart-clums .one ul li dl dd.data-94 i, .site-web .chart-clums .one ul li dl dd.data-94 i {
  color: #0fd468
}

.site-dtp .chart-clums .one ul li dl dd.data-94:after, .site-dtp .chart-clums .one ul li dl dd.data-94:before, .site-illust .chart-clums .one ul li dl dd.data-94:after, .site-illust .chart-clums .one ul li dl dd.data-94:before, .site-service .chart-clums .one ul li dl dd.data-94:after, .site-service .chart-clums .one ul li dl dd.data-94:before, .site-video .chart-clums .one ul li dl dd.data-94:after, .site-video .chart-clums .one ul li dl dd.data-94:before, .site-web .chart-clums .one ul li dl dd.data-94:after, .site-web .chart-clums .one ul li dl dd.data-94:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12)
}

.site-dtp .chart-clums .one ul li dl dd.data-94:after, .site-illust .chart-clums .one ul li dl dd.data-94:after, .site-service .chart-clums .one ul li dl dd.data-94:after, .site-video .chart-clums .one ul li dl dd.data-94:after, .site-web .chart-clums .one ul li dl dd.data-94:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-95, .site-illust .chart-clums .one ul li dl dd.data-95, .site-service .chart-clums .one ul li dl dd.data-95, .site-video .chart-clums .one ul li dl dd.data-95, .site-web .chart-clums .one ul li dl dd.data-95 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-95 i, .site-illust .chart-clums .one ul li dl dd.data-95 i, .site-service .chart-clums .one ul li dl dd.data-95 i, .site-video .chart-clums .one ul li dl dd.data-95 i, .site-web .chart-clums .one ul li dl dd.data-95 i {
  color: #0fd468
}

.site-dtp .chart-clums .one ul li dl dd.data-95:after, .site-dtp .chart-clums .one ul li dl dd.data-95:before, .site-illust .chart-clums .one ul li dl dd.data-95:after, .site-illust .chart-clums .one ul li dl dd.data-95:before, .site-service .chart-clums .one ul li dl dd.data-95:after, .site-service .chart-clums .one ul li dl dd.data-95:before, .site-video .chart-clums .one ul li dl dd.data-95:after, .site-video .chart-clums .one ul li dl dd.data-95:before, .site-web .chart-clums .one ul li dl dd.data-95:after, .site-web .chart-clums .one ul li dl dd.data-95:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12)
}

.site-dtp .chart-clums .one ul li dl dd.data-95:after, .site-illust .chart-clums .one ul li dl dd.data-95:after, .site-service .chart-clums .one ul li dl dd.data-95:after, .site-video .chart-clums .one ul li dl dd.data-95:after, .site-web .chart-clums .one ul li dl dd.data-95:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-96, .site-illust .chart-clums .one ul li dl dd.data-96, .site-service .chart-clums .one ul li dl dd.data-96, .site-video .chart-clums .one ul li dl dd.data-96, .site-web .chart-clums .one ul li dl dd.data-96 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-96 i, .site-illust .chart-clums .one ul li dl dd.data-96 i, .site-service .chart-clums .one ul li dl dd.data-96 i, .site-video .chart-clums .one ul li dl dd.data-96 i, .site-web .chart-clums .one ul li dl dd.data-96 i {
  color: #0fd468
}

.site-dtp .chart-clums .one ul li dl dd.data-96:after, .site-dtp .chart-clums .one ul li dl dd.data-96:before, .site-illust .chart-clums .one ul li dl dd.data-96:after, .site-illust .chart-clums .one ul li dl dd.data-96:before, .site-service .chart-clums .one ul li dl dd.data-96:after, .site-service .chart-clums .one ul li dl dd.data-96:before, .site-video .chart-clums .one ul li dl dd.data-96:after, .site-video .chart-clums .one ul li dl dd.data-96:before, .site-web .chart-clums .one ul li dl dd.data-96:after, .site-web .chart-clums .one ul li dl dd.data-96:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12)
}

.site-dtp .chart-clums .one ul li dl dd.data-96:after, .site-illust .chart-clums .one ul li dl dd.data-96:after, .site-service .chart-clums .one ul li dl dd.data-96:after, .site-video .chart-clums .one ul li dl dd.data-96:after, .site-web .chart-clums .one ul li dl dd.data-96:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-97, .site-illust .chart-clums .one ul li dl dd.data-97, .site-service .chart-clums .one ul li dl dd.data-97, .site-video .chart-clums .one ul li dl dd.data-97, .site-web .chart-clums .one ul li dl dd.data-97 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-97 i, .site-illust .chart-clums .one ul li dl dd.data-97 i, .site-service .chart-clums .one ul li dl dd.data-97 i, .site-video .chart-clums .one ul li dl dd.data-97 i, .site-web .chart-clums .one ul li dl dd.data-97 i {
  color: #0fd468
}

.site-dtp .chart-clums .one ul li dl dd.data-97:after, .site-dtp .chart-clums .one ul li dl dd.data-97:before, .site-illust .chart-clums .one ul li dl dd.data-97:after, .site-illust .chart-clums .one ul li dl dd.data-97:before, .site-service .chart-clums .one ul li dl dd.data-97:after, .site-service .chart-clums .one ul li dl dd.data-97:before, .site-video .chart-clums .one ul li dl dd.data-97:after, .site-video .chart-clums .one ul li dl dd.data-97:before, .site-web .chart-clums .one ul li dl dd.data-97:after, .site-web .chart-clums .one ul li dl dd.data-97:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12)
}

.site-dtp .chart-clums .one ul li dl dd.data-97:after, .site-illust .chart-clums .one ul li dl dd.data-97:after, .site-service .chart-clums .one ul li dl dd.data-97:after, .site-video .chart-clums .one ul li dl dd.data-97:after, .site-web .chart-clums .one ul li dl dd.data-97:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-98, .site-illust .chart-clums .one ul li dl dd.data-98, .site-service .chart-clums .one ul li dl dd.data-98, .site-video .chart-clums .one ul li dl dd.data-98, .site-web .chart-clums .one ul li dl dd.data-98 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-98 i, .site-illust .chart-clums .one ul li dl dd.data-98 i, .site-service .chart-clums .one ul li dl dd.data-98 i, .site-video .chart-clums .one ul li dl dd.data-98 i, .site-web .chart-clums .one ul li dl dd.data-98 i {
  color: #0fd468
}

.site-dtp .chart-clums .one ul li dl dd.data-98:after, .site-dtp .chart-clums .one ul li dl dd.data-98:before, .site-illust .chart-clums .one ul li dl dd.data-98:after, .site-illust .chart-clums .one ul li dl dd.data-98:before, .site-service .chart-clums .one ul li dl dd.data-98:after, .site-service .chart-clums .one ul li dl dd.data-98:before, .site-video .chart-clums .one ul li dl dd.data-98:after, .site-video .chart-clums .one ul li dl dd.data-98:before, .site-web .chart-clums .one ul li dl dd.data-98:after, .site-web .chart-clums .one ul li dl dd.data-98:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12)
}

.site-dtp .chart-clums .one ul li dl dd.data-98:after, .site-illust .chart-clums .one ul li dl dd.data-98:after, .site-service .chart-clums .one ul li dl dd.data-98:after, .site-video .chart-clums .one ul li dl dd.data-98:after, .site-web .chart-clums .one ul li dl dd.data-98:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-99, .site-illust .chart-clums .one ul li dl dd.data-99, .site-service .chart-clums .one ul li dl dd.data-99, .site-video .chart-clums .one ul li dl dd.data-99, .site-web .chart-clums .one ul li dl dd.data-99 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-99 i, .site-illust .chart-clums .one ul li dl dd.data-99 i, .site-service .chart-clums .one ul li dl dd.data-99 i, .site-video .chart-clums .one ul li dl dd.data-99 i, .site-web .chart-clums .one ul li dl dd.data-99 i {
  color: #0fd468
}

.site-dtp .chart-clums .one ul li dl dd.data-99:after, .site-dtp .chart-clums .one ul li dl dd.data-99:before, .site-illust .chart-clums .one ul li dl dd.data-99:after, .site-illust .chart-clums .one ul li dl dd.data-99:before, .site-service .chart-clums .one ul li dl dd.data-99:after, .site-service .chart-clums .one ul li dl dd.data-99:before, .site-video .chart-clums .one ul li dl dd.data-99:after, .site-video .chart-clums .one ul li dl dd.data-99:before, .site-web .chart-clums .one ul li dl dd.data-99:after, .site-web .chart-clums .one ul li dl dd.data-99:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12)
}

.site-dtp .chart-clums .one ul li dl dd.data-99:after, .site-illust .chart-clums .one ul li dl dd.data-99:after, .site-service .chart-clums .one ul li dl dd.data-99:after, .site-video .chart-clums .one ul li dl dd.data-99:after, .site-web .chart-clums .one ul li dl dd.data-99:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .chart-clums .one ul li dl dd.data-100, .site-illust .chart-clums .one ul li dl dd.data-100, .site-service .chart-clums .one ul li dl dd.data-100, .site-video .chart-clums .one ul li dl dd.data-100, .site-web .chart-clums .one ul li dl dd.data-100 {
  font-size: 14px
}

.site-dtp .chart-clums .one ul li dl dd.data-100 i, .site-illust .chart-clums .one ul li dl dd.data-100 i, .site-service .chart-clums .one ul li dl dd.data-100 i, .site-video .chart-clums .one ul li dl dd.data-100 i, .site-web .chart-clums .one ul li dl dd.data-100 i {
  color: #0fd468
}

.site-dtp .chart-clums .one ul li dl dd.data-100:after, .site-dtp .chart-clums .one ul li dl dd.data-100:before, .site-illust .chart-clums .one ul li dl dd.data-100:after, .site-illust .chart-clums .one ul li dl dd.data-100:before, .site-service .chart-clums .one ul li dl dd.data-100:after, .site-service .chart-clums .one ul li dl dd.data-100:before, .site-video .chart-clums .one ul li dl dd.data-100:after, .site-video .chart-clums .one ul li dl dd.data-100:before, .site-web .chart-clums .one ul li dl dd.data-100:after, .site-web .chart-clums .one ul li dl dd.data-100:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 60%;
  transform: translateY(-50%);
  width: 0;
  background: #0fd468;
  z-index: -1;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12)
}

.site-dtp .chart-clums .one ul li dl dd.data-100:after, .site-illust .chart-clums .one ul li dl dd.data-100:after, .site-service .chart-clums .one ul li dl dd.data-100:after, .site-video .chart-clums .one ul li dl dd.data-100:after, .site-web .chart-clums .one ul li dl dd.data-100:after {
  width: calc(100% - 60px);
  background: #f6f6f8;
  z-index: -2
}

.site-dtp .small, .site-illust .small, .site-service .small, .site-video .small, .site-web .small {
  text-align: right;
  font-size: 10px;
  margin: 16px 0 0;
  width: 100%
}

.site-dtp .chart-text, .site-illust .chart-text, .site-service .chart-text, .site-video .chart-text, .site-web .chart-text {
  background: #f6f6f8;
  padding: 48px;
  margin: 0;
  font-size: 14px;
  text-align: center
}

.site-dtp .chart-text strong, .site-illust .chart-text strong, .site-service .chart-text strong, .site-video .chart-text strong, .site-web .chart-text strong {
  font-size: 18px;
  font-weight: 700;
  display: inline-block;
  padding: 0 0 16px
}

@media screen and (max-width:768px) {
  .site-dtp .chart-text strong, .site-illust .chart-text strong, .site-service .chart-text strong, .site-video .chart-text strong, .site-web .chart-text strong {
    font-size: 15px
  }
}

@media screen and (max-width:768px) {
  .site-dtp .chart-text, .site-illust .chart-text, .site-service .chart-text, .site-video .chart-text, .site-web .chart-text {
    padding: 15px;
    text-align: justify;
    margin: 32px 0 0;
    font-size: 13px
  }
  .site-dtp .chart-text br, .site-illust .chart-text br, .site-service .chart-text br, .site-video .chart-text br, .site-web .chart-text br {
    display: none
  }
}

@media screen and (max-width:768px) {
  .site-dtp .site-module .tableScroll, .site-illust .site-module .tableScroll, .site-service .site-module .tableScroll, .site-video .site-module .tableScroll, .site-web .site-module .tableScroll {
    overflow: auto;
    position: relative;
    padding: 32px 0 0
  }
  .site-dtp .site-module .tableScroll:after, .site-dtp .site-module .tableScroll:before, .site-illust .site-module .tableScroll:after, .site-illust .site-module .tableScroll:before, .site-service .site-module .tableScroll:after, .site-service .site-module .tableScroll:before, .site-video .site-module .tableScroll:after, .site-video .site-module .tableScroll:before, .site-web .site-module .tableScroll:after, .site-web .site-module .tableScroll:before {
    font-size: 12px
  }
  .site-dtp .site-module .tableScroll:before, .site-illust .site-module .tableScroll:before, .site-service .site-module .tableScroll:before, .site-video .site-module .tableScroll:before, .site-web .site-module .tableScroll:before {
    content: '\f362';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: -4px;
    left: 0;
    font-size: 14px;
    color: #F4D780
  }
  .site-dtp .site-module .tableScroll:after, .site-illust .site-module .tableScroll:after, .site-service .site-module .tableScroll:after, .site-video .site-module .tableScroll:after, .site-web .site-module .tableScroll:after {
    content: 'スクロールしてご覧ください';
    position: absolute;
    top: 2px;
    left: 24px;
    line-height: 1
  }
}

.site-dtp .site-module .tableScroll .form-style, .site-illust .site-module .tableScroll .form-style, .site-service .site-module .tableScroll .form-style, .site-video .site-module .tableScroll .form-style, .site-web .site-module .tableScroll .form-style {
  background: #fff
}

@media screen and (max-width:768px) {
  .site-dtp .site-module .tableScroll .form-style, .site-illust .site-module .tableScroll .form-style, .site-service .site-module .tableScroll .form-style, .site-video .site-module .tableScroll .form-style, .site-web .site-module .tableScroll .form-style {
    width: 200%
  }
}

.site-dtp .site-module .tableScroll .form-style tbody tr td, .site-dtp .site-module .tableScroll .form-style tbody tr th, .site-dtp .site-module .tableScroll .form-style thead tr td, .site-dtp .site-module .tableScroll .form-style thead tr th, .site-illust .site-module .tableScroll .form-style tbody tr td, .site-illust .site-module .tableScroll .form-style tbody tr th, .site-illust .site-module .tableScroll .form-style thead tr td, .site-illust .site-module .tableScroll .form-style thead tr th, .site-service .site-module .tableScroll .form-style tbody tr td, .site-service .site-module .tableScroll .form-style tbody tr th, .site-service .site-module .tableScroll .form-style thead tr td, .site-service .site-module .tableScroll .form-style thead tr th, .site-video .site-module .tableScroll .form-style tbody tr td, .site-video .site-module .tableScroll .form-style tbody tr th, .site-video .site-module .tableScroll .form-style thead tr td, .site-video .site-module .tableScroll .form-style thead tr th, .site-web .site-module .tableScroll .form-style tbody tr td, .site-web .site-module .tableScroll .form-style tbody tr th, .site-web .site-module .tableScroll .form-style thead tr td, .site-web .site-module .tableScroll .form-style thead tr th {
  border: #e8e8e8 1px solid;
  text-align: center;
  padding-left: 24px;
  padding-right: 24px
}

@media screen and (max-width:768px) {
  .site-dtp .site-module .tableScroll .form-style tbody tr td, .site-dtp .site-module .tableScroll .form-style tbody tr th, .site-dtp .site-module .tableScroll .form-style thead tr td, .site-dtp .site-module .tableScroll .form-style thead tr th, .site-illust .site-module .tableScroll .form-style tbody tr td, .site-illust .site-module .tableScroll .form-style tbody tr th, .site-illust .site-module .tableScroll .form-style thead tr td, .site-illust .site-module .tableScroll .form-style thead tr th, .site-service .site-module .tableScroll .form-style tbody tr td, .site-service .site-module .tableScroll .form-style tbody tr th, .site-service .site-module .tableScroll .form-style thead tr td, .site-service .site-module .tableScroll .form-style thead tr th, .site-video .site-module .tableScroll .form-style tbody tr td, .site-video .site-module .tableScroll .form-style tbody tr th, .site-video .site-module .tableScroll .form-style thead tr td, .site-video .site-module .tableScroll .form-style thead tr th, .site-web .site-module .tableScroll .form-style tbody tr td, .site-web .site-module .tableScroll .form-style tbody tr th, .site-web .site-module .tableScroll .form-style thead tr td, .site-web .site-module .tableScroll .form-style thead tr th {
    width: 25%;
    background: #fff;
    padding-left: 20px;
    padding-right: 20px
  }
}

.site-dtp .site-module .tableScroll .form-style tbody tr td.left, .site-dtp .site-module .tableScroll .form-style tbody tr th.left, .site-dtp .site-module .tableScroll .form-style thead tr td.left, .site-dtp .site-module .tableScroll .form-style thead tr th.left, .site-illust .site-module .tableScroll .form-style tbody tr td.left, .site-illust .site-module .tableScroll .form-style tbody tr th.left, .site-illust .site-module .tableScroll .form-style thead tr td.left, .site-illust .site-module .tableScroll .form-style thead tr th.left, .site-service .site-module .tableScroll .form-style tbody tr td.left, .site-service .site-module .tableScroll .form-style tbody tr th.left, .site-service .site-module .tableScroll .form-style thead tr td.left, .site-service .site-module .tableScroll .form-style thead tr th.left, .site-video .site-module .tableScroll .form-style tbody tr td.left, .site-video .site-module .tableScroll .form-style tbody tr th.left, .site-video .site-module .tableScroll .form-style thead tr td.left, .site-video .site-module .tableScroll .form-style thead tr th.left, .site-web .site-module .tableScroll .form-style tbody tr td.left, .site-web .site-module .tableScroll .form-style tbody tr th.left, .site-web .site-module .tableScroll .form-style thead tr td.left, .site-web .site-module .tableScroll .form-style thead tr th.left {
  text-align: left
}

.site-dtp .site-module .tableScroll .form-style tbody tr td i.fas, .site-dtp .site-module .tableScroll .form-style tbody tr th i.fas, .site-dtp .site-module .tableScroll .form-style thead tr td i.fas, .site-dtp .site-module .tableScroll .form-style thead tr th i.fas, .site-illust .site-module .tableScroll .form-style tbody tr td i.fas, .site-illust .site-module .tableScroll .form-style tbody tr th i.fas, .site-illust .site-module .tableScroll .form-style thead tr td i.fas, .site-illust .site-module .tableScroll .form-style thead tr th i.fas, .site-service .site-module .tableScroll .form-style tbody tr td i.fas, .site-service .site-module .tableScroll .form-style tbody tr th i.fas, .site-service .site-module .tableScroll .form-style thead tr td i.fas, .site-service .site-module .tableScroll .form-style thead tr th i.fas, .site-video .site-module .tableScroll .form-style tbody tr td i.fas, .site-video .site-module .tableScroll .form-style tbody tr th i.fas, .site-video .site-module .tableScroll .form-style thead tr td i.fas, .site-video .site-module .tableScroll .form-style thead tr th i.fas, .site-web .site-module .tableScroll .form-style tbody tr td i.fas, .site-web .site-module .tableScroll .form-style tbody tr th i.fas, .site-web .site-module .tableScroll .form-style thead tr td i.fas, .site-web .site-module .tableScroll .form-style thead tr th i.fas {
  color: #F4D780;
  font-size: 22px
}

.site-dtp .site-module .tableScroll .form-style thead tr td, .site-illust .site-module .tableScroll .form-style thead tr td, .site-service .site-module .tableScroll .form-style thead tr td, .site-video .site-module .tableScroll .form-style thead tr td, .site-web .site-module .tableScroll .form-style thead tr td {
  font-weight: 700
}

.site-dtp .fullset, .site-illust .fullset, .site-service .fullset, .site-video .fullset, .site-web .fullset {
  position: relative;
  top: 0;
  left: 0
}

.site-dtp .fullset .bg, .site-illust .fullset .bg, .site-service .fullset .bg, .site-video .fullset .bg, .site-web .fullset .bg {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover
}

@media screen and (max-width:768px) {
  .site-dtp .fullset .bg, .site-illust .fullset .bg, .site-service .fullset .bg, .site-video .fullset .bg, .site-web .fullset .bg {
    position: relative;
    width: 100%;
    height: 160px
  }
}

.site-dtp .fullset dl, .site-illust .fullset dl, .site-service .fullset dl, .site-video .fullset dl, .site-web .fullset dl {
  width: 50%;
  padding: 56px 0;
  float: right;
  padding-left: 56px
}

@media screen and (max-width:768px) {
  .site-dtp .fullset dl, .site-illust .fullset dl, .site-service .fullset dl, .site-video .fullset dl, .site-web .fullset dl {
    width: auto;
    padding: 15px 0 0
  }
}

.site-dtp .fullset dl dt, .site-illust .fullset dl dt, .site-service .fullset dl dt, .site-video .fullset dl dt, .site-web .fullset dl dt {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 24px;
  line-height: 1.56
}

@media screen and (max-width:768px) {
  .site-dtp .fullset dl dt, .site-illust .fullset dl dt, .site-service .fullset dl dt, .site-video .fullset dl dt, .site-web .fullset dl dt {
    font-size: 20px;
    margin: 16px 0;
    text-align: center
  }
}

.site-dtp .fullset dl dt:before, .site-illust .fullset dl dt:before, .site-service .fullset dl dt:before, .site-video .fullset dl dt:before, .site-web .fullset dl dt:before {
  content: attr(data-eng);
  display: block;
  font-size: 13px;
  text-indent: .1em;
  margin: 0 0 12px;
  opacity: .16
}

@media screen and (max-width:768px) {
  .site-dtp .fullset dl dt:before, .site-illust .fullset dl dt:before, .site-service .fullset dl dt:before, .site-video .fullset dl dt:before, .site-web .fullset dl dt:before {
    font-size: 11px;
    margin: 0 0 8px;
    text-indent: 0
  }
}

.site-dtp .fullset dl dd, .site-illust .fullset dl dd, .site-service .fullset dl dd, .site-video .fullset dl dd, .site-web .fullset dl dd {
  text-align: justify
}

@media screen and (max-width:768px) {
  .site-dtp .fullset dl dd:first-of-type, .site-illust .fullset dl dd:first-of-type, .site-service .fullset dl dd:first-of-type, .site-video .fullset dl dd:first-of-type, .site-web .fullset dl dd:first-of-type {
    margin: 0 15px
  }
}

.site-dtp .flow, .site-illust .flow, .site-service .flow, .site-video .flow, .site-web .flow {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between
}

@media screen and (max-width:768px) {
  .site-dtp .flow, .site-illust .flow, .site-service .flow, .site-video .flow, .site-web .flow {
    display: block
  }
}

.site-dtp .flow li, .site-illust .flow li, .site-service .flow li, .site-video .flow li, .site-web .flow li {
  list-style: none;
  width: 20%;
  background: #f6f6f8;
  border-right: #fff 2px solid;
  padding: 24px;
  padding-top: 0;
  position: relative;
  top: 0;
  left: 0
}

@media screen and (max-width:768px) {
  .site-dtp .flow li, .site-illust .flow li, .site-service .flow li, .site-video .flow li, .site-web .flow li {
    width: auto;
    margin: 0 0 24px;
    padding: 20px
  }
  .site-dtp .flow li:after, .site-illust .flow li:after, .site-service .flow li:after, .site-video .flow li:after, .site-web .flow li:after {
    clear: both;
    display: block;
    content: ''
  }
}

.site-dtp .flow li:last-child, .site-illust .flow li:last-child, .site-service .flow li:last-child, .site-video .flow li:last-child, .site-web .flow li:last-child {
  border: none
}

.site-dtp .flow li:before, .site-illust .flow li:before, .site-service .flow li:before, .site-video .flow li:before, .site-web .flow li:before {
  position: absolute;
  top: 0;
  right: 0;
  background: #F4D780;
  width: 32px;
  height: 32px;
  line-height: 32px;
  color: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: 700
}

.site-dtp .flow li:nth-child(1):before, .site-illust .flow li:nth-child(1):before, .site-service .flow li:nth-child(1):before, .site-video .flow li:nth-child(1):before, .site-web .flow li:nth-child(1):before {
  content: "1"
}

.site-dtp .flow li:nth-child(2):before, .site-illust .flow li:nth-child(2):before, .site-service .flow li:nth-child(2):before, .site-video .flow li:nth-child(2):before, .site-web .flow li:nth-child(2):before {
  content: "2"
}

.site-dtp .flow li:nth-child(3):before, .site-illust .flow li:nth-child(3):before, .site-service .flow li:nth-child(3):before, .site-video .flow li:nth-child(3):before, .site-web .flow li:nth-child(3):before {
  content: "3"
}

.site-dtp .flow li:nth-child(4):before, .site-illust .flow li:nth-child(4):before, .site-service .flow li:nth-child(4):before, .site-video .flow li:nth-child(4):before, .site-web .flow li:nth-child(4):before {
  content: "4"
}

.site-dtp .flow li:nth-child(5):before, .site-illust .flow li:nth-child(5):before, .site-service .flow li:nth-child(5):before, .site-video .flow li:nth-child(5):before, .site-web .flow li:nth-child(5):before {
  content: "5"
}

.site-dtp .flow li:nth-child(6):before, .site-illust .flow li:nth-child(6):before, .site-service .flow li:nth-child(6):before, .site-video .flow li:nth-child(6):before, .site-web .flow li:nth-child(6):before {
  content: "6"
}

.site-dtp .flow li:nth-child(7):before, .site-illust .flow li:nth-child(7):before, .site-service .flow li:nth-child(7):before, .site-video .flow li:nth-child(7):before, .site-web .flow li:nth-child(7):before {
  content: "7"
}

.site-dtp .flow li:nth-child(8):before, .site-illust .flow li:nth-child(8):before, .site-service .flow li:nth-child(8):before, .site-video .flow li:nth-child(8):before, .site-web .flow li:nth-child(8):before {
  content: "8"
}

.site-dtp .flow li:nth-child(9):before, .site-illust .flow li:nth-child(9):before, .site-service .flow li:nth-child(9):before, .site-video .flow li:nth-child(9):before, .site-web .flow li:nth-child(9):before {
  content: "9"
}

.site-dtp .flow li i, .site-illust .flow li i, .site-service .flow li i, .site-video .flow li i, .site-web .flow li i {
  display: block;
  padding: 48px 0 32px;
  margin: 0 auto;
  font-size: 44px;
  text-align: center;
  opacity: .24
}

@media screen and (max-width:768px) {
  .site-dtp .flow li i, .site-illust .flow li i, .site-service .flow li i, .site-video .flow li i, .site-web .flow li i {
    padding: 0;
    font-size: 24px;
    float: left;
    margin: 0 16px 0 0
  }
}

.site-dtp .flow li dl dt, .site-illust .flow li dl dt, .site-service .flow li dl dt, .site-video .flow li dl dt, .site-web .flow li dl dt {
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px
}

@media screen and (max-width:768px) {
  .site-dtp .flow li dl dt, .site-illust .flow li dl dt, .site-service .flow li dl dt, .site-video .flow li dl dt, .site-web .flow li dl dt {
    margin: 0;
    text-align: left;
    transform: translateY(-4px)
  }
}

.site-dtp .flow li dl dd, .site-illust .flow li dl dd, .site-service .flow li dl dd, .site-video .flow li dl dd, .site-web .flow li dl dd {
  font-size: 13px;
  text-align: justify
}

@media screen and (max-width:768px) {
  .site-dtp .flow li dl dd, .site-illust .flow li dl dd, .site-service .flow li dl dd, .site-video .flow li dl dd, .site-web .flow li dl dd {
    clear: both;
    padding: 8px 0 0
  }
}

.site-dtp .flow li dl dd.btnarea, .site-illust .flow li dl dd.btnarea, .site-service .flow li dl dd.btnarea, .site-video .flow li dl dd.btnarea, .site-web .flow li dl dd.btnarea {
  text-align: center;
  margin: 12px 0 0
}

.site-dtp .flow li dl dd.btnarea a, .site-illust .flow li dl dd.btnarea a, .site-service .flow li dl dd.btnarea a, .site-video .flow li dl dd.btnarea a, .site-web .flow li dl dd.btnarea a {
  font-size: 14px;
  border-radius: 6px;
  border-color: #F4D780;
  background: #F4D780;
  padding: 8px 0
}

.site-dtp .flow li dl dd.btnarea a:hover, .site-illust .flow li dl dd.btnarea a:hover, .site-service .flow li dl dd.btnarea a:hover, .site-video .flow li dl dd.btnarea a:hover, .site-web .flow li dl dd.btnarea a:hover {
  background: #fff;
  color: #F4D780
}

.site-dtp .answers li, .site-illust .answers li, .site-service .answers li, .site-video .answers li, .site-web .answers li {
  list-style: none;
  margin: 0 0 24px
}

.site-dtp .answers li:last-child, .site-illust .answers li:last-child, .site-service .answers li:last-child, .site-video .answers li:last-child, .site-web .answers li:last-child {
  margin: 0
}

.site-dtp .answers li dl, .site-illust .answers li dl, .site-service .answers li dl, .site-video .answers li dl, .site-web .answers li dl {
  background: #fff;
  padding: 0 32px;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .08);
  border: #e8e8e8 1px solid;
  transition: all .2s 0s cubic-bezier(.455, .03, .515, .955)
}

@media screen and (max-width:768px) {
  .site-dtp .answers li dl, .site-illust .answers li dl, .site-service .answers li dl, .site-video .answers li dl, .site-web .answers li dl {
    padding: 0 20px
  }
}

.site-dtp .answers li dl dd, .site-dtp .answers li dl dt, .site-illust .answers li dl dd, .site-illust .answers li dl dt, .site-service .answers li dl dd, .site-service .answers li dl dt, .site-video .answers li dl dd, .site-video .answers li dl dt, .site-web .answers li dl dd, .site-web .answers li dl dt {
  padding: 24px 0;
  padding-left: 32px;
  position: relative;
  top: 0;
  left: 0;
  font-size: 15px
}

@media screen and (max-width:768px) {
  .site-dtp .answers li dl dd, .site-dtp .answers li dl dt, .site-illust .answers li dl dd, .site-illust .answers li dl dt, .site-service .answers li dl dd, .site-service .answers li dl dt, .site-video .answers li dl dd, .site-video .answers li dl dt, .site-web .answers li dl dd, .site-web .answers li dl dt {
    padding: 20px 0;
    padding-left: 32px;
    font-size: 13px
  }
}

.site-dtp .answers li dl dd:before, .site-dtp .answers li dl dt:before, .site-illust .answers li dl dd:before, .site-illust .answers li dl dt:before, .site-service .answers li dl dd:before, .site-service .answers li dl dt:before, .site-video .answers li dl dd:before, .site-video .answers li dl dt:before, .site-web .answers li dl dd:before, .site-web .answers li dl dt:before {
  position: absolute;
  left: 0;
  top: 20px;
  color: #F4D780;
  font-size: 20px;
  font-weight: 700
}

@media screen and (max-width:768px) {
  .site-dtp .answers li dl dd:before, .site-dtp .answers li dl dt:before, .site-illust .answers li dl dd:before, .site-illust .answers li dl dt:before, .site-service .answers li dl dd:before, .site-service .answers li dl dt:before, .site-video .answers li dl dd:before, .site-video .answers li dl dt:before, .site-web .answers li dl dd:before, .site-web .answers li dl dt:before {
    top: 12px
  }
}

.site-dtp .answers li dl:hover, .site-illust .answers li dl:hover, .site-service .answers li dl:hover, .site-video .answers li dl:hover, .site-web .answers li dl:hover {
  transform: scale(1.04);
  box-shadow: 0 1px 24px rgba(0, 0, 0, .08)
}

.site-dtp .answers li dl.active dt, .site-illust .answers li dl.active dt, .site-service .answers li dl.active dt, .site-video .answers li dl.active dt, .site-web .answers li dl.active dt {
  background: url(../../images/common/up_arrow.png) no-repeat right center;
  background-size: 20px
}

.site-dtp .answers li dl dt, .site-illust .answers li dl dt, .site-service .answers li dl dt, .site-video .answers li dl dt, .site-web .answers li dl dt {
  font-weight: 700;
  /*background: url(../../images/common/down_arrow.png) no-repeat right center;*/
  background-size: 20px;
  padding-right: 32px
}

.site-dtp .answers li dl dt:before, .site-illust .answers li dl dt:before, .site-service .answers li dl dt:before, .site-video .answers li dl dt:before, .site-web .answers li dl dt:before {
  content: 'Q'
}

.site-dtp .answers li dl dd, .site-illust .answers li dl dd, .site-service .answers li dl dd, .site-video .answers li dl dd, .site-web .answers li dl dd {
  border-top: #e8e8e8 1px solid
}

.site-dtp .answers li dl dd:before, .site-illust .answers li dl dd:before, .site-service .answers li dl dd:before, .site-video .answers li dl dd:before, .site-web .answers li dl dd:before {
  color: #f65f6a;
  content: 'A'
}

.site-dtp .site-module.kussion, .site-illust .site-module.kussion, .site-service .site-module.kussion, .site-video .site-module.kussion, .site-web .site-module.kussion {
  background: #000;
  text-align: center;
  color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative
}

.site-dtp .site-module.kussion:before, .site-illust .site-module.kussion:before, .site-service .site-module.kussion:before, .site-video .site-module.kussion:before, .site-web .site-module.kussion:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #0a0a0a;
  opacity: .32
}

.site-dtp .site-module.kussion dl, .site-illust .site-module.kussion dl, .site-service .site-module.kussion dl, .site-video .site-module.kussion dl, .site-web .site-module.kussion dl {
  font-weight: 700
}

.site-dtp .site-module.kussion dl dt, .site-illust .site-module.kussion dl dt, .site-service .site-module.kussion dl dt, .site-video .site-module.kussion dl dt, .site-web .site-module.kussion dl dt {
  font-size: 28px;
  margin: 0 0 8px
}

@media screen and (max-width:768px) {
  .site-dtp .site-module.kussion dl dt, .site-illust .site-module.kussion dl dt, .site-service .site-module.kussion dl dt, .site-video .site-module.kussion dl dt, .site-web .site-module.kussion dl dt {
    font-size: 18px
  }
}

.site-dtp .site-module.kussion dl dd, .site-illust .site-module.kussion dl dd, .site-service .site-module.kussion dl dd, .site-video .site-module.kussion dl dd, .site-web .site-module.kussion dl dd {
  font-size: 15px
}

@media screen and (max-width:768px) {
  .site-dtp .site-module.kussion dl dd, .site-illust .site-module.kussion dl dd, .site-service .site-module.kussion dl dd, .site-video .site-module.kussion dl dd, .site-web .site-module.kussion dl dd {
    font-size: 13px;
    margin: 0 15px;
    text-align: justify
  }
  .site-dtp .site-module.kussion dl dd br, .site-illust .site-module.kussion dl dd br, .site-service .site-module.kussion dl dd br, .site-video .site-module.kussion dl dd br, .site-web .site-module.kussion dl dd br {
    display: none
  }
}

@media screen and (max-width:768px) {
  .site-dtp .site-module.kussion dl dd.btnarea, .site-illust .site-module.kussion dl dd.btnarea, .site-service .site-module.kussion dl dd.btnarea, .site-video .site-module.kussion dl dd.btnarea, .site-web .site-module.kussion dl dd.btnarea {
    margin: 24px 15px 0
  }
}

.site-dtp .site-module.kussion dl dd.btnarea a, .site-illust .site-module.kussion dl dd.btnarea a, .site-service .site-module.kussion dl dd.btnarea a, .site-video .site-module.kussion dl dd.btnarea a, .site-web .site-module.kussion dl dd.btnarea a {
  background: 0 0;
  border-color: #fff
}

@media screen and (max-width:768px) {
  .site-dtp .site-module.kussion dl dd.btnarea a, .site-illust .site-module.kussion dl dd.btnarea a, .site-service .site-module.kussion dl dd.btnarea a, .site-video .site-module.kussion dl dd.btnarea a, .site-web .site-module.kussion dl dd.btnarea a {
    margin: 0 0 16px
  }
  .site-dtp .site-module.kussion dl dd.btnarea a:last-of-type, .site-illust .site-module.kussion dl dd.btnarea a:last-of-type, .site-service .site-module.kussion dl dd.btnarea a:last-of-type, .site-video .site-module.kussion dl dd.btnarea a:last-of-type, .site-web .site-module.kussion dl dd.btnarea a:last-of-type {
    margin: 0
  }
}

.site-dtp .site-module.kussion dl dd.btnarea a:hover, .site-illust .site-module.kussion dl dd.btnarea a:hover, .site-service .site-module.kussion dl dd.btnarea a:hover, .site-video .site-module.kussion dl dd.btnarea a:hover, .site-web .site-module.kussion dl dd.btnarea a:hover {
  background: #fff;
  color: normal
}

.site-dtp .face-list, .site-illust .face-list, .site-service .face-list, .site-video .face-list, .site-web .face-list {
  padding: 0 0 8px
}

.site-dtp .face-list li, .site-illust .face-list li, .site-service .face-list li, .site-video .face-list li, .site-web .face-list li {
  list-style: none;
  border: #f6f6f8 6px solid;
  padding: 24px;
  border-radius: 8px
}

@media screen and (min-width:769px) {
  .site-dtp .face-list li, .site-illust .face-list li, .site-service .face-list li, .site-video .face-list li, .site-web .face-list li {
    list-style: none;
    width: 31%;
    float: left;
    margin: 0 3.5% 3.5% 0
  }
  .site-dtp .face-list li:nth-child(3n+1), .site-illust .face-list li:nth-child(3n+1), .site-service .face-list li:nth-child(3n+1), .site-video .face-list li:nth-child(3n+1), .site-web .face-list li:nth-child(3n+1) {
    clear: both
  }
  .site-dtp .face-list li:nth-child(3n+3), .site-illust .face-list li:nth-child(3n+3), .site-service .face-list li:nth-child(3n+3), .site-video .face-list li:nth-child(3n+3), .site-web .face-list li:nth-child(3n+3) {
    margin-right: 0
  }
  .site-dtp .face-list li:nth-last-child(-n+3), .site-illust .face-list li:nth-last-child(-n+3), .site-service .face-list li:nth-last-child(-n+3), .site-video .face-list li:nth-last-child(-n+3), .site-web .face-list li:nth-last-child(-n+3) {
    margin-bottom: 0
  }
}

@media screen and (max-width:768px) {
  .site-dtp .face-list li, .site-illust .face-list li, .site-service .face-list li, .site-video .face-list li, .site-web .face-list li {
    padding: 15px;
    border-radius: 6px;
    margin: 0 0 15px
  }
  .site-dtp .face-list li:last-child, .site-illust .face-list li:last-child, .site-service .face-list li:last-child, .site-video .face-list li:last-child, .site-web .face-list li:last-child {
    margin: 0
  }
  .site-dtp .face-list li:after, .site-illust .face-list li:after, .site-service .face-list li:after, .site-video .face-list li:after, .site-web .face-list li:after {
    content: '';
    display: block;
    clear: both
  }
}

.site-dtp .face-list li figure, .site-illust .face-list li figure, .site-service .face-list li figure, .site-video .face-list li figure, .site-web .face-list li figure {
  background: #f6f6f8;
  border-radius: 50%;
  overflow: hidden;
  width: 80px;
  height: 80px;
  position: relative;
  margin: 0 auto 24px
}

@media screen and (max-width:768px) {
  .site-dtp .face-list li figure, .site-illust .face-list li figure, .site-service .face-list li figure, .site-video .face-list li figure, .site-web .face-list li figure {
    width: 40px;
    height: 40px;
    float: left;
    margin: 0 24px 0 0
  }
}

.site-dtp .face-list li figure img, .site-illust .face-list li figure img, .site-service .face-list li figure img, .site-video .face-list li figure img, .site-web .face-list li figure img {
  position: absolute;
  top: 20%;
  left: 50%;
  height: 80%;
  transform: translateX(-50%)
}

.site-dtp .face-list li dl dt, .site-illust .face-list li dl dt, .site-service .face-list li dl dt, .site-video .face-list li dl dt, .site-web .face-list li dl dt {
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px
}

@media screen and (max-width:768px) {
  .site-dtp .face-list li dl dt, .site-illust .face-list li dl dt, .site-service .face-list li dl dt, .site-video .face-list li dl dt, .site-web .face-list li dl dt {
    font-size: 15px;
    text-align: left;
    margin: 0;
    padding: 8px 0 0
  }
}

.site-dtp .face-list li dl dd, .site-illust .face-list li dl dd, .site-service .face-list li dl dd, .site-video .face-list li dl dd, .site-web .face-list li dl dd {
  padding: 0 8px;
  font-size: 13.5px;
  text-align: justify
}

@media screen and (max-width:768px) {
  .site-dtp .face-list li dl dd, .site-illust .face-list li dl dd, .site-service .face-list li dl dd, .site-video .face-list li dl dd, .site-web .face-list li dl dd {
    clear: both;
    padding: 12px 0 0
  }
}

.site-dtp .face-list li dl dd.overview, .site-illust .face-list li dl dd.overview, .site-service .face-list li dl dd.overview, .site-video .face-list li dl dd.overview, .site-web .face-list li dl dd.overview {
  position: relative;
  padding: 24px 0 0;
  margin: 24px 0 0;
  border-top: #e8e8e8 1px solid
}

.site-dtp .face-list li dl dd.overview:before, .site-illust .face-list li dl dd.overview:before, .site-service .face-list li dl dd.overview:before, .site-video .face-list li dl dd.overview:before, .site-web .face-list li dl dd.overview:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 40px;
  height: 32px;
  background: #fff;
  transform: translateX(-50%) translateY(-50%)
}

.site-dtp .face-list li dl dd.overview:after, .site-illust .face-list li dl dd.overview:after, .site-service .face-list li dl dd.overview:after, .site-video .face-list li dl dd.overview:after, .site-web .face-list li dl dd.overview:after {
  content: "\f13a";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 0;
  left: 50%;
  font-size: 20px;
  color: #e8e8e8;
  transform: translateX(-50%) translateY(-50%)
}

.site-dtp p.sub, .site-illust p.sub, .site-service p.sub, .site-video p.sub, .site-web p.sub {
  font-size: 14px;
  margin: 4px 0 0
}

.site-dtp p.sub:before, .site-illust p.sub:before, .site-service p.sub:before, .site-video p.sub:before, .site-web p.sub:before {
  content: '※'
}

.site-dtp .localnav.btnarea, .site-illust .localnav.btnarea, .site-service .localnav.btnarea, .site-video .localnav.btnarea, .site-web .localnav.btnarea {
  background: #f6f6f8;
  text-align: center;
  padding: 32px 0;
  border-radius: 8px;
  margin: 0 0 56px
}

@media screen and (max-width:768px) {
  .site-dtp .localnav.btnarea, .site-illust .localnav.btnarea, .site-service .localnav.btnarea, .site-video .localnav.btnarea, .site-web .localnav.btnarea {
    margin: 0 0 40px;
    padding: 20px;
    border-radius: 12px
  }
}

.site-dtp .localnav.btnarea a, .site-illust .localnav.btnarea a, .site-service .localnav.btnarea a, .site-video .localnav.btnarea a, .site-web .localnav.btnarea a {
  background: #fff;
  border-color: #fff;
  color: #0a0a0a;
  box-shadow: 0 0 32px rgba(0, 0, 0, .08)
}

@media screen and (max-width:768px) {
  .site-dtp .localnav.btnarea a, .site-illust .localnav.btnarea a, .site-service .localnav.btnarea a, .site-video .localnav.btnarea a, .site-web .localnav.btnarea a {
    box-shadow: 0 0 15px rgba(0, 0, 0, .08);
    margin: 0 0 16px
  }
  .site-dtp .localnav.btnarea a:last-of-type, .site-illust .localnav.btnarea a:last-of-type, .site-service .localnav.btnarea a:last-of-type, .site-video .localnav.btnarea a:last-of-type, .site-web .localnav.btnarea a:last-of-type {
    margin: 0
  }
}

.site-dtp .localnav.btnarea a:hover, .site-illust .localnav.btnarea a:hover, .site-service .localnav.btnarea a:hover, .site-video .localnav.btnarea a:hover, .site-web .localnav.btnarea a:hover {
  border-color: #0a0a0a
}

.site-dtp .example, .site-illust .example, .site-service .example, .site-video .example, .site-web .example {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  border: #f6f6f8 8px solid;
  padding: 24px 32px;
  border-radius: 8px
}

@media screen and (max-width:768px) {
  .site-dtp .example, .site-illust .example, .site-service .example, .site-video .example, .site-web .example {
    display: block;
    padding: 20px
  }
}

.site-dtp .example h3, .site-illust .example h3, .site-service .example h3, .site-video .example h3, .site-web .example h3 {
  width: 100%
}

.site-dtp .example figure, .site-illust .example figure, .site-service .example figure, .site-video .example figure, .site-web .example figure {
  order: 2;
  width: 30%
}

@media screen and (max-width:768px) {
  .site-dtp .example figure, .site-illust .example figure, .site-service .example figure, .site-video .example figure, .site-web .example figure {
    display: none
  }
}

.site-dtp .example figure img, .site-illust .example figure img, .site-service .example figure img, .site-video .example figure img, .site-web .example figure img {
  width: 100%
}

.site-dtp .example .example-child, .site-illust .example .example-child, .site-service .example .example-child, .site-video .example .example-child, .site-web .example .example-child {
  width: 70%;
  padding-right: 56px
}

@media screen and (max-width:768px) {
  .site-dtp .example .example-child, .site-illust .example .example-child, .site-service .example .example-child, .site-video .example .example-child, .site-web .example .example-child {
    width: auto;
    padding: 0
  }
}

.site-dtp .example .example-child dl.list, .site-illust .example .example-child dl.list, .site-service .example .example-child dl.list, .site-video .example .example-child dl.list, .site-web .example .example-child dl.list {
  margin: 0 0 24px
}

.site-dtp .example .example-child dl.list:last-of-type, .site-illust .example .example-child dl.list:last-of-type, .site-service .example .example-child dl.list:last-of-type, .site-video .example .example-child dl.list:last-of-type, .site-web .example .example-child dl.list:last-of-type {
  margin: 0
}

.site-dtp .example .example-child dl.list dt, .site-illust .example .example-child dl.list dt, .site-service .example .example-child dl.list dt, .site-video .example .example-child dl.list dt, .site-web .example .example-child dl.list dt {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 12px;
  color: #F4D780
}

@media screen and (max-width:768px) {
  .site-dtp .example .example-child dl.list dt, .site-illust .example .example-child dl.list dt, .site-service .example .example-child dl.list dt, .site-video .example .example-child dl.list dt, .site-web .example .example-child dl.list dt {
    font-size: 14px;
    margin: 0 0 10px
  }
}

.site-dtp .example .example-child dl.list dd, .site-illust .example .example-child dl.list dd, .site-service .example .example-child dl.list dd, .site-video .example .example-child dl.list dd, .site-web .example .example-child dl.list dd {
  background: #f6f6f8;
  text-align: center;
  padding: 6px 0;
  border-radius: 6px;
  float: left;
  font-size: 13px
}

@media screen and (min-width:769px) {
  .site-dtp .example .example-child dl.list dd, .site-illust .example .example-child dl.list dd, .site-service .example .example-child dl.list dd, .site-video .example .example-child dl.list dd, .site-web .example .example-child dl.list dd {
    width: 23.5%;
    margin: 0 2% 2% 0
  }
  .site-dtp .example .example-child dl.list dd:nth-of-type(4n+4), .site-illust .example .example-child dl.list dd:nth-of-type(4n+4), .site-service .example .example-child dl.list dd:nth-of-type(4n+4), .site-video .example .example-child dl.list dd:nth-of-type(4n+4), .site-web .example .example-child dl.list dd:nth-of-type(4n+4) {
    margin-right: 0
  }
  .site-dtp .example .example-child dl.list dd:nth-of-type(4n+1), .site-illust .example .example-child dl.list dd:nth-of-type(4n+1), .site-service .example .example-child dl.list dd:nth-of-type(4n+1), .site-video .example .example-child dl.list dd:nth-of-type(4n+1), .site-web .example .example-child dl.list dd:nth-of-type(4n+1) {
    clear: both
  }
  .site-dtp .example .example-child dl.list dd:nth-last-of-type(-n+4), .site-illust .example .example-child dl.list dd:nth-last-of-type(-n+4), .site-service .example .example-child dl.list dd:nth-last-of-type(-n+4), .site-video .example .example-child dl.list dd:nth-last-of-type(-n+4), .site-web .example .example-child dl.list dd:nth-last-of-type(-n+4) {
    margin-bottom: 0
  }
}

@media screen and (max-width:768px) {
  .site-dtp .example .example-child dl.list dd, .site-illust .example .example-child dl.list dd, .site-service .example .example-child dl.list dd, .site-video .example .example-child dl.list dd, .site-web .example .example-child dl.list dd {
    width: 48%;
    margin: 0 4% 4% 0
  }
  .site-dtp .example .example-child dl.list dd:nth-of-type(2n+2), .site-illust .example .example-child dl.list dd:nth-of-type(2n+2), .site-service .example .example-child dl.list dd:nth-of-type(2n+2), .site-video .example .example-child dl.list dd:nth-of-type(2n+2), .site-web .example .example-child dl.list dd:nth-of-type(2n+2) {
    margin-right: 0
  }
  .site-dtp .example .example-child dl.list dd:nth-of-type(2n+1), .site-illust .example .example-child dl.list dd:nth-of-type(2n+1), .site-service .example .example-child dl.list dd:nth-of-type(2n+1), .site-video .example .example-child dl.list dd:nth-of-type(2n+1), .site-web .example .example-child dl.list dd:nth-of-type(2n+1) {
    clear: both
  }
  .site-dtp .example .example-child dl.list dd:nth-last-of-type(-n+2), .site-illust .example .example-child dl.list dd:nth-last-of-type(-n+2), .site-service .example .example-child dl.list dd:nth-last-of-type(-n+2), .site-video .example .example-child dl.list dd:nth-last-of-type(-n+2), .site-web .example .example-child dl.list dd:nth-last-of-type(-n+2) {
    margin-bottom: 0
  }
}

.site-dtp .example .result, .site-illust .example .result, .site-service .example .result, .site-video .example .result, .site-web .example .result {
  font-size: 20px;
  font-weight: 700;
  margin: 24px 0 0
}

@media screen and (max-width:768px) {
  .site-dtp .example .result, .site-illust .example .result, .site-service .example .result, .site-video .example .result, .site-web .example .result {
    font-size: 18px;
    margin: 24px 0 0
  }
}

.site-dtp .example .result strong, .site-illust .example .result strong, .site-service .example .result strong, .site-video .example .result strong, .site-web .example .result strong {
  font-size: 32px;
  line-height: 1;
  display: inline-block;
  margin: 0 0 0 8px;
  color: #F4D780
}

@media screen and (max-width:768px) {
  .site-dtp .example .result strong, .site-illust .example .result strong, .site-service .example .result strong, .site-video .example .result strong, .site-web .example .result strong {
    font-size: 26px
  }
}

.site-service-list .context {
  font-size: 16px;
  text-align: center
}

@media screen and (max-width:768px) {
  .site-service-list .context {
    text-align: justify;
    font-size: 13px;
    margin: 0 15px
  }
  .site-service-list .context br {
    display: none
  }
}

.site-service-list .clum {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  align-items: center
}

@media screen and (max-width:768px) {
  .site-service-list .clum {
    display: block
  }
}

.site-service-list .clum figure.main {
  width: 40%;
  padding: 96px 0;
  text-align: center;
  background: #fff;
  border: #e8e8e8 1px solid
}

@media screen and (max-width:768px) {
  .site-service-list .clum figure.main {
    width: auto;
    padding: 56px 0;
    margin: 0 0 24px
  }
}

.site-service-list .clum figure.main img {
  width: 240px
}

@media screen and (max-width:768px) {
  .site-service-list .clum figure.main img {
    width: 160px
  }
}

.site-service-list .clum dl {
  width: 56%
}

@media screen and (max-width:768px) {
  .site-service-list .clum dl {
    width: auto
  }
}

.site-service-list .clum dl dt {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.7;
  margin: 0 0 20px
}

@media screen and (max-width:768px) {
  .site-service-list .clum dl dt {
    font-size: 16px;
    text-align: center;
    margin: 0 0 16px
  }
}

@media screen and (max-width:768px) {
  .site-service-list .clum dl dd {
    margin: 0 15px;
    text-align: justify
  }
}

.site-service-list .clum .list {
  margin: 48px 0 0;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between
}

@media screen and (max-width:768px) {
  .site-service-list .clum .list {
    margin: 32px 0 0;
    padding: 32px 0 0;
    border-top: #e8e8e8 1px solid
  }
}

.site-service-list .clum .list li {
  width: 30%;
  border: #e8e8e8 1px solid
}

@media screen and (max-width:768px) {
  .site-service-list .clum .list li {
    width: 31%
  }
}

.site-service-list .clum .list li img {
  width: 100%
}

.site-service-list .site-module .btnarea {
  margin: 48px 0 0
}

@media screen and (max-width:768px) {
  .site-service-list .site-module .btnarea {
    margin: 32px 0 0
  }
  .site-service-list .site-module .btnarea a {
    margin: 0 0 16px
  }
  .site-service-list .site-module .btnarea a:last-of-type {
    margin: 0
  }
}

.site-web .scs {
  margin: 0 0 56px;
  background: #f6f6f8;
  padding: 16px;
  position: relative
}

@media screen and (max-width:768px) {
  .site-web .scs {
    padding: 0;
    margin: 0 0 24px
  }
}

.site-web .scs:before {
  content: 'サイト掲載例';
  position: absolute;
  background: #0a0a0a;
  padding: 3px 16px;
  color: #fff;
  top: 0;
  right: 0
}

@media screen and (max-width:768px) {
  .site-web .scs:before {
    font-size: 11px
  }
}

.site-web .scs img {
  width: 100%
}

.site-web .vprice {
  position: relative
}

.site-web .vprice h2.large strong {
  color: #f65f6a;
  font-size: 40px;
  line-height: 1;
  display: inline-block;
  margin: 0 2px;
  text-shadow: none
}

@media screen and (max-width:768px) {
  .site-web .vprice h2.large strong {
    font-size: 24px
  }
}

.site-web .vprice sup {
  font-size: 10px;
  display: inline-block;
  transform: translateY(-1.5em)
}

@media screen and (max-width:768px) {
  .site-web .vprice .overflow {
    width: calc(100% - 15px);
    overflow: auto;
    margin: 0 0 0 15px
  }
}

.site-web .vprice__list {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  padding: 0 25% 0 0;
  position: relative
}

@media screen and (max-width:768px) {
  .site-web .vprice__list {
    padding: 0 15px 0 0;
    width: 240%
  }
}

.site-web .vprice__list:after {
  content: '※当社エントリープランの場合';
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 11px
}

@media screen and (max-width:768px) {
  .site-web .vprice__list:after {
    font-size: 9px;
    right: 15px;
    display: none
  }
}

.site-web .vprice__list:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: calc(25% - 40px);
  height: 100%;
  background: url(https://webkid.co.jp/images/webprice/fig.png) no-repeat center;
  background-size: contain
}

@media screen and (max-width:768px) {
  .site-web .vprice__list:before {
    display: none
  }
}

.site-web .vprice__list li {
  list-style: none;
  width: 31.5%;
  background: #f6f6f8;
  border: #f6f6f8 4px solid;
  padding: 16px;
  border-radius: 4px;
  overflow: hidden
}

@media screen and (max-width:768px) {
  .site-web .vprice__list li {
    width: 32%
  }
}

.site-web .vprice__list li:first-child {
  border: #F4D780 4px solid;
  position: relative
}

.site-web .vprice__list li:first-child:before {
  content: '';
  width: 60px;
  height: 60px;
  background: #F4D780;
  position: absolute;
  top: -30px;
  right: -30px;
  transform: rotate(45deg)
}

@media screen and (max-width:768px) {
  .site-web .vprice__list li:first-child>p:after {
    content: '※当社エントリープランの場合';
    display: block;
    font-size: 9px;
    margin: 6px 0 0;
    text-align: right
  }
}

.site-web .vprice__list__title {
  text-align: center;
  margin: 0 0 16px
}

.site-web .vprice__list__title dt {
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  margin: 0 0 8px
}

.site-web .vprice__list__title dd {
  padding: 0 20px
}

.site-web .vprice__list__data {
  background: #fff;
  padding: 12px 20px;
  border-radius: 4px
}

@media screen and (max-width:768px) {
  .site-web .vprice__list__data {
    padding: 10px 15px
  }
}

.site-web .vprice__list__data dl {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  margin: 0 0 8px
}

.site-web .vprice__list__data dl:last-of-type {
  margin: 0
}

.site-web .vprice__list__data dl dt {
  width: 70px
}

.site-web .vprice__list__data dl dd {
  width: calc(100% - 70px)
}

.site-web .vprice__list__data dl dd small {
  font-size: 12px
}

.site-web .vprice__list__data dl dd strong {
  font-size: 1.1em;
  line-height: 24px;
  display: inline-block;
  margin: 0 2px 0 0;
  color: #3d3548
}

.site-web .vprice__list__data dl dd strong.red {
  font-size: 1.4em;
  color: #f65f6a
}

.site-web .vprice__list__txt {
  font-size: 13px;
  text-align: justify;
  margin: 16px 0 0;
  line-height: 1.66
}

.site-web .vprice__list__txt strong {
  color: #f65f6a
}

.site-web .vprice .arrow {
  border: #F4D780 4px solid;
  background: #F4D780;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  border-radius: 4px;
  padding: 16px;
  margin: 32px 0 0;
  position: relative
}

@media screen and (max-width:768px) {
  .site-web .vprice .arrow {
    margin: 24px 15px 0;
    font-size: 13px;
    padding: 8px 15px
  }
}

.site-web .vprice .arrow:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 20px 0 20px;
  border-color: #F4D780 transparent transparent transparent;
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%)
}

@media screen and (max-width:768px) {
  .site-web .vprice .btnarea {
    margin-left: 15px;
    margin-right: 15px
  }
}

.site-web .vprice .support {
  text-align: center;
  margin: 16px 0 0
}

@media screen and (max-width:768px) {
  .site-web .vprice .support {
    margin: 15px 30px 0
  }
}

.site-web .vprice .support a {
  text-decoration: underline;
  color: #0a0a0a;
  font-size: 13px;
  font-weight: 700;
  line-height: 1
}

.site-web .sampling ul {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between
}

@media screen and (max-width:768px) {
  .site-web .sampling ul {
    display: block
  }
}

.site-web .sampling ul li {
  width: 32%;
  padding: 0 0 20px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 32px rgba(10, 10, 10, .08)
}

@media screen and (max-width:768px) {
  .site-web .sampling ul li {
    width: auto;
    padding: 0 0 15px;
    margin: 0 0 20px
  }
  .site-web .sampling ul li:last-child {
    margin: 0
  }
}

.site-web .sampling ul li h3 {
  text-align: center;
  font-size: 15px;
  line-height: 1.66;
  padding: 14px 16px;
  background: #f6f6f8;
  margin: 0 0 16px;
  border-left: #fff 2px solid;
  border-right: #fff 2px solid
}

.site-web .sampling ul li figure img {
  width: 100%
}

.site-web .sampling ul li h4 {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 20px
}

.site-web .sampling ul li h4 strong {
  font-size: 32px;
  line-height: 1;
  display: inline-block;
  margin: 0 4px;
  transform: translateY(2px)
}

.site-web .sampling ul li h4 span {
  display: block;
  font-size: 15px
}

.site-web .sampling ul li dl {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  margin: 0 20px;
  border-bottom: #fff 2px solid
}

@media screen and (max-width:768px) {
  .site-web .sampling ul li dl {
    margin: 0 15px
  }
}

.site-web .sampling ul li dl:last-of-type {
  border: none
}

.site-web .sampling ul li dl dd, .site-web .sampling ul li dl dt {
  padding: 10px 15px;
  font-size: 13px;
  background: #f6f6f8
}

.site-web .sampling ul li dl dd i, .site-web .sampling ul li dl dt i {
  color: #f65f6a;
  display: inline-block;
  margin: 0 8px 0 0
}

.site-web .sampling ul li dl dt {
  width: 130px;
  border-right: 2px solid #fff
}

.site-web .sampling ul li dl dd {
  width: calc(100% - 130px);
  font-weight: 700
}

.site-web .sampling ul li .btn {
  text-align: center;
  margin: 20px 20px 0
}

@media screen and (max-width:768px) {
  .site-web .sampling ul li .btn {
    margin: 15px 15px 0
  }
}

.site-web .sampling ul li .btn a {
  display: block;
  border-radius: 4px;
  color: #fff;
  background: #0a0a0a;
  border: #0a0a0a 2px solid;
  font-size: 16px;
  font-weight: 700;
  padding: 8px 15px
}

.site-web .sampling ul li .btn a:hover {
  background: #fff;
  color: #0a0a0a
}

.site-web .sampling ul li .btn a i {
  display: inline-block;
  margin: 0 8px 0 0
}

.site-web .tableScroll .form-style.table-border.pricetable tbody tr td, .site-web .tableScroll .form-style.table-border.pricetable tbody tr th, .site-web .tableScroll .form-style.table-border.pricetable thead tr td, .site-web .tableScroll .form-style.table-border.pricetable thead tr th {
  width: 20%;
  padding-top: 24px;
  padding-bottom: 24px;
  font-size: 15px
}

@media screen and (max-width:768px) {
  .site-web .tableScroll .form-style.table-border.pricetable tbody tr td, .site-web .tableScroll .form-style.table-border.pricetable tbody tr th, .site-web .tableScroll .form-style.table-border.pricetable thead tr td, .site-web .tableScroll .form-style.table-border.pricetable thead tr th {
    font-size: 13px
  }
}

.site-web .tableScroll .form-style.table-border.pricetable tbody tr:hover {
  background: #f6f6f8
}

.site-web .pricealert {
  text-align: right;
  margin: 20px 0 0;
  font-size: 11px
}

@media screen and (max-width:768px) {
  .site-web .pricealert {
    margin: 12px 0 0;
    font-size: 9px
  }
}

.site-company .context {
  text-align: center;
  font-size: 15px
}

@media screen and (max-width:768px) {
  .site-company .context {
    font-size: 13px;
    text-align: justify;
    margin: 0 15px
  }
  .site-company .context br {
    display: none
  }
}

.site-company .solution {
  position: relative
}

.site-company .solution.wrap {
  padding-top: 48px!important
}

.site-company .solution:before {
  content: '';
  width: 100%;
  height: 64%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  background: #f6f6f8
}

@media screen and (max-width:768px) {
  .site-company .solution:before {
    height: 88%
  }
}

.site-company .solution .list {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between
}

@media screen and (max-width:768px) {
  .site-company .solution .list {
    display: block
  }
}

.site-company .solution .list li {
  list-style: none;
  width: 31%;
  display: block;
  background: #fff;
  box-shadow: 0 0 32px rgba(0, 0, 0, .08)
}

@media screen and (max-width:768px) {
  .site-company .solution .list li {
    width: auto;
    box-shadow: 0 0 15px rgba(0, 0, 0, .08);
    margin: 0 0 24px
  }
  .site-company .solution .list li:last-child {
    margin: 0
  }
}

.site-company .solution .list li figure img {
  width: 100%
}

.site-company .solution .list li dl {
  padding: 24px
}

@media screen and (max-width:768px) {
  .site-company .solution .list li dl {
    padding: 20px
  }
}

.site-company .solution .list li dl dt {
  font-size: 20px;
  font-weight: 700;
  text-align: center
}

.site-company .solution .list li dl dt:after {
  content: '';
  width: 48px;
  height: 1px;
  display: block;
  margin: 16px auto 20px;
  background: #0a0a0a
}

.site-company .solution .list li dl dd {
  text-align: justify
}

.site-company .solution .list li dl dd.btnarea a {
  text-align: center;
  border-radius: 4px;
  font-size: 15px;
  display: block;
  padding: 12px 0
}

.site-company .greeting figure {
  width: calc(50% - 28px)
}

.site-company .greeting figure img {
  width: 100%
}

@media screen and (max-width:768px) {
  .site-company .greeting figure {
    width: 100%;
    margin-bottom: 24px
  }
}

.site-company .greeting dl {
  width: calc(50% - 28px)
}

@media screen and (max-width:768px) {
  .site-company .greeting dl {
    width: 100%;
    padding: 0 15px
  }
}

.site-company .greeting dl dd {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 2
}

@media screen and (max-width:768px) {
  .site-company .greeting dl dd {
    font-size: 13px;
    line-height: 1.8
  }
}

.site-company .greeting dl dd.cp {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 500;
  font-feature-settings: "palt";
  letter-spacing: .04em;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.6;
  margin: 24px 0 16px
}

.site-company .greeting dl dd.cp br {
  display: none
}

@media screen and (max-width:768px) {
  .site-company .greeting dl dd.cp {
    font-size: 24px;
    margin: 8px 0 12px
  }
  .site-company .greeting dl dd.cp br {
    display: inline
  }
}

.site-company .greeting dl dt {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 500;
  font-feature-settings: "palt";
  letter-spacing: .04em;
  text-align: right
}

.site-company .greeting dl dt small {
  display: block;
  font-size: 13px;
  margin: 0 0 6px
}

@media screen and (max-width:768px) {
  .site-company .greeting dl dt small {
    font-size: 12px
  }
}

.site-company .greeting dl dt strong {
  display: block;
  font-size: 26px;
  line-height: 1;
  transform: translateX(2px)
}

@media screen and (max-width:768px) {
  .site-company .greeting dl dt strong {
    font-size: 18px
  }
}

.site-company .form-style tbody tr td a, .site-company .form-style tbody tr th a {
  text-decoration: underline
}

.site-company .form-style tbody tr td a i, .site-company .form-style tbody tr th a i {
  font-size: 12px;
  display: inline-block;
  margin: 0 0 0 8px
}

.site-company .form-style tbody tr td dl, .site-company .form-style tbody tr th dl {
  margin: 0 0 24px
}

.site-company .form-style tbody tr td dl:last-of-type, .site-company .form-style tbody tr th dl:last-of-type {
  margin: 0
}

.site-company .form-style tbody tr td dl dt, .site-company .form-style tbody tr th dl dt {
  background: #0a0a0a;
  color: #fff;
  display: inline-block;
  border-radius: 4px;
  width: 140px;
  padding: 2px 0;
  text-align: center;
  margin: 0 0 8px
}

.site-recruit .text {
  text-align: center;
  font-size: 15px
}

@media screen and (max-width:768px) {
  .site-recruit .text {
    text-align: justify;
    font-size: 13px;
    margin: 0 15px
  }
  .site-recruit .text br {
    display: none
  }
}

.site-recruit .amature {
  margin: 32px 0
}

@media screen and (max-width:768px) {
  .site-recruit .amature {
    margin: 24px 0
  }
}

.site-recruit .amature .child {
  border: #0a0a0a 3px solid;
  background: #fff;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  padding: 24px 64px;
  position: relative;
  cursor: pointer
}

@media screen and (max-width:768px) {
  .site-recruit .amature .child {
    border: #0a0a0a 2px solid;
    padding: 15px;
    font-size: 15px
  }
}

.site-recruit .amature .child:hover {
  background: #0a0a0a;
  color: #fff
}

.site-recruit .amature .child.active {
  z-index: 9999;
  transform: scale(100);
  background: #0a0a0a;
  transition: all .8s 0s cubic-bezier(.455, .03, .515, .955);
  cursor: auto;
  pointer-events: none
}

.site-recruit .amature .item {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: #0a0a0a;
  color: #fff
}

.site-recruit .amature .item__close {
  content: '';
  width: 32px;
  height: 32px;
  position: absolute;
  top: 32px;
  right: 32px;
  cursor: pointer
}

@media screen and (max-width:768px) {
  .site-recruit .amature .item__close {
    top: 15px;
    right: 15px
  }
}

.site-recruit .amature .item__close:after, .site-recruit .amature .item__close:before {
  content: '';
  width: 100%;
  height: 1px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 0;
  transform: rotate(45deg);
  transition: all .2s 0s cubic-bezier(.455, .03, .515, .955)
}

.site-recruit .amature .item__close:after {
  transform: rotate(-45deg)
}

.site-recruit .amature .item__close:hover:after, .site-recruit .amature .item__close:hover:before {
  transform: rotate(0)
}

.site-recruit .amature .item__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-height: 80vh;
  overflow: auto;
  transform: translateX(-50%) translateY(-50%);
  font-size: 16px;
  text-align: center
}

@media screen and (max-width:768px) {
  .site-recruit .amature .item__inner {
    font-size: 15px;
    padding: 25px
  }
}

.site-recruit .amature .item__inner h3 {
  font-weight: 700;
  margin: 0 0 32px;
  font-size: 24px
}

@media screen and (max-width:768px) {
  .site-recruit .amature .item__inner h3 {
    font-size: 20px
  }
}

.site-recruit .amature .item__inner p {
  margin: 0 0 12px
}

.site-recruit .amature .item__inner p strong {
  color: #F4D780;
  font-size: 20px;
  line-height: 1
}

@media screen and (max-width:768px) {
  .site-recruit .amature .item__inner p strong {
    font-size: 18px
  }
}

.site-recruit .amature .item__inner a {
  border: #fff 1px solid
}

.site-recruit .amature .fade-enter-active, .site-recruit .amature .fade-leave-active {
  transition: all .8s 0s cubic-bezier(.455, .03, .515, .955)
}

.site-recruit .amature .fade-enter, .site-recruit .amature .fade-leave-to {
  opacity: 0
}

.site-recruit nav.job {
  margin: 40px 0 0;
  background: #f6f6f8;
  border-radius: 6px;
  padding: 32px
}

@media screen and (max-width:768px) {
  .site-recruit nav.job {
    padding: 15px
  }
}

.site-recruit nav.job dt {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 24px
}

@media screen and (max-width:768px) {
  .site-recruit nav.job dt {
    font-size: 18px;
    margin: 0 0 12px
  }
}

@media screen and (min-width:769px) {
  .site-recruit nav.job dd {
    width: 31%;
    float: left;
    margin: 0 3.5% 3.5% 0
  }
  .site-recruit nav.job dd:nth-of-type(3n+3) {
    margin-right: 0
  }
  .site-recruit nav.job dd:nth-of-type(3n+1) {
    clear: both
  }
  .site-recruit nav.job dd:nth-last-of-type(-n+3) {
    margin-bottom: 0
  }
}

@media screen and (max-width:768px) {
  .site-recruit nav.job dd {
    margin: 0 0 15px
  }
  .site-recruit nav.job dd:last-of-type {
    margin: 0
  }
}

.site-recruit nav.job dd a {
  display: block;
  position: relative;
  align-items: center;
  background: #fff;
  color: #0a0a0a;
  font-size: 15px;
  font-weight: 700;
  border-radius: 4px;
  padding: 16px;
  box-shadow: 0 0 24px rgba(0, 0, 0, .08);
  transition: all 120ms 0s cubic-bezier(.455, .03, .515, .955)
}

@media screen and (max-width:768px) {
  .site-recruit nav.job dd a {
    font-size: 14px;
    box-shadow: 0 0 15px rgba(0, 0, 0, .08)
  }
}

.site-recruit nav.job dd a:hover {
  transform: scale(1.08)
}

@media screen and (max-width:768px) {
  .site-recruit nav.job dd a:hover {
    transform: scale(1.02)
  }
}

.site-recruit nav.job dd a:after {
  content: "\f0a9";
  font-family: "Font Awesome 5 Free";
  font-size: 900;
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%)
}

.site-recruit nav.job dd a figure {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  justify-content: flex-start;
  align-items: center
}

.site-recruit nav.job dd a figure img {
  width: 48px;
  height: 48px;
  border-radius: 50%
}

.site-recruit nav.job dd a figure figcaption {
  margin: 0 0 0 24px
}

@media screen and (max-width:768px) {
  .site-recruit nav.job dd a figure figcaption {
    margin: 0 0 0 16px
  }
}

.site-recruit .photo-list {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  position: relative
}

.site-recruit .photo-list:after, .site-recruit .photo-list:before {
  content: '';
  width: 1px;
  height: 100%;
  background: #e8e8e8;
  position: absolute;
  top: 0;
  left: 32%
}

@media screen and (max-width:768px) {
  .site-recruit .photo-list:after, .site-recruit .photo-list:before {
    display: none
  }
}

.site-recruit .photo-list:after {
  left: auto;
  right: 32%
}

.site-recruit .photo-list li {
  list-style: none
}

@media screen and (min-width:769px) {
  .site-recruit .photo-list li {
    width: 28%;
    margin: 0 0 56px
  }
  .site-recruit .photo-list li:nth-last-child(-n+3) {
    margin-bottom: 0
  }
}

@media screen and (max-width:768px) {
  .site-recruit .photo-list li {
    display: -moz-flex;
    display: -o-flex;
    display: -ms-flex;
    display: flex;
    -o-flex-flow: row wrap;
    flex-flow: row wrap;
    -o-justify-content: space-between;
    -ms-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
    margin: 0 0 24px;
    padding: 0 0 24px;
    border-bottom: #e8e8e8 1px solid
  }
  .site-recruit .photo-list li:last-child {
    margin: 0;
    padding: 0;
    border: none
  }
}

@media screen and (max-width:768px) {
  .site-recruit .photo-list li figure {
    width: 88px
  }
}

.site-recruit .photo-list li figure img {
  width: 100%
}

@media screen and (max-width:768px) {
  .site-recruit .photo-list li dl.hard {
    width: calc(100% - 104px)
  }
}

.site-recruit .photo-list li dl.hard dt {
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  margin: 8px 0 4px
}

@media screen and (max-width:768px) {
  .site-recruit .photo-list li dl.hard dt {
    font-size: 15px;
    margin: 0;
    text-align: left
  }
}

.site-recruit .photo-list li dl.hard dd {
  font-size: 13px;
  text-align: center
}

@media screen and (max-width:768px) {
  .site-recruit .photo-list li dl.hard dd {
    text-align: left
  }
}

.site-recruit .photo-list li dl.soft {
  padding: 20px;
  background: #f6f6f8;
  border-radius: 5px;
  margin: 16px 0 0
}

@media screen and (max-width:768px) {
  .site-recruit .photo-list li dl.soft {
    width: 100%
  }
}

.site-recruit .photo-list li dl.soft dt {
  font-weight: 700;
  margin: 0 0 10px;
  padding: 0 0 8px;
  border-bottom: rgba(0, 0, 0, .08) 1px solid
}

.site-recruit .photo-list li dl.soft dd {
  font-size: 13px
}

@media screen and (max-width:768px) {
  .site-recruit .photo-list li dl.soft dd {
    display: inline-block
  }
  .site-recruit .photo-list li dl.soft dd:after {
    content: '、'
  }
  .site-recruit .photo-list li dl.soft dd:last-of-type:after {
    display: none
  }
}

.site-recruit .box figure {
  width: 35%;
  float: left
}

@media screen and (max-width:768px) {
  .site-recruit .box figure {
    width: 100%;
    float: none
  }
}

.site-recruit .box figure img {
  width: 100%
}

.site-recruit .box dl {
  width: 65%;
  float: right;
  padding: 0 0 0 40px
}

@media screen and (max-width:768px) {
  .site-recruit .box dl {
    width: auto;
    float: none;
    padding: 0;
    margin: 24px 0 0
  }
}

.site-recruit .box dl dt {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 16px
}

@media screen and (max-width:768px) {
  .site-recruit .box dl dt {
    font-size: 16px;
    margin: 0 0 12px
  }
}

.site-recruit .main-photo {
  margin: 40px 0 0;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between
}

@media screen and (max-width:768px) {
  .site-recruit .main-photo {
    margin: 32px 0 0;
    display: block
  }
}

.site-recruit .main-photo figure {
  width: calc(50% - 1px)
}

@media screen and (max-width:768px) {
  .site-recruit .main-photo figure {
    width: 100%;
    margin: 0 0 16px
  }
  .site-recruit .main-photo figure:last-of-type {
    margin: 0
  }
}

.site-recruit .main-photo figure img {
  width: 100%
}

.site-recruit p.not-recruit {
  background: #f6f6f8;
  padding: 32px 0;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  margin: 40px 0 0
}

@media screen and (max-width:768px) {
  .site-recruit p.not-recruit {
    padding: 15px;
    font-size: 16px;
    margin: 24px 0 0
  }
}

@media screen and (min-width:769px) {
  .site-portfolio .list li {
    list-style: none;
    width: 31%;
    float: left;
    margin: 0 3.5% 3.5% 0;
    box-shadow: 0 0 24px rgba(0, 0, 0, .1)
  }
  .site-portfolio .list li:nth-child(3n+1) {
    clear: both
  }
  .site-portfolio .list li:nth-child(3n+3) {
    margin-right: 0
  }
  .site-portfolio .list li:nth-last-child(-n+3) {
    margin-bottom: 0
  }
}

@media screen and (max-width:768px) {
  .site-portfolio .list li {
    list-style: none;
    width: 48%;
    float: left;
    margin: 0 4% 4% 0;
    box-shadow: 0 0 15px rgba(0, 0, 0, .12)
  }
  .site-portfolio .list li:nth-child(2n+1) {
    clear: both
  }
  .site-portfolio .list li:nth-child(2n+2) {
    margin-right: 0
  }
  .site-portfolio .list li:nth-last-child(-n+2) {
    margin-bottom: 0
  }
  .site-portfolio .list li:last-child {
    margin: 0
  }
}

.site-portfolio .list li a {
  display: block;
  background: #fff;
  color: #0a0a0a;
  position: relative;
  transition: all .2s 0s cubic-bezier(.455, .03, .515, .955)
}

.site-portfolio .list li a:after {
  content: '';
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 8px 8px;
  border-color: transparent transparent #F4D780 transparent
}

.site-portfolio .list li a:hover {
  z-index: 2;
  transform: scale(1.12);
  box-shadow: 0 0 48px rgba(0, 0, 0, .16)
}

@media screen and (max-width:768px) {
  .site-portfolio .list li a:hover {
    transform: scale(1)
  }
}

.site-portfolio .list li a:hover figure img {
  opacity: 1
}

.site-portfolio .list li a .date {
  width: 56px;
  height: 56px;
  background: #0a0a0a;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  position: absolute;
  top: 0;
  right: 0;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  align-items: center;
  justify-content: center
}

@media screen and (max-width:768px) {
  .site-portfolio .list li a .date {
    width: 48px;
    height: 48px;
    font-size: 10px
  }
}

.site-portfolio .list li a .date time {
  display: block
}

.site-portfolio .list li a .date .y {
  display: block;
  letter-spacing: .08em;
  margin: 0 0 6px
}

.site-portfolio .list li figure img {
  width: 100%
}

.site-portfolio .list li dl {
  padding: 20px 16px;
  font-size: 13px
}

@media screen and (max-width:768px) {
  .site-portfolio .list li dl {
    padding: 15px;
    font-size: 11px
  }
}

.site-portfolio .list li dl dt {
  font-size: 16px;
  font-weight: 700;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  text-overflow: ellipsis
}

@media screen and (max-width:768px) {
  .site-portfolio .list li dl dt {
    font-size: 13px
  }
}

.site-portfolio .list li .text {
  border-top: rgba(246, 246, 248, .88) 2px solid;
  padding: 12px 16px;
  font-size: 12px
}

@media screen and (max-width:768px) {
  .site-portfolio .list li .text {
    display: none
  }
}

.site-portfolio .text-list li {
  padding: 16px;
  background: #f6f6f8;
  text-align: center;
  font-size: 15px
}

@media screen and (min-width:769px) {
  .site-portfolio .text-list li {
    list-style: none;
    width: 32%;
    float: left;
    margin: 0 2% 2% 0
  }
  .site-portfolio .text-list li:nth-child(3n+1) {
    clear: both
  }
  .site-portfolio .text-list li:nth-child(3n+3) {
    margin-right: 0
  }
  .site-portfolio .text-list li:nth-last-child(-n+3) {
    margin-bottom: 0
  }
}

@media screen and (max-width:768px) {
  .site-portfolio .text-list li {
    margin: 0 0 16px;
    font-size: 13px;
    text-align: left
  }
  .site-portfolio .text-list li:last-child {
    margin: 0
  }
}

.site-portfolio #portfolio-detail {
  cursor: url(https://webkid.co.jp/images/common/cursol_off.png) 40 40, auto;
  margin: 0 0 40px
}

.site-portfolio #portfolio-detail.active {
  cursor: url(https://webkid.co.jp/images/common/cursol_on.png) 40 40, auto
}

.site-portfolio #portfolio-detail.active h3:before {
  border-color: #f6f6f8 transparent transparent transparent
}

.site-portfolio #portfolio-detail .swiper-wrapper {
  transition-timing-function: cubic-bezier(.785, .135, .15, .86)
}

.site-portfolio #portfolio-detail .items img {
  width: 100%
}

.site-portfolio #portfolio-detail .swiper-pagination {
  position: relative;
  margin: 16px 0 0;
  bottom: 0;
  cursor: auto!important
}

.site-portfolio #portfolio-detail .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 6px;
  cursor: pointer!important
}

.site-portfolio #portfolio-detail .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #0a0a0a
}

.site-portfolio .portfolio-video {
  margin: 0 0 40px
}

.site-portfolio .portfolio-video iframe {
  width: 100%;
  height: 630px;
  vertical-align: bottom
}

@media screen and (max-width:768px) {
  .site-portfolio .portfolio-video iframe {
    height: 195px
  }
}

.site-portfolio .form-style tbody tr td a, .site-portfolio .form-style tbody tr th a {
  text-decoration: underline
}

.site-portfolio .form-style tbody tr td a i, .site-portfolio .form-style tbody tr th a i {
  font-size: 12px;
  display: inline-block;
  margin: 0 0 0 8px
}

.site-works.archive-bg {
  position: relative;
  top: 0;
  left: 0
}

@media screen and (max-width:768px) {
  .site-works.archive-bg .bg {
    background: #fff
  }
}

.site-works.archive-bg:before {
  content: '';
  width: 100%;
  height: 28px;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0
}

@media screen and (max-width:768px) {
  .site-works.archive-bg:before {
    display: none
  }
}

.site-works .pager {
  margin: -32px 0 0!important;
  padding: 0 0 48px 32px
}

@media screen and (max-width:768px) {
  .site-works .pager {
    margin: 32px 0 0!important;
    padding: 0
  }
}

.site-works .sort {
  border-radius: 6px;
  margin: 0 96px 56px;
  position: relative;
  z-index: 2;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 16px 16px rgba(0, 0, 0, .02)
}

@media screen and (max-width:768px) {
  .site-works .sort {
    margin: 0;
    box-shadow: 0 0 16px rgba(0, 0, 0, .12)
  }
}

.site-works .sort ul {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between
}

.site-works .sort ul li {
  width: 25%;
  text-align: center;
  padding: 15px;
  font-weight: 700;
  color: rgba(10, 10, 10, .56);
  position: relative;
  cursor: pointer
}

@media screen and (max-width:768px) {
  .site-works .sort ul li {
    width: 50%;
    font-size: 12px;
    text-align: left;
    border-bottom: #e8e8e8 1px solid;
    border-right: #e8e8e8 1px solid
  }
  .site-works .sort ul li:nth-child(2n+2) {
    border-right: none
  }
  .site-works .sort ul li:nth-last-child(-n+2) {
    border-bottom: none
  }
}

.site-works .sort ul li a {
  color: #0a0a0a
}

.site-works .sort ul li a.active, .site-works .sort ul li a:hover {
  color: #0a0a0a
}

.site-works .sort ul li a.active i, .site-works .sort ul li a:hover i {
  color: #f65f6a
}

.site-works .sort ul li i {
  display: inline-block;
  margin: 0 12px 0 0
}

.site-works .sort ul li:after {
  content: '';
  width: 1px;
  height: 50%;
  background: #e8e8e8;
  position: absolute;
  top: 25%;
  right: 0
}

@media screen and (max-width:768px) {
  .site-works .sort ul li:after {
    display: none
  }
}

.site-works .sort ul li:last-child {
  border: none
}

.site-works .sort ul li:last-child:after {
  display: none
}

.site-works .grid {
  margin: 0 0 0 -30px
}

@media screen and (max-width:768px) {
  .site-works .grid {
    margin: 0
  }
}

.site-works .grid .grid-inner {
  padding: 0 6%;
  max-width: 1800px;
  margin: 0 auto
}

@media screen and (max-width:1400px) {
  .site-works .grid .grid-inner {
    padding: 0 4%
  }
}

@media screen and (max-width:768px) {
  .site-works .grid .grid-inner {
    padding: 0
  }
}

.site-works .listable {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 50px
}

.site-works .listable.not {
  padding-bottom: 0
}

.site-works .listable.not>li {
  padding-bottom: 0
}

@media screen and (max-width:1400px) {
  .site-works .listable.not>li:last-child {
    display: none
  }
}

@media screen and (max-width:768px) {
  .site-works .listable.not>li:last-child {
    display: block
  }
}

@media screen and (max-width:768px) {
  .site-works .listable {
    display: block;
    padding-bottom: 0
  }
}

.site-works .listable>li {
  width: 25%;
  padding: 0 0 30px 30px;
  transition: all .6s 0s cubic-bezier(.455, .03, .515, .955)
}

@media screen and (max-width:1400px) {
  .site-works .listable>li {
    width: 33.3%
  }
}

@media screen and (max-width:768px) {
  .site-works .listable>li {
    width: auto;
    padding: 0;
    margin: 32px 0 0;
    box-shadow: 0 0 16px rgba(0, 0, 0, .12)
  }
}

.site-works .listable>li a {
  position: relative;
  display: block;
  background: #fff;
  color: #0a0a0a;
  box-shadow: 0 0 30px rgba(0, 0, 0, .02)
}

.site-works .listable>li a:hover figure:before {
  background: rgba(0, 0, 0, .4);
  opacity: 1
}

.site-works .listable>li a:hover figure:after {
  opacity: 1;
  box-shadow: 0 0 48px rgba(0, 0, 0, .32);
  transform: translateX(-50%) translateY(-50%)
}

.site-works .listable>li a:hover figure img {
  opacity: 1;
  transform: scale(1.04)
}

.site-works .listable>li figure {
  overflow: hidden;
  position: relative
}

.site-works .listable>li figure:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transition: all .4s 0s cubic-bezier(.455, .03, .515, .955)
}

.site-works .listable>li figure:after {
  content: 'MORE';
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  color: #0a0a0a;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 40px;
  border-radius: 999px;
  opacity: 0;
  transform: translateX(-50%) translateY(0);
  z-index: 3;
  transition: all .4s 0s cubic-bezier(.455, .03, .515, .955)
}

.site-works .listable>li figure img {
  width: 100%;
  transition: all .4s 0s cubic-bezier(.455, .03, .515, .955)
}

.site-works .listable>li dl {
  position: relative;
  padding: 16px
}

.site-works .listable>li dl dt {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 8px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.site-works .listable>li dl dd {
  font-size: 12px
}

.site-works .listable>li dl dd.date {
  background: #f6f6f8;
  border-radius: 999px;
  font-size: 10px;
  padding: 2px 12px;
  position: absolute;
  right: 16px;
  bottom: 16px
}

.site-works .listable>li .bottom {
  padding: 12px 16px;
  border-top: #f6f6f8 2px solid;
  font-size: 13px
}

@media screen and (max-width:768px) {
  .site-works .listable>li .bottom {
    padding: 10px 16px;
    font-size: 12px
  }
}

.site-works .listable>li .bottom i {
  display: inline-block;
  margin: 0 8px 0 0;
  color: #c8c8d4
}

.site-works .works-detail {
  background: #f6f6f8;
  margin-top: -80px;
  border-bottom: #fff 8px solid
}

@media screen and (max-width:768px) {
  .site-works .works-detail {
    margin-top: -40px
  }
}

.site-works .works-detail .wide-display {
  padding: 0 6%;
  width: auto
}

@media screen and (max-width:1400px) {
  .site-works .works-detail .wide-display {
    padding: 0 4%
  }
}

@media screen and (max-width:768px) {
  .site-works .works-detail .wide-display {
    padding: 0
  }
}

.site-works .works-detail .workscontainer {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  align-items: flex-start
}

@media screen and (max-width:768px) {
  .site-works .works-detail .workscontainer {
    display: block
  }
}

.site-works .works-detail .workscontainer a.btn {
  background: #0a0a0a;
  border: #0a0a0a 1px solid;
  color: #fff;
  font-size: 16px;
  border-radius: 3px;
  display: block;
  padding: 8px 0;
  text-align: center
}

.site-works .works-detail .workscontainer a.btn i.window {
  margin: 0 0 0 8px;
  font-size: 10px;
  transform: translateY(-2px)
}

.site-works .works-detail .workscontainer a.btn i {
  display: inline-block;
  margin: 0 8px 0 0
}

.site-works .works-detail .workscontainer a.btn:hover {
  background: #fff;
  color: #0a0a0a;
  box-shadow: 0 0 8px rgba(10, 10, 10, .08)
}

.site-works .works-detail .workscontainer a.btn.glay {
  background: #ebebef;
  border-color: #ebebef;
  color: #0a0a0a
}

.site-works .works-detail .workscontainer a.btn.glay:hover {
  background: 0 0;
  border-color: #0a0a0a
}

.site-works .works-detail .workscontainer__leftside {
  width: calc(100% - 300px - 20px)
}

@media screen and (max-width:768px) {
  .site-works .works-detail .workscontainer__leftside {
    width: auto
  }
}

.site-works .works-detail .workscontainer__leftside__title {
  padding: 28px;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  align-items: center
}

@media screen and (max-width:768px) {
  .site-works .works-detail .workscontainer__leftside__title {
    padding: 20px 15px;
    display: block
  }
}

.site-works .works-detail .workscontainer__leftside__title h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  width: calc(100% - 200px)
}

@media screen and (max-width:768px) {
  .site-works .works-detail .workscontainer__leftside__title h2 {
    font-size: 18px;
    width: auto
  }
}

.site-works .works-detail .workscontainer__leftside__title h2:before {
  content: attr(data-eng);
  color: #cfcfcf;
  font-size: 13px;
  display: block;
  text-shadow: none;
  margin: 0 0 4px;
  line-height: 1
}

.site-works .works-detail .workscontainer__leftside__title dl {
  width: 200px;
  padding: 0 0 0 32px;
  text-align: right
}

@media screen and (max-width:768px) {
  .site-works .works-detail .workscontainer__leftside__title dl {
    width: auto;
    padding: 0;
    text-align: left;
    margin: 12px 0 0;
    display: -moz-flex;
    display: -o-flex;
    display: -ms-flex;
    display: flex;
    -o-flex-flow: row wrap;
    flex-flow: row wrap;
    -o-justify-content: space-between;
    -ms-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
    align-items: center;
    justify-content: flex-start
  }
}

.site-works .works-detail .workscontainer__leftside__title dl dt {
  display: inline-block;
  background: #ebebef;
  padding: 0 24px;
  font-weight: 700;
  font-size: 13px;
  border-radius: 2px
}

@media screen and (max-width:768px) {
  .site-works .works-detail .workscontainer__leftside__title dl dt {
    margin: 0 15px 0 0
  }
}

.site-works .works-detail .workscontainer__leftside__title dl dd {
  margin: 4px 0 0
}

@media screen and (max-width:768px) {
  .site-works .works-detail .workscontainer__leftside__title dl dd {
    margin: 0
  }
}

.site-works .works-detail .workscontainer__leftside__description {
  border-top: #e8e8e8 1px solid;
  padding: 28px
}

@media screen and (max-width:768px) {
  .site-works .works-detail .workscontainer__leftside__description {
    padding: 20px 15px
  }
}

.site-works .works-detail .workscontainer__leftside__contact {
  border-top: #e8e8e8 1px solid;
  padding: 28px
}

@media screen and (max-width:768px) {
  .site-works .works-detail .workscontainer__leftside__contact {
    padding: 20px 15px
  }
}

.site-works .works-detail .workscontainer__leftside__contact__inner {
  background: #f6f6f8;
  padding: 28px;
  border-radius: 3px
}

@media screen and (max-width:768px) {
  .site-works .works-detail .workscontainer__leftside__contact__inner {
    padding: 20px 15px
  }
}

.site-works .works-detail .workscontainer__leftside__contact__inner h3 {
  font-size: 22px;
  font-weight: 700;
  text-align: center
}

@media screen and (max-width:768px) {
  .site-works .works-detail .workscontainer__leftside__contact__inner h3 {
    font-size: 16px
  }
}

.site-works .works-detail .workscontainer__leftside__contact__list {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  justify-content: center;
  margin: 20px 0 0
}

@media screen and (max-width:768px) {
  .site-works .works-detail .workscontainer__leftside__contact__list {
    margin: 16px 0 0;
    display: block
  }
}

.site-works .works-detail .workscontainer__leftside__contact__list li {
  width: 320px;
  margin: 4px 8px
}

@media screen and (max-width:768px) {
  .site-works .works-detail .workscontainer__leftside__contact__list li {
    margin: 0 0 8px;
    width: auto
  }
  .site-works .works-detail .workscontainer__leftside__contact__list li:last-child {
    margin: 0
  }
}

.site-works .works-detail .workscontainer__leftside__contact__list li a {
  display: block;
  padding: 12px;
  border-radius: 4px;
  border: #0a0a0a 2px solid;
  background: #fff;
  color: #0a0a0a;
  box-shadow: 0 0 8px rgba(10, 10, 10, .08);
  text-align: center;
  font-size: 16px;
  font-weight: 700
}

@media screen and (max-width:768px) {
  .site-works .works-detail .workscontainer__leftside__contact__list li a {
    font-size: 15px
  }
}

.site-works .works-detail .workscontainer__leftside__contact__list li a:hover {
  background: #0a0a0a;
  color: #fff
}

.site-works .works-detail .workscontainer__leftside__contact__list li a i {
  display: inline-block;
  margin: 0 8px 0 0
}

.site-works .works-detail .workscontainer__rightside {
  width: 300px;
  position: -webkit-sticky;
  position: sticky;
  top: 40px
}

@media screen and (max-width:768px) {
  .site-works .works-detail .workscontainer__rightside {
    width: auto;
    position: relative;
    top: 0;
    margin: 32px 0 0
  }
}

.site-works .works-detail .workscontainer__rightside img {
  width: 100%
}

.site-works .works-detail .workscontainer__rightside p.caption {
  margin: 8px 0 0;
  font-size: 12px;
  text-align: center
}

.site-works .works-detail .workscontainer__rightside__list {
  padding: 28px
}

@media screen and (max-width:768px) {
  .site-works .works-detail .workscontainer__rightside__list {
    padding: 20px 15px
  }
}

.site-works .works-detail .workscontainer__rightside__list li dl {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 15px;
  margin: 0 0 8px;
  line-height: 1.6
}

@media screen and (max-width:768px) {
  .site-works .works-detail .workscontainer__rightside__list li dl {
    font-size: 14px
  }
}

.site-works .works-detail .workscontainer__rightside__list li dl dt {
  width: 64px
}

.site-works .works-detail .workscontainer__rightside__list li dl dd {
  width: calc(100% - 64px)
}

.site-works .works-detail .workscontainer__rightside__list__links {
  margin: 20px 0 0
}

.site-works .works-detail .workscontainer__rightside__listable {
  padding: 28px
}

@media screen and (max-width:768px) {
  .site-works .works-detail .workscontainer__rightside__listable {
    padding: 20px 15px
  }
}

.site-works .works-detail .workscontainer__rightside__listable li {
  margin: 0 0 10px
}

.site-works .works-detail .workscontainer__rightside__listable li:last-child {
  margin: 0
}

.site-works .works-detail .workscontainer__rightside__listable li a {
  display: inline-block;
  text-decoration: underline;
  color: #0a0a0a;
  font-size: 15px
}

.site-works .works-detail .workscontainer__rightside__listable li a i {
  display: inline-block;
  margin: 0 8px 0 0;
  font-size: 13px
}

.site-works .works-detail .workscontainer__rightside__listable li a:hover {
  text-decoration: none
}

.site-works .works-detail .workscontainer__rightside__more {
  padding: 28px;
  border-top: #e8e8e8 1px solid
}

@media screen and (max-width:768px) {
  .site-works .works-detail .workscontainer__rightside__more {
    padding: 20px 15px
  }
}

.site-works .works-detail .workscontainer__rightside__h {
  padding: 16px 28px;
  font-size: 17px;
  font-weight: 700;
  border-bottom: #e8e8e8 1px solid;
  position: relative
}

@media screen and (max-width:768px) {
  .site-works .works-detail .workscontainer__rightside__h {
    padding: 15px
  }
}

.site-works .works-detail .workscontainer__rightside__h i {
  position: absolute;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  font-size: 14px
}

@media screen and (max-width:768px) {
  .site-works .works-detail .workscontainer__rightside__h i {
    right: 15px
  }
}

.site-works .works-detail .workscontainer__leftside__inner, .site-works .works-detail .workscontainer__rightside__inner {
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, .04)
}

.site-works .works-detail .workscontainer__leftside__inner--conner, .site-works .works-detail .workscontainer__rightside__inner--conner {
  position: relative;
  overflow: hidden
}

.site-works .works-detail .workscontainer__leftside__inner--conner:before, .site-works .works-detail .workscontainer__rightside__inner--conner:before {
  content: '';
  width: 16px;
  height: 16px;
  background: #F4D780;
  position: absolute;
  top: -8px;
  left: -8px;
  transform: rotate(45deg)
}

.site-works .works-detail .workscontainer__leftside__inner--bottom, .site-works .works-detail .workscontainer__rightside__inner--bottom {
  margin: 20px 0 0
}

.site-works .works-detail #works-slide .swiper-wrapper {
  transition-timing-function: cubic-bezier(.86, 0, .07, 1)
}

.site-works .works-detail #works-slide img {
  width: 100%
}

.site-works .works-detail #works-slide .swiper-slide {
  padding: 28px
}

@media screen and (max-width:768px) {
  .site-works .works-detail #works-slide .swiper-slide {
    padding: 0
  }
}

.site-works .works-detail #works-slide .swiper-pagination {
  position: absolute;
  left: 0;
  bottom: 0;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  width: 100%;
  justify-content: flex-start;
  z-index: 1
}

.site-works .works-detail #works-slide .swiper-pagination span {
  width: 48px;
  height: 48px;
  line-height: 48px;
  display: block;
  text-align: center;
  color: #fff;
  opacity: 1;
  font-size: 15px;
  border-radius: 0;
  margin: 0;
  background: #ebebef;
  color: #0a0a0a;
  border-right: #f6f6f8 1px solid
}

@media screen and (max-width:768px) {
  .site-works .works-detail #works-slide .swiper-pagination span {
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 12px
  }
}

.site-works .works-detail #works-slide .swiper-pagination span:last-of-type {
  border: none
}

.site-works .works-detail #works-slide .swiper-pagination span.swiper-pagination-bullet-active {
  background: #0a0a0a;
  color: #fff;
  border: none
}

.site-works .v-enter-active, .site-works .v-leave-active {
  transition: all .4s cubic-bezier(.785, .135, .15, .86)
}

.site-works .v-enter, .site-works .v-leave-to {
  top: 100%
}

.site-blog .site-module .blog-list>li {
  box-shadow: 0 0 24px rgba(0, 0, 0, .12);
  margin: 0 0 24px
}

@media screen and (max-width:768px) {
  .site-blog .site-module .blog-list>li {
    box-shadow: 0 0 15px rgba(0, 0, 0, .12);
    margin: 0 0 16px
  }
}

.site-blog .site-module .blog-list>li figure {
  width: 112px
}

@media screen and (max-width:768px) {
  .site-blog .site-module .blog-list>li figure {
    width: 88px
  }
}

.site-blog .site-module .blog-list>li .text {
  width: calc(100% - 140px)
}

@media screen and (max-width:768px) {
  .site-blog .site-module .blog-list>li .text {
    width: calc(100% - 104px)
  }
}

.site-blog .site-module .blog-list>li .text h4 {
  font-size: 18px
}

@media screen and (max-width:768px) {
  .site-blog .site-module .blog-list>li .text h4 {
    font-size: 12px
  }
}

.site-blog .site-module .clum-side {
  position: -webkit-sticky;
  position: sticky;
  top: 20px
}

@media screen and (max-width:768px) {
  .site-blog .site-module .clum-side {
    position: relative;
    top: 0
  }
}

@media screen and (max-width:768px) {
  .site-blog .site-module .clum-side .mini-list>li {
    padding: 15px;
    box-shadow: 0 0 15px rgba(0, 0, 0, .12)
  }
}

.site-blog .site-module .clum-side .mini-list>li .meta {
  margin: 0 0 8px;
  position: relative
}

.site-blog .site-module .clum-side .mini-list>li .meta .like {
  position: absolute;
  top: 2px;
  right: 0;
  font-size: 12px
}

.site-blog .site-module .clum-side .mini-list>li .meta .like i {
  color: #f65f6a;
  display: inline-block;
  margin: 0 4px 0 0
}

.site-blog .site-module .clum-side .mini-list>li .thumb {
  width: 24%;
  margin: 8px 0 0;
  float: left
}

@media screen and (max-width:768px) {
  .site-blog .site-module .clum-side .mini-list>li .thumb {
    width: 64px
  }
}

.site-blog .site-module .clum-side .mini-list>li .thumb img {
  width: 100%
}

.site-blog .site-module .clum-side .mini-list>li h4 {
  width: 76%;
  float: right;
  padding: 0 0 0 24px;
  font-size: 13px;
  font-weight: 700
}

@media screen and (max-width:768px) {
  .site-blog .site-module .clum-side .mini-list>li h4 {
    width: calc(100% - 80px);
    font-size: 12px;
    padding: 0
  }
}

.site-blog .site-module .clum-side h4.borders {
  margin-top: 56px
}

@media screen and (max-width:768px) {
  .site-blog .site-module .clum-side h4.borders {
    margin-top: 40px
  }
}

.site-blog .site-module .clum-side .cate-list li {
  float: left;
  margin: 0 8px 8px 0
}

.site-blog .site-module .clum-side .cate-list li a {
  display: block;
  padding: 4px 8px;
  border: #0a0a0a 1px solid;
  color: #0a0a0a;
  border-radius: 4px
}

.site-blog .site-module .clum-side .cate-list li a:hover {
  background: #0a0a0a;
  color: #fff
}

.site-blog .blog-detail .title-area {
  border: #e8e8e8 2px solid;
  padding: 24px 32px;
  margin: 0 0 32px
}

@media screen and (max-width:768px) {
  .site-blog .blog-detail .title-area {
    padding: 15px;
    margin: 0 0 24pz
  }
}

.site-blog .blog-detail .title-area h1 {
  font-size: 22px;
  font-weight: 700
}

@media screen and (max-width:768px) {
  .site-blog .blog-detail .title-area h1 {
    font-size: 16px
  }
}

.site-blog .blog-detail .title-area .meta {
  border-top: #e8e8e8 2px solid;
  margin: 16px 0 0;
  padding: 16px 0 0
}

.site-blog .blog-detail .title-area .meta li {
  list-style: none;
  float: left;
  margin: 0 12px 0 0
}

.site-blog .blog-detail .title-area .meta li .cate, .site-blog .blog-detail .title-area .meta li time {
  display: block;
  padding: 2px 12px;
  background: #0a0a0a;
  border: #0a0a0a 1px solid;
  color: #fff
}

@media screen and (max-width:768px) {
  .site-blog .blog-detail .title-area .meta li .cate, .site-blog .blog-detail .title-area .meta li time {
    font-size: 12px
  }
}

.site-blog .blog-detail .title-area .meta li .cate {
  background: #fff;
  color: #0a0a0a
}

.site-blog .blog-detail .title-area .meta li.like {
  float: right
}

.site-blog .blog-detail .title-area .meta li.like i {
  display: inline-block;
  color: #f65f6a;
  margin: 12px 8px 0 0;
  line-height: 1
}

.site-blog .blog-detail .title-area .meta li:last-child {
  margin: 0
}

.site-blog .blog-detail .main-photo {
  margin: 0 0 48px
}

@media screen and (max-width:768px) {
  .site-blog .blog-detail .main-photo {
    margin: 0 0 24px
  }
}

.site-blog .blog-detail .main-photo img {
  width: 100%
}

.site-blog .blog-detail .detail-area {
  font-family: 'Open Sans', "游ゴシック", YuGothic, "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", Helvetica, Arial, Verdana, sans-serif;
  font-weight: 500;
  font-feature-settings: "palt";
  letter-spacing: .016em;
  font-size: 16px;
  line-height: 2;
  text-align: justify
}

@media screen and (max-width:768px) {
  .site-blog .blog-detail .detail-area {
    font-size: 14px
  }
  .site-blog .blog-detail .detail-area h3.borders, .site-blog .blog-detail .detail-area h4.borders {
    line-height: 1.6
  }
}

.site-blog .blog-detail .detail-area img {
  max-width: 100%;
  height: auto
}

.site-blog .blog-detail .detail-area .mokuji {
  margin: 48px 0 80px;
  background: #f6f6f8;
  padding: 24px
}

@media screen and (max-width:768px) {
  .site-blog .blog-detail .detail-area .mokuji {
    margin: 24px 0 32px;
    padding: 20px
  }
}

.site-blog .blog-detail .detail-area .mokuji h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 16px
}

@media screen and (max-width:768px) {
  .site-blog .blog-detail .detail-area .mokuji h2 {
    font-size: 15px;
    margin: 0 0 12px
  }
}

.site-blog .blog-detail .detail-area .mokuji h2 i {
  display: inline-block;
  margin: 0 12px 0 0;
  opacity: .24
}

.site-blog .blog-detail .detail-area .mokuji ol li {
  list-style: none;
  border-bottom: rgba(0, 0, 0, .16) 1px dashed;
  padding: 0 0 12px;
  margin: 0 0 12px
}

.site-blog .blog-detail .detail-area .mokuji ol li a:hover {
  text-decoration: underline
}

.site-blog .blog-detail .detail-area .mokuji ol li:last-child {
  margin: 0;
  padding: 0;
  border: none
}

.site-blog .blog-detail .detail-area .mokuji ol li:nth-child(1) a:before {
  content: "1."
}

.site-blog .blog-detail .detail-area .mokuji ol li:nth-child(2) a:before {
  content: "2."
}

.site-blog .blog-detail .detail-area .mokuji ol li:nth-child(3) a:before {
  content: "3."
}

.site-blog .blog-detail .detail-area .mokuji ol li:nth-child(4) a:before {
  content: "4."
}

.site-blog .blog-detail .detail-area .mokuji ol li:nth-child(5) a:before {
  content: "5."
}

.site-blog .blog-detail .detail-area .mokuji ol li:nth-child(6) a:before {
  content: "6."
}

.site-blog .blog-detail .detail-area .mokuji ol li:nth-child(7) a:before {
  content: "7."
}

.site-blog .blog-detail .detail-area .mokuji ol li:nth-child(8) a:before {
  content: "8."
}

.site-blog .blog-detail .detail-area .mokuji ol li:nth-child(9) a:before {
  content: "9."
}

.site-blog .blog-detail .detail-area .mokuji ol li:nth-child(10) a:before {
  content: "10."
}

.site-blog .blog-detail .detail-area .mokuji ol li:nth-child(11) a:before {
  content: "11."
}

.site-blog .blog-detail .detail-area .mokuji ol li:nth-child(12) a:before {
  content: "12."
}

.site-blog .blog-detail .detail-area .mokuji ol li:nth-child(13) a:before {
  content: "13."
}

.site-blog .blog-detail .detail-area .mokuji ol li:nth-child(14) a:before {
  content: "14."
}

.site-blog .blog-detail .detail-area .mokuji ol li:nth-child(15) a:before {
  content: "15."
}

.site-blog .blog-detail .detail-area .mokuji ol li:nth-child(16) a:before {
  content: "16."
}

.site-blog .blog-detail .detail-area .mokuji ol li:nth-child(17) a:before {
  content: "17."
}

.site-blog .blog-detail .detail-area .mokuji ol li:nth-child(18) a:before {
  content: "18."
}

.site-blog .blog-detail .detail-area .mokuji ol li:nth-child(19) a:before {
  content: "19."
}

.site-blog .blog-detail .detail-area .mokuji ol li:nth-child(20) a:before {
  content: "20."
}

.site-blog .blog-detail .sec {
  margin: 0 0 80px
}

@media screen and (max-width:768px) {
  .site-blog .blog-detail .sec {
    margin: 0 0 40px
  }
}

.site-blog .blog-detail .sec .hcb_wrap {
  margin: 0
}

.site-blog .blog-detail .sec h4 {
  background: #f6f6f8;
  border-radius: 4px;
  padding: 16px 24px;
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 20px
}

@media screen and (max-width:768px) {
  .site-blog .blog-detail .sec h4 {
    font-size: 17px;
    padding: 12px 16px
  }
}

.site-blog .blog-detail .sec dl, .site-blog .blog-detail .sec figure, .site-blog .blog-detail .sec ol, .site-blog .blog-detail .sec p, .site-blog .blog-detail .sec pre, .site-blog .blog-detail .sec table, .site-blog .blog-detail .sec ul {
  margin: 0 0 40px
}

@media screen and (max-width:768px) {
  .site-blog .blog-detail .sec dl, .site-blog .blog-detail .sec figure, .site-blog .blog-detail .sec ol, .site-blog .blog-detail .sec p, .site-blog .blog-detail .sec pre, .site-blog .blog-detail .sec table, .site-blog .blog-detail .sec ul {
    margin: 0 0 24px
  }
}

.site-blog .blog-detail .sec dl.m, .site-blog .blog-detail .sec figure.m, .site-blog .blog-detail .sec ol.m, .site-blog .blog-detail .sec p.m, .site-blog .blog-detail .sec pre.m, .site-blog .blog-detail .sec table.m, .site-blog .blog-detail .sec ul.m {
  margin: 0 0 24px
}

@media screen and (max-width:768px) {
  .site-blog .blog-detail .sec dl.m, .site-blog .blog-detail .sec figure.m, .site-blog .blog-detail .sec ol.m, .site-blog .blog-detail .sec p.m, .site-blog .blog-detail .sec pre.m, .site-blog .blog-detail .sec table.m, .site-blog .blog-detail .sec ul.m {
    margin: 0 0 16px
  }
}

.site-blog .blog-detail .sec ol, .site-blog .blog-detail .sec ul {
  padding: 16px 24px;
  border: #e8e8e8 2px solid;
  border-radius: 6px
}

@media screen and (max-width:768px) {
  .site-blog .blog-detail .sec ol, .site-blog .blog-detail .sec ul {
    padding: 12px 16px
  }
}

.site-blog .blog-detail .sec ol li, .site-blog .blog-detail .sec ul li {
  list-style: none;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
  padding: 0 0 8px;
  border-bottom: #e8e8e8 1px solid
}

.site-blog .blog-detail .sec ol li:before, .site-blog .blog-detail .sec ul li:before {
  content: '・';
  display: inline-block;
  margin: 0 8px 0 0
}

.site-blog .blog-detail .sec ol li:last-child, .site-blog .blog-detail .sec ul li:last-child {
  margin: 0;
  padding: 0;
  border: none
}

.site-blog .blog-detail .sec strong {
  background: linear-gradient(transparent 80%, #F4D780 80%);
  font-weight: 700
}

.site-blog .blog-detail .sec dl {
  padding: 16px 24px;
  border: #e8e8e8 2px solid;
  border-radius: 6px
}

@media screen and (max-width:768px) {
  .site-blog .blog-detail .sec dl {
    padding: 12px 16px
  }
}

.site-blog .blog-detail .sec dl dt {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
  padding: 0 0 12px;
  border-bottom: #e8e8e8 1px solid
}

@media screen and (max-width:768px) {
  .site-blog .blog-detail .sec dl dt {
    font-size: 16px
  }
}

.site-blog .blog-detail .sec dl dd {
  font-size: 15px
}

@media screen and (max-width:768px) {
  .site-blog .blog-detail .sec dl dd {
    font-size: 13px
  }
}

.site-blog .blog-detail .sec blockquote {
  border: #e8e8e8 2px dashed;
  background: rgba(246, 246, 248, .88);
  padding: 24px
}

@media screen and (max-width:768px) {
  .site-blog .blog-detail .sec blockquote {
    padding: 20px
  }
}

.site-blog .blog-detail .sec blockquote:before {
  content: '引用：'
}

.site-blog .blog-detail .sec blockquote cite {
  display: block;
  text-align: right;
  font-style: normal;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: #e8e8e8 2px dashed
}

@media screen and (max-width:768px) {
  .site-blog .blog-detail .sec blockquote cite {
    font-size: 10px
  }
}

.site-blog .blog-detail .sec .charactor {
  border: none;
  padding: 0
}

.site-blog .blog-detail .sec .charactor li {
  padding: 0;
  margin: 0 0 48px;
  border: none
}

@media screen and (max-width:768px) {
  .site-blog .blog-detail .sec .charactor li {
    margin: 0 0 24px
  }
}

.site-blog .blog-detail .sec .charactor li:last-child {
  margin: 0
}

.site-blog .blog-detail .sec .charactor .boy, .site-blog .blog-detail .sec .charactor .girl {
  position: relative
}

.site-blog .blog-detail .sec .charactor .boy:before, .site-blog .blog-detail .sec .charactor .girl:before {
  content: '';
  width: 88px;
  height: 88px;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0
}

@media screen and (max-width:768px) {
  .site-blog .blog-detail .sec .charactor .boy:before, .site-blog .blog-detail .sec .charactor .girl:before {
    width: 48px;
    height: 48px
  }
}

.site-blog .blog-detail .sec .charactor .boy .comment, .site-blog .blog-detail .sec .charactor .girl .comment {
  width: calc(100% - 136px);
  background: #fff;
  min-height: 88px;
  padding: 24px 32px;
  box-shadow: 0 0 16px rgba(0, 0, 0, .16);
  border-radius: 8px;
  position: relative;
  text-align: left;
  font-weight: 500
}

@media screen and (max-width:768px) {
  .site-blog .blog-detail .sec .charactor .boy .comment, .site-blog .blog-detail .sec .charactor .girl .comment {
    width: calc(100% - 72px);
    padding: 20px;
    border-radius: 4px
  }
}

.site-blog .blog-detail .sec .charactor .boy .comment:before, .site-blog .blog-detail .sec .charactor .girl .comment:before {
  content: '';
  position: absolute;
  top: 36px;
  left: -12px;
  z-index: 1;
  width: 0;
  height: 0;
  background: #fff;
  box-shadow: -8px 8px 8px rgba(0, 0, 0, .08);
  width: 24px;
  height: 24px;
  transform: rotate(45deg)
}

@media screen and (max-width:768px) {
  .site-blog .blog-detail .sec .charactor .boy .comment:before, .site-blog .blog-detail .sec .charactor .girl .comment:before {
    top: 19.2px;
    left: -8px;
    width: 16px;
    height: 16px
  }
}

.site-blog .blog-detail .sec .charactor .girl.cut-1:before {
  background-image: url(https://webkid.co.jp/images/blog/webicon_1.png)
}

.site-blog .blog-detail .sec .charactor .boy.cut-1:before {
  background-image: url(https://webkid.co.jp/images/blog/kidicon_1.png)
}

.site-blog .blog-detail .sec .charactor .girl.cut-2:before {
  background-image: url(https://webkid.co.jp/images/blog/webicon_2.png)
}

.site-blog .blog-detail .sec .charactor .boy.cut-2:before {
  background-image: url(https://webkid.co.jp/images/blog/kidicon_2.png)
}

.site-blog .blog-detail .sec .charactor .girl.cut-3:before {
  background-image: url(https://webkid.co.jp/images/blog/webicon_3.png)
}

.site-blog .blog-detail .sec .charactor .boy.cut-3:before {
  background-image: url(https://webkid.co.jp/images/blog/kidicon_3.png)
}

.site-blog .blog-detail .sec .charactor .girl.cut-4:before {
  background-image: url(https://webkid.co.jp/images/blog/webicon_4.png)
}

.site-blog .blog-detail .sec .charactor .boy.cut-4:before {
  background-image: url(https://webkid.co.jp/images/blog/kidicon_4.png)
}

.site-blog .blog-detail .sec .charactor .girl.cut-5:before {
  background-image: url(https://webkid.co.jp/images/blog/webicon_5.png)
}

.site-blog .blog-detail .sec .charactor .boy.cut-5:before {
  background-image: url(https://webkid.co.jp/images/blog/kidicon_5.png)
}

.site-blog .blog-detail .sec .charactor .girl.cut-6:before {
  background-image: url(https://webkid.co.jp/images/blog/webicon_6.png)
}

.site-blog .blog-detail .sec .charactor .boy.cut-6:before {
  background-image: url(https://webkid.co.jp/images/blog/kidicon_6.png)
}

.site-blog .blog-detail .sec .charactor .girl.cut-7:before {
  background-image: url(https://webkid.co.jp/images/blog/webicon_7.png)
}

.site-blog .blog-detail .sec .charactor .boy.cut-7:before {
  background-image: url(https://webkid.co.jp/images/blog/kidicon_7.png)
}

.site-blog .blog-detail .sec .charactor .girl.cut-8:before {
  background-image: url(https://webkid.co.jp/images/blog/webicon_8.png)
}

.site-blog .blog-detail .sec .charactor .boy.cut-8:before {
  background-image: url(https://webkid.co.jp/images/blog/kidicon_8.png)
}

.site-blog .blog-detail .sec .charactor .girl.cut-9:before {
  background-image: url(https://webkid.co.jp/images/blog/webicon_9.png)
}

.site-blog .blog-detail .sec .charactor .boy.cut-9:before {
  background-image: url(https://webkid.co.jp/images/blog/kidicon_9.png)
}

.site-blog .blog-detail .sec .charactor .girl.cut-10:before {
  background-image: url(https://webkid.co.jp/images/blog/webicon_10.png)
}

.site-blog .blog-detail .sec .charactor .boy.cut-10:before {
  background-image: url(https://webkid.co.jp/images/blog/kidicon_10.png)
}

.site-blog .blog-detail .sec .charactor .girl.cut-11:before {
  background-image: url(https://webkid.co.jp/images/blog/webicon_11.png)
}

.site-blog .blog-detail .sec .charactor .boy.cut-11:before {
  background-image: url(https://webkid.co.jp/images/blog/kidicon_11.png)
}

.site-blog .blog-detail .sec .charactor .girl .comment {
  float: right
}

.site-blog .blog-detail .sec .charactor .boy:before {
  background-size: cover;
  left: auto;
  right: 0
}

.site-blog .blog-detail .sec .charactor .boy .comment:before {
  left: auto;
  right: -12px;
  box-shadow: 8px -8px 8px rgba(0, 0, 0, .08)
}

@media screen and (max-width:768px) {
  .site-blog .blog-detail .sec .charactor .boy .comment:before {
    right: -8px
  }
}

.site-blog .blog-detail .sec .appreach {
  text-align: left;
  padding: 24px;
  margin: 40px 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 5px 1px #e5e5e5
}

.site-blog .blog-detail .sec .appreach:after {
  content: "";
  display: block;
  clear: both
}

.site-blog .blog-detail .sec .appreach img, .site-blog .blog-detail .sec .appreach p {
  margin: 0;
  padding: 0
}

.site-blog .blog-detail .sec .appreach a:after {
  display: none
}

.site-blog .blog-detail .sec .appreach__icon {
  float: left;
  border-radius: 10%;
  overflow: hidden;
  margin: 0 3% 0 0!important;
  width: 25%!important;
  height: auto!important;
  max-width: 120px!important
}

.site-blog .blog-detail .sec .appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%
}

.site-blog .blog-detail .sec .appreach__detail:after {
  content: "";
  display: block;
  clear: both
}

.site-blog .blog-detail .sec p.appreach__name {
  font-size: 16px;
  color: #555;
  padding-bottom: 10px;
  font-weight: 700;
  line-height: 1.5em!important;
  max-height: 3em;
  overflow: hidden
}

.site-blog .blog-detail .sec .appreach__info {
  font-size: 12px!important;
  color: #888
}

.site-blog .blog-detail .sec .appreach__developper, .site-blog .blog-detail .sec .appreach__price {
  margin-right: .5em
}

.site-blog .blog-detail .sec .appreach__posted a {
  margin-left: .5em
}

.site-blog .blog-detail .sec .appreach__links {
  float: left;
  height: 40px;
  margin-top: 15px;
  white-space: nowrap
}

.site-blog .blog-detail .sec .appreach__aslink img {
  margin-right: 10px;
  height: 40px;
  width: 135px
}

.site-blog .blog-detail .sec .appreach__gplink img {
  height: 40px;
  width: 134.5px
}

@media only screen and (max-width:786px) {
  .site-blog .blog-detail .sec .appreach__info {
    font-size: 11px!important
  }
  .site-blog .blog-detail .sec p.appreach__name {
    font-size: 15px
  }
}

.site-blog .blog-detail .sec .amazlet-box {
  margin: 40px 0;
  padding: 24px;
  border-radius: 6px;
  box-shadow: 0 2px 5px 1px #e5e5e5
}

.site-blog .blog-detail .sec .youtube {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden
}

.site-blog .blog-detail .sec .youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.site-blog .social-link {
  padding: 32px;
  border: #e8e8e8 2px solid;
  border-radius: 6px
}

@media screen and (max-width:768px) {
  .site-blog .social-link {
    padding: 20px;
    text-align: center
  }
}

.site-blog .social-link li {
  list-style: none;
  float: left;
  margin: 0 16px 0 0;
  font-size: 15px;
  font-weight: 700
}

@media screen and (max-width:768px) {
  .site-blog .social-link li {
    font-size: 14px;
    margin: 0 6px;
    display: inline-block;
    float: none;
    vertical-align: middle
  }
}

.site-blog .social-link li:first-child {
  margin: 0 32px 0 0
}

@media screen and (max-width:768px) {
  .site-blog .social-link li:first-child {
    margin: 0 0 8px;
    display: block
  }
}

.site-blog .social-link li a {
  display: block;
  width: 32px;
  border-radius: 50%;
  overflow: hidden
}

.site-blog .social-link li a img {
  width: 100%
}

.site-news .information .list {
  width: 100%;
  height: auto;
  padding: 8px 0 0
}

@media screen and (max-width:768px) {
  .site-news .information .list {
    margin: 0;
    padding: 0;
    border: none
  }
}

.site-news .detail {
  font-size: 15px;
  line-height: 1.9
}

@media screen and (max-width:768px) {
  .site-news .detail {
    font-size: 13.5px
  }
}

.site-news .detail a {
  text-decoration: underline
}

.site-news .detail figure {
  margin: 0 0 40px
}

@media screen and (max-width:768px) {
  .site-news .detail figure {
    margin: 0 0 24px
  }
}

.site-news .detail img {
  max-width: 100%;
  height: auto
}

.site-privacy .text {
  margin: 0 0 48px
}

@media screen and (max-width:768px) {
  .site-privacy .text {
    margin: 0 0 40px
  }
}

.site-privacy .margin {
  margin: 0 0 24px
}

@media screen and (max-width:768px) {
  .site-privacy .site-module .table-style tbody tr th br {
    display: none
  }
}

.site-privacy .site-module .table-style tbody tr td {
  font-size: 13px
}

.site-privacy ol li {
  list-style: inside decimal
}

.site-privacy ol li>ol {
  padding: 0 0 0 2em
}

.site-sitemap ul li {
  list-style: none;
  margin: 0 0 40px;
  padding: 0 0 40px;
  border-bottom: #e8e8e8 1px solid
}

@media screen and (max-width:768px) {
  .site-sitemap ul li {
    margin: 0 0 32px;
    padding: 0 0 32px
  }
}

.site-sitemap ul li:last-child {
  margin: 0;
  padding: 0;
  border: none
}

.site-sitemap ul li a {
  color: #0a0a0a
}

.site-sitemap ul li dl dt {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 16px
}

@media screen and (max-width:768px) {
  .site-sitemap ul li dl dt {
    font-size: 16px;
    margin: 0 0 12px
  }
}

.site-sitemap ul li dl dd {
  float: left
}

@media screen and (min-width:769px) {
  .site-sitemap ul li dl dd {
    width: 23.5%;
    margin: 0 2% 2% 0
  }
  .site-sitemap ul li dl dd:nth-of-type(4n+1) {
    clear: both
  }
  .site-sitemap ul li dl dd:nth-of-type(4n+4) {
    margin-right: 0
  }
  .site-sitemap ul li dl dd:nth-last-of-type(-n+4) {
    margin-bottom: 0
  }
}

@media screen and (max-width:768px) {
  .site-sitemap ul li dl dd {
    width: 48.5%;
    margin: 0 3% 3% 0
  }
  .site-sitemap ul li dl dd:nth-of-type(2n+1) {
    clear: both
  }
  .site-sitemap ul li dl dd:nth-of-type(2n+2) {
    margin-right: 0
  }
  .site-sitemap ul li dl dd:nth-last-of-type(-n+2) {
    margin-bottom: 0
  }
}

.site-sitemap ul li dl dd a {
  background: #fff;
  border: #0a0a0a 1px solid;
  border-radius: 6px;
  display: block;
  padding: 12px 0;
  text-align: center;
  font-weight: 700
}

.site-sitemap ul li dl dd a:hover {
  background: #0a0a0a;
  color: #fff
}

.site-contact .text {
  text-align: center;
  font-size: 16px
}

@media screen and (max-width:768px) {
  .site-contact .text {
    font-size: 13px;
    margin: 0 15px;
    text-align: left
  }
  .site-contact .text br {
    display: none
  }
}

.site-contact .text a {
  text-decoration: underline
}

.site-contact dl.tel {
  text-align: center;
  line-height: 1;
  margin: 32px 0 0;
  background: #f6f6f8;
  padding: 32px 0;
  border-radius: 6px
}

@media screen and (max-width:768px) {
  .site-contact dl.tel {
    padding: 24px 15px
  }
}

.site-contact dl.tel dt {
  font-size: 18px;
  font-weight: 700
}

@media screen and (max-width:768px) {
  .site-contact dl.tel dt {
    font-size: 16px
  }
}

.site-contact dl.tel dd {
  margin: 8px 0 0
}

.site-contact dl.tel dd a {
  font-family: Poppins, sans-serif;
  font-size: 48px;
  font-weight: 700
}

@media screen and (max-width:768px) {
  .site-contact dl.tel dd a {
    font-size: 32px
  }
}

.site-contact .list {
  margin: 40px 0 0
}

@media screen and (max-width:768px) {
  .site-contact .list {
    margin: 32px 0 0
  }
}

.site-contact .list ul {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between
}

.site-contact .list ul li {
  list-style: none
}

@media screen and (min-width:769px) {
  .site-contact .list ul li {
    list-style: none;
    width: 31%;
    float: left;
    margin: 0 3.5% 3.5% 0
  }
  .site-contact .list ul li:nth-child(3n+1) {
    clear: both
  }
  .site-contact .list ul li:nth-child(3n+3) {
    margin-right: 0
  }
  .site-contact .list ul li:nth-last-child(-n+3) {
    margin-bottom: 0
  }
}

@media screen and (max-width:768px) {
  .site-contact .list ul li {
    margin: 0 0 16px
  }
  .site-contact .list ul li:last-child {
    margin: 0
  }
}

.site-contact .list ul li a {
  display: block;
  width: 100%;
  height: 100%;
  color: #0a0a0a;
  padding: 32px;
  border: #e8e8e8 2px solid;
  border-radius: 6px;
  transition: all 80ms 0s cubic-bezier(.455, .03, .515, .955)
}

@media screen and (max-width:768px) {
  .site-contact .list ul li a {
    padding: 20px
  }
}

.site-contact .list ul li a:hover {
  transform: scale(1.04);
  box-shadow: 0 0 32px rgba(0, 0, 0, .12)
}

.site-contact .list ul li a:hover i {
  opacity: 1
}

.site-contact .list ul li i {
  font-size: 56px;
  opacity: .16;
  display: block;
  text-align: center;
  padding: 0 0 24px;
  transition: all .2s 0s cubic-bezier(.455, .03, .515, .955)
}

@media screen and (max-width:768px) {
  .site-contact .list ul li i {
    float: left;
    font-size: 20px;
    margin: 0 16px 0 0;
    padding: 4px 0 0;
    opacity: 1
  }
}

.site-contact .list ul li dl dt {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 8px
}

@media screen and (max-width:768px) {
  .site-contact .list ul li dl dt {
    font-size: 16px;
    text-align: left
  }
}

.site-contact .list ul li dl dd {
  font-size: 13px;
  text-align: justify
}

@media screen and (max-width:768px) {
  .site-contact .list ul li dl dd {
    clear: both
  }
}

.site-contact ol.flow {
  position: relative;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  margin: 40px 0 64px
}

@media screen and (max-width:768px) {
  .site-contact ol.flow {
    margin: 24px 0 32px
  }
}

.site-contact ol.flow:after, .site-contact ol.flow:before {
  content: '';
  background: url(../../images/common/arrow_icon_b_2x.png) no-repeat center;
  width: 5%;
  height: 100%;
  position: absolute;
  top: 0
}

@media screen and (max-width:768px) {
  .site-contact ol.flow:after, .site-contact ol.flow:before {
    display: none
  }
}

.site-contact ol.flow:before {
  left: 30%
}

.site-contact ol.flow:after {
  right: 30%
}

.site-contact ol.flow li {
  position: relative;
  width: 30%;
  margin: 0 5% 0 0;
  background: #fff;
  border: #0a0a0a 1px solid;
  padding: 20px 0;
  list-style: none;
  font-size: 15px;
  font-weight: 700;
  text-align: center
}

@media screen and (max-width:768px) {
  .site-contact ol.flow li {
    width: 100%;
    margin: 0 0 24px;
    padding: 15px
  }
  .site-contact ol.flow li:last-child {
    margin: 0
  }
}

.site-contact ol.flow li.active:before {
  content: 'イマココ';
  width: 56px;
  height: 56px;
  line-height: 56px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  color: #fff;
  background: #0a0a0a;
  position: absolute;
  top: -24px;
  right: 12px
}

.site-contact ol.flow li.active:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 8px 0 8px;
  border-color: #0a0a0a transparent transparent transparent;
  position: absolute;
  top: 28px;
  right: 32px
}

@media screen and (max-width:768px) {
  .site-contact ol.flow li.active:after {
    top: auto;
    right: auto;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%) scale(.8)
  }
}

.site-contact ol.flow li:last-child {
  margin: 0
}

.site-contact .send {
  text-align: center;
  margin: 48px 0 0
}

@media screen and (max-width:768px) {
  .site-contact .send {
    margin: 32px 0 0
  }
}

.site-contact .send input {
  color: #fff;
  background: #0a0a0a;
  border: #0a0a0a 1px solid;
  font-size: 20px;
  padding: 16px 96px;
  cursor: pointer;
  display: inline-block;
  border-radius: 999px
}

.site-contact .send input:disabled {
  opacity: .12;
  cursor: auto
}

@media screen and (max-width:768px) {
  .site-contact .send input {
    display: block;
    width: 100%;
    padding: 16px 0
  }
}

.site-404 .text {
  text-align: center;
  font-size: 15px
}

.site-live h2.title {
  font-size: 38px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 4px
}

@media screen and (max-width:768px) {
  .site-live h2.title {
    font-size: 20px
  }
}

.site-live p.context {
  font-size: 15px;
  text-align: center;
  margin: 0 0 32px
}

@media screen and (max-width:768px) {
  .site-live p.context {
    margin: 0 15px 24px;
    font-size: 13px;
    text-align: justify
  }
}

.site-live h3.context {
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.66;
  margin: 0 0 32px
}

@media screen and (max-width:768px) {
  .site-live h3.context {
    font-size: 20px;
    margin: 0 0 20px
  }
}

.site-live h3.context:after {
  content: attr(data-eng);
  font-size: 16px;
  letter-spacing: .12em;
  font-weight: 700;
  display: block;
  margin: 4px 0 0
}

@media screen and (max-width:768px) {
  .site-live h3.context:after {
    font-size: 13px
  }
}

.site-live .boxflex {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  align-items: center
}

.site-live .boxflex.mbs {
  margin: 0 0 48px;
  padding: 0 0 48px;
  border-bottom: #e8e8e8 1px solid
}

@media screen and (max-width:768px) {
  .site-live .boxflex.mbs {
    padding: 0;
    border: none;
    margin: 0 0 32px
  }
}

@media screen and (max-width:768px) {
  .site-live .boxflex {
    display: block
  }
}

.site-live .boxflex figure {
  width: calc(50% - 24px)
}

@media screen and (max-width:768px) {
  .site-live .boxflex figure {
    width: auto
  }
}

.site-live .boxflex figure img {
  width: 100%
}

.site-live .boxflex dl {
  width: calc(50% - 24px)
}

@media screen and (max-width:768px) {
  .site-live .boxflex dl {
    width: auto;
    margin: 20px 0 0
  }
}

.site-live .boxflex dl dt {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.66;
  margin: 0 0 12px
}

@media screen and (max-width:768px) {
  .site-live .boxflex dl dt {
    font-size: 20px
  }
  .site-live .boxflex dl dt br {
    display: none
  }
}

.site-live .boxflex dl dd {
  text-align: justify
}

.site-live .three {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between
}

@media screen and (max-width:768px) {
  .site-live .three {
    display: block
  }
}

.site-live .three li {
  list-style: none;
  width: 31%
}

@media screen and (max-width:768px) {
  .site-live .three li {
    width: auto;
    margin: 0 0 24px
  }
  .site-live .three li:last-child {
    margin: 0
  }
}

.site-live .three li img {
  width: 100%
}

.site-live .three li dl {
  margin: 16px 0 0
}

.site-live .three li dl dt {
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  margin: 0 0 5px
}

@media screen and (max-width:768px) {
  .site-live .three li dl dt {
    font-size: 18px
  }
}

.site-live .three li dl dd {
  text-align: justify
}

.site-live .twoitem__item {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  margin: 0 0 20px;
  padding: 0 0 20px;
  border-bottom: #e8e8e8 1px solid
}

@media screen and (max-width:768px) {
  .site-live .twoitem__item {
    margin: 0 0 15px;
    padding: 0 0 15px
  }
}

.site-live .twoitem__item:last-child {
  margin: 0
}

.site-live .twoitem__item figure {
  width: 280px
}

@media screen and (max-width:768px) {
  .site-live .twoitem__item figure {
    width: auto
  }
}

.site-live .twoitem__item figure img {
  width: 100%
}

.site-live .twoitem__item dl {
  width: calc(100% - 280px);
  padding: 0 0 0 40px
}

@media screen and (max-width:768px) {
  .site-live .twoitem__item dl {
    width: auto;
    padding: 15px 0 0
  }
}

.site-live .twoitem__item dl dt {
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 6px
}

@media screen and (max-width:768px) {
  .site-live .twoitem__item dl dt {
    font-size: 18px
  }
}

.site-live .twoitem__item dl dd {
  text-align: justify
}

.site-live .thumblist {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  justify-content: flex-start;
  margin: 0 0 0 -24px
}

@media screen and (max-width:768px) {
  .site-live .thumblist {
    margin: 0 0 0 -15px
  }
}

.site-live .thumblist li {
  list-style: none;
  width: 20%;
  margin: 24px 0 0;
  padding: 0 0 0 24px
}

@media screen and (max-width:768px) {
  .site-live .thumblist li {
    width: 50%;
    padding: 0 0 0 15px;
    margin: 15px 0 0
  }
}

@media screen and (min-width:769px) {
  .site-live .thumblist li:nth-child(-n+5) {
    margin-top: 0
  }
}

.site-live .thumblist li img {
  width: 100%
}

.site-live .thumblist li figcaption {
  text-align: center;
  padding: 8px 15px;
  background: #fff
}

.site-live .iv {
  margin: 48px 0 0;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between
}

@media screen and (max-width:768px) {
  .site-live .iv {
    margin: 15px 0 0;
    display: block
  }
}

.site-live .iv__item {
  width: calc(50% - 20px)
}

@media screen and (max-width:768px) {
  .site-live .iv__item {
    width: auto;
    margin: 0 0 15px
  }
}

.site-live .iv__item iframe {
  width: 100%;
  vertical-align: bottom
}

@media screen and (max-width:768px) {
  .site-live .iv__item iframe {
    height: 200px
  }
}

.site-live .iv__item img {
  width: 100%
}

.site-live .iv__item__txt {
  background: #fff;
  padding: 10px 15px;
  font-size: 15px;
  text-align: center
}

.site-live .site-module.kussion {
  background: #000;
  text-align: center;
  color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative
}

.site-live .site-module.kussion:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #0a0a0a;
  opacity: .32
}

.site-live .site-module.kussion dl {
  font-weight: 700
}

.site-live .site-module.kussion dl dt {
  font-size: 28px;
  margin: 0 0 8px
}

@media screen and (max-width:768px) {
  .site-live .site-module.kussion dl dt {
    font-size: 18px
  }
}

.site-live .site-module.kussion dl dd {
  font-size: 15px
}

@media screen and (max-width:768px) {
  .site-live .site-module.kussion dl dd {
    font-size: 13px;
    margin: 0 15px;
    text-align: justify
  }
  .site-live .site-module.kussion dl dd br {
    display: none
  }
}

@media screen and (max-width:768px) {
  .site-live .site-module.kussion dl dd.btnarea {
    margin: 24px 15px 0
  }
}

.site-live .site-module.kussion dl dd.btnarea a {
  background: 0 0;
  border-color: #fff
}

@media screen and (max-width:768px) {
  .site-live .site-module.kussion dl dd.btnarea a {
    margin: 0 0 16px
  }
  .site-live .site-module.kussion dl dd.btnarea a:last-of-type {
    margin: 0
  }
}

.site-live .site-module.kussion dl dd.btnarea a:hover {
  background: #fff;
  color: normal
}

.site-live .form-style {
  background: #fff
}

.site-live p.sml {
  margin: 16px 0 0;
  text-align: right
}

.site-subsidy .harfbg {
  position: relative
}

.site-subsidy .harfbg .bg, .site-subsidy .harfbg:after {
  content: '';
  width: 100%;
  height: 46.5%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  overflow: hidden
}

@media screen and (max-width:768px) {
  .site-subsidy .harfbg .bg, .site-subsidy .harfbg:after {
    height: 42%
  }
}

.site-subsidy .harfbg:after {
  background: #0a0a0a;
  opacity: .4
}

.site-subsidy .harfbg .bg i {
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  background-position: center;
  background-size: cover;
  transition: top .8s linear, left .8s linear, width .8s linear, height .8s linear
}

.site-subsidy .harfbg .bg._active i {
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%
}

.site-subsidy .tate {
  position: relative
}

.site-subsidy .tate.w:before {
  background: #fff;
  background: linear-gradient(to bottom, #fff 0, #fff 50%, #0a0a0a 51%, #0a0a0a 100%)
}

.site-subsidy .tate:before {
  content: '';
  width: 1px;
  height: 120px;
  position: absolute;
  background: #0a0a0a;
  left: 50%;
  top: 0;
  transform: translateY(-50%)
}

@media screen and (max-width:768px) {
  .site-subsidy .tate:before {
    display: none
  }
}

.site-subsidy h2.title {
  text-align: center;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.5;
  margin: 0 0 32px
}

@media screen and (max-width:768px) {
  .site-subsidy h2.title {
    font-size: 18px;
    line-height: 1.6;
    margin: 0 0 16px
  }
}

.site-subsidy h2.title:after {
  display: block;
  font-size: 16px;
  text-transform: uppercase;
  margin: 10px 0 0;
  opacity: .2
}

.site-subsidy p.context {
  text-align: center;
  font-size: 16px
}

@media screen and (max-width:768px) {
  .site-subsidy p.context {
    font-size: 13px;
    text-align: justify;
    margin: 0 15px
  }
  .site-subsidy p.context br {
    display: none
  }
}

.site-subsidy .btnarea.mt {
  margin-top: 48px
}

@media screen and (max-width:768px) {
  .site-subsidy .btnarea.mt {
    margin-top: 24px
  }
}

.site-subsidy .description {
  border: #f6f6f8 8px solid;
  padding: 24px;
  padding-top: 48px;
  margin: 64px 0 24px;
  background: #fff;
  position: relative
}

@media screen and (max-width:768px) {
  .site-subsidy .description {
    margin: 56px 0 15px;
    padding: 20px;
    padding-top: 40px
  }
}

.site-subsidy .description>dt {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) skewX(-8deg)
}

.site-subsidy .description>dd {
  text-align: justify;
  padding: 0 8%
}

@media screen and (max-width:768px) {
  .site-subsidy .description>dd {
    padding: 0
  }
}

.site-subsidy .limit {
  text-align: center;
  font-weight: 700;
  margin: 40px 0 0
}

@media screen and (max-width:768px) {
  .site-subsidy .limit {
    margin: 24px 0 0
  }
}

.site-subsidy .limit__title {
  font-size: 24px;
  line-height: 1;
  margin: 0 0 8px
}

@media screen and (max-width:768px) {
  .site-subsidy .limit__title {
    font-size: 17px
  }
}

.site-subsidy .limit__description {
  font-size: 40px;
  line-height: 1
}

@media screen and (max-width:768px) {
  .site-subsidy .limit__description {
    font-size: 20px
  }
}

.site-subsidy .limit__description strong {
  font-size: 80px
}

@media screen and (max-width:768px) {
  .site-subsidy .limit__description strong {
    font-size: 40px
  }
}

.site-subsidy .limit__description small {
  font-size: 1.3rem
}

@media screen and (max-width:768px) {
  .site-subsidy .limit__description small {
    display: block;
    margin: 8px 0 0;
    font-size: 1.2rem
  }
}

.site-subsidy .faqlist {
  margin: 48px 0
}

@media screen and (max-width:768px) {
  .site-subsidy .faqlist {
    margin: 24px 0
  }
}

.site-subsidy .faqlist li {
  list-style: none;
  font-size: 15px;
  padding: 15px 14%;
  border-radius: 999px;
  margin: 0 0 24px;
  box-shadow: 0 8px 32px -4px rgba(0, 0, 0, .24);
  background: #fff;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  align-items: center;
  position: relative
}

@media screen and (max-width:768px) {
  .site-subsidy .faqlist li {
    padding: 12px 24px;
    font-size: 13px;
    border-radius: 5px
  }
}

.site-subsidy .faqlist__icon {
  width: 36px
}

@media screen and (max-width:768px) {
  .site-subsidy .faqlist__icon {
    width: 32px
  }
}

.site-subsidy .faqlist__icon img {
  width: 100%
}

.site-subsidy .faqlist__txt {
  width: calc(100% - 36px);
  font-weight: 700;
  padding: 0 0 0 32px
}

@media screen and (max-width:768px) {
  .site-subsidy .faqlist__txt {
    width: calc(100% - 32px);
    padding: 0 0 0 24px
  }
}

.site-subsidy .answer {
  text-align: center;
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  text-shadow: 0 0 16px rgba(0, 0, 0, .32)
}

@media screen and (max-width:768px) {
  .site-subsidy .answer {
    font-size: 16px;
    padding: 0 15px
  }
  .site-subsidy .answer br {
    display: none
  }
}

.site-subsidy .answer .btnarea {
  margin: 40px 0 0
}

@media screen and (max-width:768px) {
  .site-subsidy .answer .btnarea {
    margin: 24px 0 0
  }
}

.site-subsidy .answer .btnarea a {
  border-color: #fff;
  background: 0 0
}

.site-subsidy .ttl {
  background: #0a0a0a;
  color: #fff;
  width: 440px;
  margin: 0 auto;
  padding: 8px;
  font-weight: 700;
  font-size: 22px;
  text-align: center;
  transform: skewX(-8deg)
}

@media screen and (max-width:768px) {
  .site-subsidy .ttl {
    width: 88%;
    font-size: 18px
  }
}

.site-subsidy .sidebox {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  align-items: center;
  margin: 48px 0 0;
  position: relative
}

@media screen and (max-width:768px) {
  .site-subsidy .sidebox {
    margin: 24px 0 0;
    display: block
  }
}

.site-subsidy .sidebox._active>dl {
  opacity: 1;
  transform: translateY(0)
}

.site-subsidy .sidebox:after {
  content: '';
  width: calc(100% - 400px - 48px);
  height: 1px;
  position: absolute;
  right: 0;
  bottom: 0;
  background: #e8e8e8
}

@media screen and (max-width:768px) {
  .site-subsidy .sidebox:after {
    display: none
  }
}

.site-subsidy .sidebox.rvs:after {
  right: auto;
  left: 0
}

.site-subsidy .sidebox.rvs figure {
  order: 2
}

.site-subsidy .sidebox.rvs dl {
  padding: 0 48px 0 0
}

@media screen and (max-width:768px) {
  .site-subsidy .sidebox.rvs dl {
    padding: 0
  }
}

.site-subsidy .sidebox__pic {
  width: 400px
}

@media screen and (max-width:768px) {
  .site-subsidy .sidebox__pic {
    width: auto;
    margin: 0 0 20px
  }
}

.site-subsidy .sidebox__pic img {
  width: 100%
}

.site-subsidy .sidebox__txt {
  width: calc(100% - 400px);
  padding: 0 0 0 48px;
  opacity: 0;
  transform: translateY(32px);
  transition: all .4s .4s cubic-bezier(.455, .03, .515, .955)
}

@media screen and (max-width:768px) {
  .site-subsidy .sidebox__txt {
    width: auto;
    padding: 0
  }
}

.site-subsidy .sidebox__txt dt {
  font-weight: 700;
  font-size: 28px
}

@media screen and (max-width:768px) {
  .site-subsidy .sidebox__txt dt {
    font-size: 17px
  }
}

.site-subsidy .sidebox__txt dt:before {
  content: attr(data-eng);
  color: #F4D780;
  font-size: 36px;
  line-height: 1;
  margin: 0 10px 0 0;
  transform: translateY(2px);
  display: inline-block
}

@media screen and (max-width:768px) {
  .site-subsidy .sidebox__txt dt:before {
    font-size: 20px
  }
}

.site-subsidy .sidebox__txt dd {
  margin: 10px 0 0;
  font-size: 15px
}

@media screen and (max-width:768px) {
  .site-subsidy .sidebox__txt dd {
    font-size: 13px
  }
}

.site-subsidy .fulllist {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  margin: 48px 0 64px
}

@media screen and (max-width:768px) {
  .site-subsidy .fulllist {
    margin: 24px 0 40px;
    display: block
  }
}

.site-subsidy .fulllist li {
  width: calc(33.3% - 2px);
  background: #fff
}

@media screen and (max-width:768px) {
  .site-subsidy .fulllist li {
    width: auto;
    margin: 0 0 24px
  }
  .site-subsidy .fulllist li:last-child {
    margin: 0
  }
}

.site-subsidy .fulllist li figure img {
  width: 100%
}

.site-subsidy .fulllist li dl {
  padding: 24px;
  position: relative
}

@media screen and (max-width:768px) {
  .site-subsidy .fulllist li dl {
    padding: 15px 20px
  }
}

.site-subsidy .fulllist li dl:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 32px;
  height: 32px;
  transform: translateX(-50%) translateY(-50%);
  background: #F4D780;
  border-radius: 50%;
  border: #fff 8px solid
}

.site-subsidy .fulllist li dl dt {
  font-weight: 700;
  font-size: 17px;
  text-align: center
}

.site-subsidy .fulllist li dl dd {
  font-size: 13px;
  text-align: justify;
  margin: 8px 0 0
}

.site-subsidy .fulllist li dl dd.btnarea {
  margin: 16px 0 0;
  text-align: center
}

.site-subsidy .fulllist li dl dd.btnarea a {
  padding: 8px 0;
  display: block
}

.site-subsidy .site-web .answers li dl {
  border: none
}

.site-subsidy .subsidytable {
  margin: 0 0 64px
}

@media screen and (max-width:768px) {
  .site-subsidy .subsidytable {
    margin: 0 0 32px
  }
}

.site-subsidy .subsidytable span.yel {
  color: #F4D780;
  font-weight: 700;
  font-size: 24px;
  display: inline-block;
  margin: 0 8px 0 0;
  line-height: 1;
  transform: translateY(2px)
}

@media screen and (max-width:768px) {
  .site-subsidy .subsidytable span.yel {
    font-size: 20px
  }
}

.site-simulate {
  margin: 0 0 56px;
  position: relative
}

@media screen and (max-width:768px) {
  .site-simulate {
    margin: 0 0 40px
  }
}

.site-simulate .balloon {
  position: absolute;
  top: -58px;
  right: 0;
  background: #F4D780;
  font-weight: 700;
  border-radius: 999px;
  padding: 12px 24px;
  z-index: 2;
  -webkit-animation: baloon .8s infinite;
  animation: baloon .8s infinite
}

@-webkit-keyframes baloon {
  0% {
    top: -58px
  }
  30% {
    top: -54px
  }
  60% {
    top: -58px
  }
  100% {
    top: -58px
  }
}

@keyframes baloon {
  0% {
    top: -58px
  }
  30% {
    top: -54px
  }
  60% {
    top: -58px
  }
  100% {
    top: -58px
  }
}

.site-simulate .balloon:after {
  content: '';
  position: absolute;
  right: 48px;
  bottom: -16px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 16px 12px 0 12px;
  border-color: #F4D780 transparent transparent transparent
}

@media screen and (max-width:768px) {
  .site-simulate .balloon {
    position: relative;
    top: 0;
    left: 0;
    -webkit-animation: none;
    animation: none;
    display: block;
    text-align: center;
    border-radius: 4px;
    margin: 0 0 32px;
    font-size: 15px
  }
  .site-simulate .balloon:after {
    right: auto;
    left: 50%;
    transform: translateX(-50%)
  }
}

.site-simulate .simulate-module {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  align-items: flex-start
}

@media screen and (max-width:768px) {
  .site-simulate .simulate-module {
    display: block
  }
}

.site-simulate .caliculate {
  width: calc(100% - 330px)
}

@media screen and (max-width:768px) {
  .site-simulate .caliculate {
    width: 100%
  }
}

.site-simulate .result {
  width: 300px;
  box-shadow: 0 0 24px rgba(0, 0, 0, .08);
  border: rgba(0, 0, 0, .08) 1px solid;
  border-radius: 4px;
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
  overflow: hidden
}

@media screen and (max-width:768px) {
  .site-simulate .result {
    width: 100%;
    position: relative;
    top: 0;
    margin: 24px 0 0
  }
}

.site-simulate .result h3 {
  background: #0a0a0a;
  color: #fff;
  font-weight: 700;
  padding: 12px 24px;
  font-size: 18px
}

@media screen and (max-width:768px) {
  .site-simulate .result h3 {
    padding: 10px 15px;
    font-size: 18px
  }
}

.site-simulate .result h3 i {
  display: inline-block;
  margin: 0 8px 0 0
}

.site-simulate .result h4 {
  font-weight: 700;
  font-size: 20px;
  text-align: center
}

@media screen and (max-width:768px) {
  .site-simulate .result h4 {
    font-size: 16px
  }
}

.site-simulate .result__inner {
  padding: 24px;
  border-top: #e8e8e8 1px solid;
  position: relative
}

@media screen and (max-width:768px) {
  .site-simulate .result__inner {
    padding: 15px
  }
}

.site-simulate .result__inner:first-of-type {
  border: none
}

.site-simulate .result__inner__close {
  position: absolute;
  top: 6px;
  right: 12px;
  cursor: pointer;
  font-size: 20px
}

.site-simulate .result__inner__close:hover {
  opacity: .48
}

.site-simulate .result__inner__box {
  margin: 4px 0 0
}

.site-simulate .result__inner__box p {
  line-height: 1.6
}

.site-simulate .result__inner__box p a {
  font-weight: 700;
  text-decoration: underline
}

.site-simulate .result__inner__box p a:hover {
  text-decoration: none
}

.site-simulate .result__inner__box .mb {
  margin: 0 0 12px
}

.site-simulate .result__inner__box input {
  display: block;
  padding: 12px;
  border: #dedede 2px solid;
  font-family: 'Open Sans', "游ゴシック", YuGothic, "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", Helvetica, Arial, Verdana, sans-serif;
  font-weight: 500;
  font-feature-settings: "palt";
  letter-spacing: .016em;
  width: 100%;
  font-size: 15px;
  border-radius: 3px
}

.site-simulate .result__inner__box input:focus {
  border: #c9c9c9 2px solid
}

.site-simulate .result__item dt {
  font-weight: 700;
  line-height: 1;
  transform: translateY(-4px)
}

.site-simulate .result__item dt strong {
  font-size: 36px;
  display: inline-block;
  margin: 0 4px 0 0
}

@media screen and (max-width:768px) {
  .site-simulate .result__item dt strong {
    font-size: 24px
  }
}

.site-simulate .result__item dt strong.active {
  -webkit-animation: big .5s cubic-bezier(.85, 0, .15, 1);
  animation: big .5s cubic-bezier(.85, 0, .15, 1)
}

@-webkit-keyframes big {
  0% {
    transform: scale(1)
  }
  60% {
    transform: scale(1.2)
  }
  100% {
    transform: scale(1)
  }
}

@keyframes big {
  0% {
    transform: scale(1)
  }
  60% {
    transform: scale(1.2)
  }
  100% {
    transform: scale(1)
  }
}

.site-simulate .result__item dt small {
  font-size: 32px
}

.site-simulate .result__item__tax {
  margin: 8px 0 0;
  font-size: 16px
}

.site-simulate .result__item__tax span {
  background: #f0f0f4;
  color: #0a0a0a;
  padding: 0 16px;
  border-radius: 3px;
  font-size: 13px;
  display: inline-block;
  margin: 0 12px 0 0
}

.site-simulate .result .btn {
  display: block;
  margin: 0 0 12px;
  background: #fff;
  color: #0a0a0a;
  font-size: 16px;
  border: #0a0a0a 2px solid;
  border-radius: 4px;
  text-align: center;
  padding: 8px 0;
  font-weight: 700;
  box-shadow: 0 0 4px rgba(0, 0, 0, .08);
  cursor: pointer
}

.site-simulate .result .btn.mt {
  margin-top: 12px!important
}

.site-simulate .result .btn:hover {
  background: #0a0a0a;
  color: #fff
}

.site-simulate .result .btn.glay {
  box-shadow: none;
  background: #f6f6f8;
  border-color: #f6f6f8
}

.site-simulate .result .btn.glay:hover {
  background: #0a0a0a;
  color: #fff;
  border-color: #0a0a0a;
  box-shadow: 0 0 4px rgba(0, 0, 0, .08)
}

.site-simulate .result .btn i {
  display: inline-block;
  margin: 0 8px 0 0
}

.site-simulate .result .btn:last-of-type {
  margin: 0
}

@media screen and (min-width:769px) {
  .site-simulate .form-style tbody tr td, .site-simulate .form-style tbody tr th {
    font-size: 15px
  }
  .site-simulate .form-style tbody tr td select, .site-simulate .form-style tbody tr th select {
    width: 100%;
    display: block;
    background: #fff;
    border: #e8e8e8 1px solid
  }
  .site-simulate .form-style tbody tr th {
    width: 330px!important
  }
  .site-simulate .form-style tbody tr td.large {
    background: #f6f6f8;
    padding-right: 24px;
    width: 280px;
    border-left: #e8e8e8 1px solid
  }
}

@media screen and (max-width:768px) {
  .site-simulate .form-style tbody tr td select, .site-simulate .form-style tbody tr th select {
    width: 100%
  }
  .site-simulate .form-style tbody tr:last-child td {
    border-bottom: #e8e8e8 1px solid!important
  }
  .site-simulate .form-style tbody tr:last-child td:last-child {
    border-bottom: none!important
  }
}

.site-simulate #sendform {
  display: none
}

.site-taxeel .form-style {
  background: #fff
}

.site-taxeel .logos {
  text-align: center
}

.site-taxeel .logos img {
  width: 240px
}

@media screen and (max-width:768px) {
  .site-taxeel .logos img {
    width: 200px
  }
}

.site-taxeel .context {
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  margin: 16px 0 0
}

@media screen and (max-width:768px) {
  .site-taxeel .context {
    margin: 12px 0 0;
    font-size: 12px
  }
}

.site-taxeel .site-module .btnarea {
  transform: translateX(-2px)
}

@media screen and (max-width:768px) {
  .site-taxeel .site-module .btnarea {
    transform: translateX(0)
  }
}

.site-taxeel .site-module .btnarea a {
  background: #F4D780;
  border-color: #F4D780;
  border-radius: 999px
}

.site-taxeel .site-module .btnarea a:hover {
  color: #F4D780
}

.site-taxeel .first-elem {
  position: relative;
  border-bottom: #fff 16px solid
}

@media screen and (max-width:768px) {
  .site-taxeel .first-elem {
    border-bottom: #fff 8px solid
  }
}

.site-taxeel .first-elem:after {
  content: '';
  width: 100%;
  height: 260px;
  background: #f6f6f8;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1
}

@media screen and (max-width:768px) {
  .site-taxeel .first-elem:after {
    display: none
  }
}

.site-taxeel .first-elem .first-sec {
  margin: 48px 0 0;
  padding: 88px 0 96px;
  position: relative
}

@media screen and (max-width:768px) {
  .site-taxeel .first-elem .first-sec {
    margin: 32px 0 0;
    padding: 0
  }
}

.site-taxeel .first-elem .first-sec:before {
  content: '';
  width: 82%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  background: #f6f6f8;
  border-radius: 999px 0 0 999px
}

@media screen and (max-width:768px) {
  .site-taxeel .first-elem .first-sec:before {
    display: none
  }
}

.site-taxeel .first-elem .first-sec:after {
  content: '';
  width: 46%;
  height: calc(100% - 64px);
  position: absolute;
  top: 32px;
  left: 4%;
  min-width: 528px;
  background: url(https://webkid.co.jp/images/taxxel/first_illust.png) no-repeat right center;
  background-size: contain
}

@media screen and (max-width:768px) {
  .site-taxeel .first-elem .first-sec:after {
    display: none
  }
}

.site-taxeel .first-elem .first-sec .content-box .text {
  width: 50%;
  padding-left: 56px;
  margin: 0 0 0 50%
}

@media screen and (max-width:768px) {
  .site-taxeel .first-elem .first-sec .content-box .text {
    width: 100%;
    padding: 0;
    margin: 0
  }
}

.site-taxeel .first-elem .first-sec .content-box .text img {
  width: 100%
}

.site-taxeel .first-elem .first-sec .content-box .text h3 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 24px
}

@media screen and (max-width:768px) {
  .site-taxeel .first-elem .first-sec .content-box .text h3 {
    font-size: 16px;
    margin: 0 0 16px;
    text-align: center
  }
}

.site-taxeel .first-elem .first-sec .content-box .text .mes {
  font-size: 15px;
  text-align: justify
}

@media screen and (max-width:768px) {
  .site-taxeel .first-elem .first-sec .content-box .text .mes {
    font-size: 13px;
    margin: 0 15px
  }
}

.site-taxeel .three {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  margin: 80px 0 0
}

@media screen and (max-width:768px) {
  .site-taxeel .three {
    margin: 40px 0 0;
    display: block
  }
}

.site-taxeel .three.no-margin {
  margin: 0
}

@media screen and (max-width:768px) {
  .site-taxeel .three.no-margin {
    margin: 0
  }
}

.site-taxeel .three li {
  width: 29%;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 0 32px rgba(0, 0, 0, .08);
  padding: 40px 24px 24px;
  position: relative
}

@media screen and (max-width:768px) {
  .site-taxeel .three li {
    width: 100%;
    padding: 20px;
    margin: 0 0 48px
  }
  .site-taxeel .three li:last-child {
    margin: 0
  }
}

.site-taxeel .three li:after {
  content: "\f067";
  color: #F4D780;
  font-family: "Font Awesome 5 Free";
  font-size: 24px;
  font-weight: 900;
  position: absolute;
  right: -47px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2
}

@media screen and (max-width:768px) {
  .site-taxeel .three li:after {
    top: auto;
    right: auto;
    bottom: -44px;
    left: 50%;
    transform: translateX(-50%)
  }
}

.site-taxeel .three li:last-child:after {
  display: none
}

.site-taxeel .three li i.icon {
  color: #F4D780;
  display: block;
  text-align: center;
  font-size: 48px;
  line-height: 1
}

.site-taxeel .three li dl {
  margin: 24px 0 0
}

@media screen and (max-width:768px) {
  .site-taxeel .three li dl {
    margin: 16px 0 0
  }
}

.site-taxeel .three li dl dt {
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  margin: 0 0 16px
}

@media screen and (max-width:768px) {
  .site-taxeel .three li dl dt {
    font-size: 16px;
    margin: 0 0 8px
  }
}

.site-taxeel .three li dl dd {
  text-align: justify
}

.site-taxeel .content-elem {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 48px;
  padding: 0 0 48px;
  border-bottom: rgba(0, 0, 0, .08) 1px solid
}

@media screen and (max-width:768px) {
  .site-taxeel .content-elem {
    margin: 0 0 24px;
    padding: 0 0 24px
  }
}

.site-taxeel .content-elem:last-of-type {
  border: none;
  padding: 0;
  margin: 0
}

.site-taxeel .content-elem.rvs .fig {
  order: 2
}

@media screen and (max-width:768px) {
  .site-taxeel .content-elem.rvs .fig {
    order: 0
  }
}

.site-taxeel .content-elem .fig, .site-taxeel .content-elem dl {
  width: 47.5%
}

@media screen and (max-width:768px) {
  .site-taxeel .content-elem .fig, .site-taxeel .content-elem dl {
    width: 100%
  }
  .site-taxeel .content-elem .fig iframe, .site-taxeel .content-elem dl iframe {
    height: 200px;
    vertical-align: bottom
  }
}

.site-taxeel .content-elem .fig img, .site-taxeel .content-elem dl img {
  width: 100%
}

@media screen and (max-width:768px) {
  .site-taxeel .content-elem .fig img, .site-taxeel .content-elem dl img {
    display: block;
    padding: 0 15px
  }
}

.site-taxeel .content-elem dl dt {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 24px;
  line-height: 1;
  padding: 0 0 0 48px;
  position: relative
}

@media screen and (max-width:768px) {
  .site-taxeel .content-elem dl dt {
    font-size: 18px;
    margin: 24px 0 16px;
    padding: 0 0 0 32px
  }
}

.site-taxeel .content-elem dl dt:before {
  content: attr(data-numb);
  width: 30px;
  height: 30px;
  text-align: center;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  align-items: center;
  justify-content: center;
  background: #f65f6a;
  font-size: 22px;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0
}

@media screen and (max-width:768px) {
  .site-taxeel .content-elem dl dt:before {
    width: 20px;
    height: 20px;
    font-size: 12px
  }
}

.site-taxeel .content-elem dl dd {
  font-size: 15px;
  text-align: justify
}

@media screen and (max-width:768px) {
  .site-taxeel .content-elem dl dd {
    font-size: 13px
  }
  .site-taxeel .content-elem dl dd br {
    display: none
  }
}

.site-taxeel .content-elem dl dd.btnarea a {
  border-radius: 8px
}

@media screen and (max-width:768px) {
  .site-taxeel .content-elem dl dd.btnarea a {
    border-radius: 999px
  }
}

.site-taxeel .simulator {
  margin: 0 0 80px
}

@media screen and (max-width:768px) {
  .site-taxeel .simulator {
    margin: 0 0 32px
  }
}

.site-taxeel .simulator .three li {
  padding: 0
}

.site-taxeel .simulator .three li dl {
  padding: 24px;
  padding-top: 0
}

.site-taxeel .simulator img {
  width: 100%
}

.site-taxeel .small-list {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  padding: 0 0 16px
}

@media screen and (max-width:768px) {
  .site-taxeel .small-list {
    display: block
  }
}

.site-taxeel .small-list li {
  list-style: none;
  width: 23.5%;
  background: #fff;
  padding: 24px;
  padding-top: 32px;
  border-radius: 6px;
  box-shadow: 0 0 24px rgba(0, 0, 0, .08)
}

@media screen and (max-width:768px) {
  .site-taxeel .small-list li {
    width: auto;
    padding: 20px;
    padding-top: 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, .08);
    margin: 0 0 24px
  }
  .site-taxeel .small-list li:last-child {
    margin: 0
  }
}

.site-taxeel .small-list li i.icon {
  color: #F4D780;
  display: block;
  text-align: center;
  font-size: 32px;
  line-height: 1
}

@media screen and (max-width:768px) {
  .site-taxeel .small-list li i.icon {
    font-size: 28px
  }
}

.site-taxeel .small-list li dl {
  margin: 24px 0 0
}

@media screen and (max-width:768px) {
  .site-taxeel .small-list li dl {
    margin: 16px 0 0
  }
}

.site-taxeel .small-list li dl dt {
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 8px
}

@media screen and (max-width:768px) {
  .site-taxeel .small-list li dl dt {
    font-size: 15px
  }
}

.site-taxeel .small-list li dl dd {
  text-align: justify
}

@media screen and (max-width:768px) {
  .site-taxeel .small-list li dl dd {
    margin: 0 15px
  }
  .site-taxeel .small-list li dl dd br {
    display: none
  }
}

.site-taxeel .bnr {
  margin: 48px 0
}

.site-taxeel .bnr img {
  width: 100%
}

.site-taxeel .demo {
  margin: 0 0 48px
}

.site-taxeel .demo iframe {
  vertical-align: bottom
}

.site-woreco .site-module h2.large.not {
  margin-bottom: 8px
}

.site-woreco .site-module .btnarea {
  margin: 40px 0 0
}

@media screen and (max-width:768px) {
  .site-woreco .site-module .btnarea {
    margin: 24px 0 0
  }
}

.site-woreco .site-module .form-style strong {
  color: #007bff;
  font-size: 32px;
  line-height: 1;
  font-weight: 700
}

.site-woreco .site-module .btnarea .white {
  border: #fff 1px solid;
  color: #fff;
  background: 0 0
}

.site-woreco .site-module .btnarea .white:hover {
  background: #fff;
  color: #007bff
}

.site-woreco .logo {
  width: 160px;
  margin: 0 auto 12px
}

@media screen and (max-width:768px) {
  .site-woreco .logo {
    width: 120px
  }
}

.site-woreco .logo img {
  width: 100%
}

.site-woreco .bluebg {
  background: #0061e6;
  color: #fff;
  position: relative
}

.site-woreco .bluebg.tex-01:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(https://webkid.co.jp/images/woreco/tx_01.png) no-repeat center fixed;
  opacity: .04
}

@media screen and (max-width:768px) {
  .site-woreco .bluebg.tex-01:before {
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    background: url(https://webkid.co.jp/images/woreco/tx_01.png) no-repeat center;
    background-size: cover;
    opacity: .08
  }
}

.site-woreco .bluebg.tex-02:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(https://webkid.co.jp/images/woreco/tx_02.png) no-repeat center fixed;
  opacity: .04
}

@media screen and (max-width:768px) {
  .site-woreco .bluebg.tex-02:before {
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    background: url(https://webkid.co.jp/images/woreco/tx_02.png) no-repeat center;
    background-size: cover;
    opacity: .08
  }
}

.site-woreco p.txt {
  text-align: center;
  margin: 0 0 40px;
  font-size: 18px
}

@media screen and (max-width:768px) {
  .site-woreco p.txt {
    font-size: 13px;
    text-align: justify;
    margin: 0 15px 24px
  }
  .site-woreco p.txt br {
    display: none
  }
}

.site-woreco .feature {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  position: relative;
  top: 0;
  left: 0
}

@media screen and (max-width:768px) {
  .site-woreco .feature {
    display: block
  }
}

.site-woreco .feature figure {
  text-align: center;
  margin: 0 0 24px
}

.site-woreco .feature figure img {
  width: 50%
}

.site-woreco .feature:after, .site-woreco .feature:before {
  content: '';
  width: 1px;
  height: 100%;
  background: #e8e8e8;
  position: absolute;
  top: 0
}

@media screen and (max-width:768px) {
  .site-woreco .feature:after, .site-woreco .feature:before {
    display: none
  }
}

.site-woreco .feature:before {
  left: 32.3%
}

.site-woreco .feature:after {
  left: auto;
  right: 32.3%
}

.site-woreco .feature li {
  width: 29%;
  list-style: none
}

@media screen and (max-width:768px) {
  .site-woreco .feature li {
    width: auto;
    border: #e8e8e8 1px solid;
    border-radius: 6px;
    padding: 15px;
    padding-top: 32px;
    margin: 0 0 20px
  }
  .site-woreco .feature li:last-child {
    margin: 0
  }
}

@media screen and (max-width:768px) {
  .site-woreco .feature li figure {
    width: 56%;
    margin: 0 auto 24px
  }
}

.site-woreco .feature li figure img {
  max-width: 100%
}

@media screen and (max-width:768px) {
  .site-woreco .feature li dl {
    padding: 0 15px
  }
}

.site-woreco .feature li dl dt {
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
  margin: 0 0 16px
}

@media screen and (max-width:768px) {
  .site-woreco .feature li dl dt {
    font-size: 15px
  }
}

.site-woreco .feature li dl dd {
  text-align: justify;
  font-size: 13.5px
}

@media screen and (max-width:768px) {
  .site-woreco .feature li dl dd {
    font-size: 13px
  }
}

.site-woreco figure.tab {
  text-align: center;
  margin: 0 0 72px;
  position: relative
}

@media screen and (max-width:768px) {
  .site-woreco figure.tab {
    margin: 0 15px 24px
  }
}

.site-woreco figure.tab.mockup {
  margin: 0 0 32px
}

@media screen and (max-width:768px) {
  .site-woreco figure.tab.mockup {
    margin: 0 15px
  }
}

.site-woreco figure.tab img {
  max-width: 100%
}

.site-woreco figure.tab figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 10px;
  line-height: 1
}

@media screen and (max-width:768px) {
  .site-woreco figure.tab figcaption {
    position: relative;
    font-size: 8px;
    margin: 20px 0 0
  }
}

.site-woreco .list {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between
}

.site-woreco .list li {
  width: 23%;
  padding: 32px 16px;
  padding-bottom: 16px;
  border-radius: 6px;
  margin: 0 0 32px;
  box-shadow: 0 0 64px rgba(0, 0, 0, .24);
  text-align: center;
  font-size: 15px;
  background: #0061e6
}

@media screen and (max-width:768px) {
  .site-woreco .list li {
    width: 48%;
    font-size: 14px;
    margin: 0 0 16px;
    background: #fff;
    color: #0a0a0a
  }
}

.site-woreco .list li i {
  font-size: 32px;
  display: block;
  margin: 0 0 24px
}

@media screen and (max-width:768px) {
  .site-woreco .list li i {
    color: #007bff
  }
}

.site-woreco .clums {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  align-items: center
}

@media screen and (max-width:768px) {
  .site-woreco .clums {
    display: block
  }
}

.site-woreco .clums.rvs figure {
  order: 2
}

.site-woreco .clums.rvs dl {
  padding-left: 0;
  padding-right: 80px
}

@media screen and (max-width:768px) {
  .site-woreco .clums.rvs dl {
    padding: 24px 15px;
    padding-bottom: 0
  }
}

.site-woreco .clums figure {
  width: 45%
}

@media screen and (max-width:768px) {
  .site-woreco .clums figure {
    width: 56%;
    margin: 0 auto
  }
}

.site-woreco .clums figure img {
  width: 100%
}

.site-woreco .clums dl {
  width: 55%;
  padding-left: 80px
}

@media screen and (max-width:768px) {
  .site-woreco .clums dl {
    width: auto;
    padding: 24px 15px;
    padding-bottom: 0
  }
}

.site-woreco .clums dl dt {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.7;
  margin: 0 0 16px
}

@media screen and (max-width:768px) {
  .site-woreco .clums dl dt {
    text-align: center;
    font-size: 18px
  }
}

.site-woreco .clums dl dd {
  font-size: 15px;
  text-align: justify
}

@media screen and (max-width:768px) {
  .site-woreco .clums dl dd {
    font-size: 13px
  }
}

.site-torerundesu .site-module h2.large.not {
  margin-bottom: 8px
}

.site-torerundesu .site-module .btnarea {
  margin: 40px 0 0
}

@media screen and (max-width:768px) {
  .site-torerundesu .site-module .btnarea {
    margin: 24px 0 0
  }
}

.site-torerundesu .site-module .form-style.margin {
  margin: 0 0 64px
}

@media screen and (max-width:768px) {
  .site-torerundesu .site-module .form-style.margin {
    margin: 0 0 32px
  }
}

.site-torerundesu .site-module .form-style strong {
  color: #31accb;
  font-size: 32px;
  line-height: 1;
  font-weight: 700
}

.site-torerundesu .site-module .btnarea .white {
  border: #fff 1px solid;
  color: #fff;
  background: 0 0
}

.site-torerundesu .site-module .btnarea .white:hover {
  background: #fff;
  color: #31accb
}

.site-torerundesu .fv-img {
  position: relative
}

.site-torerundesu .fv-img:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 16%;
  left: 0;
  bottom: 0;
  z-index: -2;
  background: #000;
  background: linear-gradient(0deg, #000 0, rgba(0, 0, 0, 0) 100%);
  opacity: .04
}

.site-torerundesu .fv-img .logo {
  width: 230px;
  margin: 0 auto 32px
}

@media screen and (max-width:768px) {
  .site-torerundesu .fv-img .logo {
    width: 180px;
    margin: 0 auto 24px
  }
}

.site-torerundesu .fv-img .logo img {
  width: 100%
}

@media screen and (max-width:768px) {
  .site-torerundesu .fv-img figure.main {
    width: 88%;
    margin: 0 auto
  }
}

.site-torerundesu .fv-img figure.main img {
  width: 100%
}

.site-torerundesu .fv-img p.txt {
  text-align: center;
  margin: 0 0 8px;
  font-size: 18px
}

@media screen and (max-width:768px) {
  .site-torerundesu .fv-img p.txt {
    font-size: 13px;
    text-align: justify;
    margin: 0 30px 20px
  }
  .site-torerundesu .fv-img p.txt br {
    display: none
  }
}

.site-torerundesu .sec-feature .feature {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  position: relative;
  top: 0;
  left: 0
}

@media screen and (max-width:768px) {
  .site-torerundesu .sec-feature .feature {
    display: block
  }
}

.site-torerundesu .sec-feature .feature figure {
  text-align: center;
  margin: 0 0 24px
}

.site-torerundesu .sec-feature .feature figure img {
  width: 50%
}

.site-torerundesu .sec-feature .feature:after, .site-torerundesu .sec-feature .feature:before {
  content: '';
  width: 1px;
  height: 100%;
  background: #e8e8e8;
  position: absolute;
  top: 0
}

@media screen and (max-width:768px) {
  .site-torerundesu .sec-feature .feature:after, .site-torerundesu .sec-feature .feature:before {
    display: none
  }
}

.site-torerundesu .sec-feature .feature:before {
  left: 32.3%
}

.site-torerundesu .sec-feature .feature:after {
  left: auto;
  right: 32.3%
}

.site-torerundesu .sec-feature .feature li {
  width: 29%;
  list-style: none
}

@media screen and (max-width:768px) {
  .site-torerundesu .sec-feature .feature li {
    width: auto;
    border: #e8e8e8 1px solid;
    border-radius: 6px;
    padding: 15px;
    padding-top: 32px;
    margin: 0 0 20px
  }
  .site-torerundesu .sec-feature .feature li:last-child {
    margin: 0
  }
}

@media screen and (max-width:768px) {
  .site-torerundesu .sec-feature .feature li figure {
    width: 56%;
    margin: 0 auto 24px
  }
}

.site-torerundesu .sec-feature .feature li figure img {
  max-width: 100%
}

@media screen and (max-width:768px) {
  .site-torerundesu .sec-feature .feature li dl {
    padding: 0 15px
  }
}

.site-torerundesu .sec-feature .feature li dl dt {
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
  margin: 0 0 16px
}

@media screen and (max-width:768px) {
  .site-torerundesu .sec-feature .feature li dl dt {
    font-size: 15px
  }
}

.site-torerundesu .sec-feature .feature li dl dd {
  text-align: justify;
  font-size: 13.5px
}

@media screen and (max-width:768px) {
  .site-torerundesu .sec-feature .feature li dl dd {
    font-size: 13px
  }
}

.site-torerundesu .sec-marge {
  background: url(https://webkid.co.jp/images/torerundesu/ill_bg.png) no-repeat center #31accb;
  background-size: cover;
  position: relative
}

.site-torerundesu .sec-marge:before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 32px 48px 0 48px;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%)
}

@media screen and (max-width:768px) {
  .site-torerundesu .sec-marge:before {
    border-width: 16px 24px 0 24px
  }
}

.site-torerundesu .sec-marge .list li {
  list-style: none;
  padding: 32px 25px 25px;
  border-radius: 6px;
  background: #fff
}

@media screen and (min-width:769px) {
  .site-torerundesu .sec-marge .list li {
    list-style: none;
    width: 31%;
    float: left;
    margin: 0 3.5% 3.5% 0
  }
  .site-torerundesu .sec-marge .list li:nth-child(3n+1) {
    clear: both
  }
  .site-torerundesu .sec-marge .list li:nth-child(3n+3) {
    margin-right: 0
  }
  .site-torerundesu .sec-marge .list li:nth-last-child(-n+3) {
    margin-bottom: 0
  }
}

@media screen and (max-width:768px) {
  .site-torerundesu .sec-marge .list li {
    list-style: none;
    width: 48%;
    float: left;
    margin: 0 4% 4% 0;
    padding: 15px
  }
  .site-torerundesu .sec-marge .list li:nth-child(2n+1) {
    clear: both
  }
  .site-torerundesu .sec-marge .list li:nth-child(2n+2) {
    margin-right: 0
  }
  .site-torerundesu .sec-marge .list li:nth-last-child(-n+2) {
    margin-bottom: 0
  }
}

.site-torerundesu .sec-marge .list i {
  display: block;
  text-align: center;
  font-size: 30px;
  margin: 0 0 16px;
  color: #31accb
}

.site-torerundesu .sec-marge .list dl dt {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px
}

@media screen and (max-width:768px) {
  .site-torerundesu .sec-marge .list dl dt {
    font-size: 15px
  }
}

.site-torerundesu .sec-marge .list dl dd {
  font-size: 15px;
  width: 88%;
  margin: 0 auto
}

@media screen and (max-width:768px) {
  .site-torerundesu .sec-marge .list dl dd {
    width: auto;
    font-size: 11px;
    text-align: justify
  }
}

.site-torerundesu .sec-concept .clums {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  align-items: center
}

@media screen and (max-width:768px) {
  .site-torerundesu .sec-concept .clums {
    display: block
  }
}

.site-torerundesu .sec-concept .clums.rvs figure {
  order: 2
}

.site-torerundesu .sec-concept .clums.rvs dl {
  padding-left: 0;
  padding-right: 80px
}

@media screen and (max-width:768px) {
  .site-torerundesu .sec-concept .clums.rvs dl {
    padding: 24px 15px;
    padding-bottom: 0
  }
}

.site-torerundesu .sec-concept .clums figure {
  width: 45%
}

@media screen and (max-width:768px) {
  .site-torerundesu .sec-concept .clums figure {
    width: 56%;
    margin: 0 auto
  }
}

.site-torerundesu .sec-concept .clums figure img {
  width: 100%
}

.site-torerundesu .sec-concept .clums dl {
  width: 55%;
  padding-left: 80px
}

@media screen and (max-width:768px) {
  .site-torerundesu .sec-concept .clums dl {
    width: auto;
    padding: 24px 15px;
    padding-bottom: 0
  }
}

.site-torerundesu .sec-concept .clums dl dt {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.7;
  margin: 0 0 16px
}

@media screen and (max-width:768px) {
  .site-torerundesu .sec-concept .clums dl dt {
    text-align: center;
    font-size: 18px
  }
}

.site-torerundesu .sec-concept .clums dl dd {
  font-size: 15px;
  text-align: justify
}

@media screen and (max-width:768px) {
  .site-torerundesu .sec-concept .clums dl dd {
    font-size: 13px
  }
}

.site-torerundesu .sec-comp table strong {
  color: #31accb;
  font-size: 16px
}

@media screen and (max-width:768px) {
  .site-torerundesu .site-module .tableScroll {
    overflow: auto;
    position: relative;
    padding: 32px 0 0
  }
  .site-torerundesu .site-module .tableScroll:after, .site-torerundesu .site-module .tableScroll:before {
    font-size: 12px
  }
  .site-torerundesu .site-module .tableScroll:before {
    content: '\f362';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: -4px;
    left: 0;
    font-size: 14px;
    color: #F4D780
  }
  .site-torerundesu .site-module .tableScroll:after {
    content: 'スクロールしてご覧ください';
    position: absolute;
    top: 2px;
    left: 24px;
    line-height: 1
  }
}

.site-torerundesu .site-module .tableScroll .form-style {
  background: #fff
}

@media screen and (max-width:768px) {
  .site-torerundesu .site-module .tableScroll .form-style {
    width: 150%
  }
}

.site-torerundesu .site-module .tableScroll .form-style tbody tr:nth-child(2n+1), .site-torerundesu .site-module .tableScroll .form-style thead tr:nth-child(2n+1) {
  background: #f6f6f8
}

.site-torerundesu .site-module .tableScroll .form-style tbody tr td, .site-torerundesu .site-module .tableScroll .form-style tbody tr th, .site-torerundesu .site-module .tableScroll .form-style thead tr td, .site-torerundesu .site-module .tableScroll .form-style thead tr th {
  border: #e8e8e8 1px solid;
  text-align: center;
  padding-left: 24px;
  padding-right: 24px
}

@media screen and (max-width:768px) {
  .site-torerundesu .site-module .tableScroll .form-style tbody tr td, .site-torerundesu .site-module .tableScroll .form-style tbody tr th, .site-torerundesu .site-module .tableScroll .form-style thead tr td, .site-torerundesu .site-module .tableScroll .form-style thead tr th {
    width: 25%;
    padding-left: 20px;
    padding-right: 20px
  }
  .site-torerundesu .site-module .tableScroll .form-style tbody tr td strong, .site-torerundesu .site-module .tableScroll .form-style tbody tr th strong, .site-torerundesu .site-module .tableScroll .form-style thead tr td strong, .site-torerundesu .site-module .tableScroll .form-style thead tr th strong {
    font-size: 20px
  }
}

.site-dezahodai .site-module h2.large.not {
  margin-bottom: 8px
}

.site-dezahodai .site-module .btnarea {
  margin: 40px 0 0
}

@media screen and (max-width:768px) {
  .site-dezahodai .site-module .btnarea {
    margin: 24px 0
  }
}

@media screen and (max-width:768px) and (max-width:768px) {
  .site-dezahodai .site-module .btnarea a {
    margin: 0 0 24px
  }
}

.site-dezahodai .site-module .form-style.margin {
  margin: 0 0 64px
}

@media screen and (max-width:768px) {
  .site-dezahodai .site-module .form-style.margin {
    margin: 0 0 32px
  }
}

.site-dezahodai .site-module .form-style strong {
  color: #f65f6a;
  font-size: 32px;
  line-height: 1;
  font-weight: 700
}

.site-dezahodai .site-module .btnarea .white {
  border: #fff 1px solid;
  color: #fff;
  background: 0 0
}

.site-dezahodai .site-module .btnarea .white:hover {
  background: #fff;
  color: #f65f6a
}

.site-dezahodai .fv-img {
  position: relative
}

.site-dezahodai .fv-img:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 25%;
  left: 0;
  bottom: 0;
  z-index: -2;
  background: #F4D780
}

.site-dezahodai .fv-img .logo {
  width: 450px;
  margin: 0 auto 32px
}

@media screen and (max-width:768px) {
  .site-dezahodai .fv-img .logo {
    width: 180px;
    margin: 0 auto 24px
  }
}

.site-dezahodai .fv-img .logo img {
  width: 100%
}

@media screen and (max-width:768px) {
  .site-dezahodai .fv-img figure.main {
    width: 88%;
    margin: 0 auto
  }
}

.site-dezahodai .fv-img figure.main img {
  width: 100%
}

.site-dezahodai .fv-img p.txt {
  text-align: center;
  margin: 0 0 8px;
  font-size: 18px
}

@media screen and (max-width:768px) {
  .site-dezahodai .fv-img p.txt {
    font-size: 13px;
    text-align: justify;
    margin: 0 30px 20px
  }
  .site-dezahodai .fv-img p.txt br {
    display: none
  }
}

.site-dezahodai .sec-trouble {
  background-size: cover;
  position: relative
}

.site-dezahodai .sec-trouble p {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  padding-top: 40px
}

.site-dezahodai .sec-trouble .list li {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  list-style: none;
  padding: 16px;
  border-radius: 6px;
  background: #f6f6f8
}

@media screen and (min-width:769px) {
  .site-dezahodai .sec-trouble .list li {
    list-style: none;
    width: 31%;
    float: left;
    margin: 0 3.5% 3.5% 0
  }
  .site-dezahodai .sec-trouble .list li:nth-child(3n+1) {
    clear: both
  }
  .site-dezahodai .sec-trouble .list li:nth-child(3n+3) {
    margin-right: 0
  }
  .site-dezahodai .sec-trouble .list li:nth-last-child(-n+3) {
    margin-bottom: 0
  }
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-trouble .list li {
    list-style: none;
    width: 100%;
    float: left;
    margin: 0 4% 4% 0;
    padding: 15px;
    font-size: 15px
  }
  .site-dezahodai .sec-trouble .list li:nth-child(1n+1) {
    clear: both
  }
  .site-dezahodai .sec-trouble .list li:nth-child(1n+1) {
    margin-right: 0
  }
  .site-dezahodai .sec-trouble .list li:nth-last-child(-n+1) {
    margin-bottom: 0
  }
}

.site-dezahodai .sec-concept .clums {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  align-items: center
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-concept .clums {
    display: block
  }
}

.site-dezahodai .sec-concept .clums.rvs figure {
  order: 2
}

.site-dezahodai .sec-concept .clums.rvs dl {
  padding-left: 0;
  padding-right: 80px
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-concept .clums.rvs dl {
    padding: 24px 15px;
    padding-bottom: 0
  }
}

.site-dezahodai .sec-concept .clums figure {
  width: 45%
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-concept .clums figure {
    width: 56%;
    margin: 0 auto
  }
}

.site-dezahodai .sec-concept .clums figure img {
  width: 100%
}

.site-dezahodai .sec-concept .clums dl {
  width: 55%;
  padding-left: 80px
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-concept .clums dl {
    width: auto;
    padding: 24px 15px;
    padding-bottom: 0
  }
}

.site-dezahodai .sec-concept .clums dl dt {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.7;
  margin: 0 0 16px
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-concept .clums dl dt {
    text-align: center;
    font-size: 18px
  }
}

.site-dezahodai .sec-concept .clums dl dd {
  font-size: 15px;
  text-align: justify
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-concept .clums dl dd {
    font-size: 13px
  }
}

.site-dezahodai .sec-feature .feature {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  position: relative;
  top: 0;
  left: 0
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-feature .feature {
    display: block
  }
}

.site-dezahodai .sec-feature .feature figure {
  text-align: center;
  margin: 0 0 24px
}

.site-dezahodai .sec-feature .feature figure img {
  width: 50%
}

.site-dezahodai .sec-feature .feature:after, .site-dezahodai .sec-feature .feature:before {
  content: '';
  width: 1px;
  height: 100%;
  background: #e8e8e8;
  position: absolute;
  top: 0
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-feature .feature:after, .site-dezahodai .sec-feature .feature:before {
    display: none
  }
}

.site-dezahodai .sec-feature .feature:before {
  left: 32.3%
}

.site-dezahodai .sec-feature .feature:after {
  left: auto;
  right: 32.3%
}

.site-dezahodai .sec-feature .feature li {
  width: 29%;
  list-style: none
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-feature .feature li {
    width: auto;
    border: #e8e8e8 1px solid;
    border-radius: 6px;
    padding: 15px;
    padding-top: 32px;
    margin: 0 0 20px
  }
  .site-dezahodai .sec-feature .feature li:last-child {
    margin: 0
  }
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-feature .feature li figure {
    width: 100%;
    margin: 0 auto 24px
  }
}

.site-dezahodai .sec-feature .feature li figure img {
  max-width: 100%
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-feature .feature li dl {
    padding: 0 15px
  }
}

.site-dezahodai .sec-feature .feature li dl dt {
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
  margin: 0 0 16px
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-feature .feature li dl dt {
    font-size: 15px
  }
}

.site-dezahodai .sec-feature .feature li dl dd {
  text-align: justify;
  font-size: 13.5px
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-feature .feature li dl dd {
    font-size: 13px
  }
}

.site-dezahodai .sec-marge {
  background: #f65f6a;
  background-size: cover;
  position: relative
}

.site-dezahodai .sec-marge:before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 32px 48px 0 48px;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%)
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-marge:before {
    border-width: 16px 24px 0 24px
  }
}

.site-dezahodai .sec-marge .list li {
  list-style: none;
  padding: 24px 16px 16px;
  border-radius: 6px;
  background: #fff
}

@media screen and (min-width:769px) {
  .site-dezahodai .sec-marge .list li {
    list-style: none;
    width: 15%;
    float: left;
    margin: 0 2% 2% 0
  }
  .site-dezahodai .sec-marge .list li:nth-child(6n+1) {
    clear: both
  }
  .site-dezahodai .sec-marge .list li:nth-child(6n+6) {
    margin-right: 0
  }
  .site-dezahodai .sec-marge .list li:nth-last-child(-n+6) {
    margin-bottom: 0
  }
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-marge .list li {
    list-style: none;
    width: 48%;
    float: left;
    margin: 0 4% 4% 0;
    padding: 15px
  }
  .site-dezahodai .sec-marge .list li:nth-child(2n+1) {
    clear: both
  }
  .site-dezahodai .sec-marge .list li:nth-child(2n+2) {
    margin-right: 0
  }
  .site-dezahodai .sec-marge .list li:nth-last-child(-n+2) {
    margin-bottom: 0
  }
}

.site-dezahodai .sec-marge .list i {
  display: block;
  text-align: center;
  font-size: 30px;
  margin: 0 0 16px;
  color: #f65f6a
}

.site-dezahodai .sec-marge .list dl dt {
  text-align: center;
  font-size: 18px;
  font-weight: 700
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-marge .list dl dt {
    font-size: 15px
  }
}

.site-dezahodai .sec-marge .list dl dd {
  font-size: 15px;
  width: 88%;
  margin: 0 auto
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-marge .list dl dd {
    width: auto;
    font-size: 11px;
    text-align: justify
  }
}

.site-dezahodai .sec-marge p {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  padding-top: 40px
}

.site-dezahodai .sec-schedule {
  background: rgba(246, 246, 248, .88);
  position: relative
}

.site-dezahodai .sec-schedule:before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 32px 48px 0 48px;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%)
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-schedule:before {
    border-width: 16px 24px 0 24px
  }
}

.site-dezahodai .sec-schedule p {
  text-align: center;
  padding-top: 40px
}

.site-dezahodai .sec-schedule p span.big {
  font-size: 24px;
  font-weight: 700
}

.site-dezahodai .sec-schedule p span.big strong {
  color: #f65f6a;
  font-size: 32px;
  line-height: 1;
  font-weight: 700
}

.site-dezahodai .sec-works {
  background: #F4D780;
  width: 100%;
  position: relative;
  overflow: visible
}

.site-dezahodai .sec-works.swiper-container-initialized {
  display: block
}

.site-dezahodai .sec-works .swiper-wrapper {
  transition-timing-function: cubic-bezier(.785, .135, .15, .86)
}

.site-dezahodai .sec-works .swiper-slide {
  transform: scale(.8);
  transition: all .4s 0s cubic-bezier(.455, .03, .515, .955)
}

@media screen and (min-width:769px) {
  .site-dezahodai .sec-works .swiper-slide.swiper-slide-active, .site-dezahodai .sec-works .swiper-slide.swiper-slide-next, .site-dezahodai .sec-works .swiper-slide.swiper-slide-prev {
    transform: scale(1)
  }
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-works .swiper-slide {
    transform: scale(1)
  }
}

.site-dezahodai .sec-works .items {
  width: 320px;
  background: #fff;
  box-shadow: 0 0 24px rgba(0, 0, 0, .08);
  position: relative;
  display: block;
  color: #0a0a0a
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-works .items {
    width: auto;
    display: block
  }
}

.site-dezahodai .sec-works .items figure {
  overflow: hidden;
  position: relative
}

.site-dezahodai .sec-works .items figure:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transition: all .4s 0s cubic-bezier(.455, .03, .515, .955)
}

.site-dezahodai .sec-works .items figure:after {
  content: 'MORE';
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  color: #0a0a0a;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 40px;
  border-radius: 999px;
  opacity: 0;
  transform: translateX(-50%) translateY(0);
  z-index: 3;
  transition: all .4s 0s cubic-bezier(.455, .03, .515, .955)
}

.site-dezahodai .sec-works .items figure img {
  width: 100%;
  transition: all .4s 0s cubic-bezier(.455, .03, .515, .955)
}

.site-dezahodai .sec-works .items dl {
  position: relative;
  padding: 16px
}

.site-dezahodai .sec-works .items dl dt {
  font-weight: 700;
  margin: 0 0 8px
}

.site-dezahodai .sec-works .items dl dd {
  font-size: 12px
}

.site-dezahodai .sec-works .items dl dd.date {
  background: #f6f6f8;
  border-radius: 999px;
  font-size: 10px;
  padding: 2px 12px;
  position: absolute;
  right: 16px;
  bottom: 16px
}

.site-dezahodai .sec-works .items .bottom {
  padding: 8px 16px;
  border-top: #e8e8e8 1px solid;
  font-size: 12px
}

.site-dezahodai .sec-works .items .bottom i {
  display: inline-block;
  margin: 0 8px 0 0;
  color: #c8c8d4
}

.site-dezahodai .sec-comp .feature-list {
  margin-bottom: 32px;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between
}

.site-dezahodai .sec-comp .feature-list figure {
  text-align: center;
  margin: 0 0 16px
}

.site-dezahodai .sec-comp .feature-list figure img {
  width: 50%
}

.site-dezahodai .sec-comp .feature-list li {
  width: 23%;
  background: #fff;
  padding: 24px;
  border: #e8e8e8 1px solid;
  position: relative
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-comp .feature-list li {
    width: 100%;
    padding: 20px;
    margin: 0 0 16px
  }
  .site-dezahodai .sec-comp .feature-list li:last-child {
    margin: 0
  }
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-comp .feature-list li figure {
    width: 100%;
    margin: 0 auto 24px
  }
}

.site-dezahodai .sec-comp .feature-list li dl dt {
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 16px;
  padding: 0 0 12px;
  border-bottom: #e8e8e8 1px solid
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-comp .feature-list li dl dt {
    font-size: 15px;
    clear: both
  }
}

.site-dezahodai .sec-comp .feature-list li dl dd {
  text-align: center;
  font-size: 16px
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-comp .feature-list li dl dd {
    font-size: 13.5px;
    clear: both
  }
}

.site-dezahodai .sec-comp table.attention th {
  background: #f6f6f8
}

.site-dezahodai .sec-comp table.attention th i {
  display: block;
  text-align: center;
  font-size: 40px;
  opacity: .24
}

.site-dezahodai .sec-comp table.attention td li {
  list-style: none;
  margin-bottom: 16px;
  margin-left: 1.4em;
  text-indent: -1.4em
}

.site-dezahodai .sec-comp table.attention td li:before {
  font-family: "Font Awesome 5 Free"!important;
  content: "\f00c";
  font-weight: 900;
  color: #f65f6a;
  padding-right: 6px
}

.site-dezahodai .sec-comp table.attention td li:last-child {
  margin-bottom: 0
}

.site-dezahodai .sec-comp table strong {
  color: #f65f6a;
  font-size: 16px
}

.site-dezahodai .sec-flow .start-balloon {
  width: 100%;
  position: relative;
  display: inline-block;
  margin: 24px 0 32px;
  padding: 8px;
  color: #fff;
  background: #f65f6a;
  text-align: center;
  font-size: 16px;
  font-weight: 700
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-flow .start-balloon {
    margin: 0 0 32px
  }
}

.site-dezahodai .sec-flow .start-balloon:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #f65f6a
}

.site-dezahodai .sec-flow .before-order {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-flow .before-order {
    display: block
  }
}

.site-dezahodai .sec-flow .before-order li {
  list-style: none;
  width: 33.33%;
  background: #f6f6f8;
  border-right: #fff 2px solid;
  padding: 24px;
  padding-top: 0;
  position: relative;
  top: 0;
  left: 0
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-flow .before-order li {
    width: auto;
    margin: 0 0 24px;
    padding: 20px
  }
  .site-dezahodai .sec-flow .before-order li:after {
    clear: both;
    display: block;
    content: ''
  }
}

.site-dezahodai .sec-flow .before-order li:last-child {
  border: none
}

.site-dezahodai .sec-flow .before-order li:before {
  position: absolute;
  top: 0;
  right: 0;
  background: #f65f6a;
  width: 32px;
  height: 32px;
  line-height: 32px;
  color: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: 700
}

.site-dezahodai .sec-flow .before-order li:nth-child(1):before {
  content: "1"
}

.site-dezahodai .sec-flow .before-order li:nth-child(2):before {
  content: "2"
}

.site-dezahodai .sec-flow .before-order li:nth-child(3):before {
  content: "3"
}

.site-dezahodai .sec-flow .before-order li:nth-child(4):before {
  content: "4"
}

.site-dezahodai .sec-flow .before-order li:nth-child(5):before {
  content: "5"
}

.site-dezahodai .sec-flow .before-order li:nth-child(6):before {
  content: "6"
}

.site-dezahodai .sec-flow .before-order li:nth-child(7):before {
  content: "7"
}

.site-dezahodai .sec-flow .before-order li:nth-child(8):before {
  content: "8"
}

.site-dezahodai .sec-flow .before-order li:nth-child(9):before {
  content: "9"
}

.site-dezahodai .sec-flow .before-order li i {
  display: block;
  padding: 48px 0 32px;
  margin: 0 auto;
  font-size: 44px;
  text-align: center;
  opacity: .24
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-flow .before-order li i {
    padding: 0;
    font-size: 24px;
    float: left;
    margin: 0 16px 0 0
  }
}

.site-dezahodai .sec-flow .before-order li dl dt {
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-flow .before-order li dl dt {
    margin: 0;
    text-align: left;
    transform: translateY(-4px)
  }
}

.site-dezahodai .sec-flow .before-order li dl dd {
  font-size: 13px;
  text-align: justify
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-flow .before-order li dl dd {
    clear: both;
    padding: 8px 0 0
  }
}

.site-dezahodai .sec-flow .before-order li dl dd.btnarea {
  text-align: center;
  margin: 12px 0 0
}

.site-dezahodai .sec-flow .before-order li dl dd.btnarea a {
  font-size: 14px;
  border-radius: 6px;
  border-color: #f65f6a;
  background: #f65f6a;
  padding: 8px 0
}

.site-dezahodai .sec-flow .before-order li dl dd.btnarea a:hover {
  background: #fff;
  color: #f65f6a
}

.site-dezahodai .sec-flow .after-order {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-flow .after-order {
    display: block
  }
}

.site-dezahodai .sec-flow .after-order li {
  list-style: none;
  width: 20%;
  background: #f6f6f8;
  border-right: #fff 2px solid;
  padding: 24px;
  padding-top: 0;
  position: relative;
  top: 0;
  left: 0
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-flow .after-order li {
    width: auto;
    margin: 0 0 24px;
    padding: 20px
  }
  .site-dezahodai .sec-flow .after-order li:after {
    clear: both;
    display: block;
    content: ''
  }
}

.site-dezahodai .sec-flow .after-order li:last-child {
  border: none
}

.site-dezahodai .sec-flow .after-order li:before {
  position: absolute;
  top: 0;
  right: 0;
  background: #f65f6a;
  width: 32px;
  height: 32px;
  line-height: 32px;
  color: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: 700
}

.site-dezahodai .sec-flow .after-order li:nth-child(1):before {
  content: "1"
}

.site-dezahodai .sec-flow .after-order li:nth-child(2):before {
  content: "2"
}

.site-dezahodai .sec-flow .after-order li:nth-child(3):before {
  content: "3"
}

.site-dezahodai .sec-flow .after-order li:nth-child(4):before {
  content: "4"
}

.site-dezahodai .sec-flow .after-order li:nth-child(5):before {
  content: "5"
}

.site-dezahodai .sec-flow .after-order li:nth-child(6):before {
  content: "6"
}

.site-dezahodai .sec-flow .after-order li:nth-child(7):before {
  content: "7"
}

.site-dezahodai .sec-flow .after-order li:nth-child(8):before {
  content: "8"
}

.site-dezahodai .sec-flow .after-order li:nth-child(9):before {
  content: "9"
}

.site-dezahodai .sec-flow .after-order li i {
  display: block;
  padding: 48px 0 32px;
  margin: 0 auto;
  font-size: 44px;
  text-align: center;
  opacity: .24
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-flow .after-order li i {
    padding: 0;
    font-size: 24px;
    float: left;
    margin: 0 16px 0 0
  }
}

.site-dezahodai .sec-flow .after-order li dl dt {
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-flow .after-order li dl dt {
    margin: 0;
    text-align: left;
    transform: translateY(-4px)
  }
}

.site-dezahodai .sec-flow .after-order li dl dd {
  font-size: 13px;
  text-align: justify
}

@media screen and (max-width:768px) {
  .site-dezahodai .sec-flow .after-order li dl dd {
    clear: both;
    padding: 8px 0 0
  }
}

.site-dezahodai .sec-flow .after-order li dl dd.btnarea {
  text-align: center;
  margin: 12px 0 0
}

.site-dezahodai .sec-flow .after-order li dl dd.btnarea a {
  font-size: 14px;
  border-radius: 6px;
  border-color: #f65f6a;
  background: #f65f6a;
  padding: 8px 0
}

.site-dezahodai .sec-flow .after-order li dl dd.btnarea a:hover {
  background: #fff;
  color: #f65f6a
}

.site-dezahodai .sec-price p {
  text-align: right;
  font-size: 12px;
  margin: 16px 0 32px
}

@media screen and (max-width:768px) {
  .site-dezahodai .site-module .tableScroll {
    overflow: auto;
    position: relative;
    padding: 32px 0 0
  }
  .site-dezahodai .site-module .tableScroll:after, .site-dezahodai .site-module .tableScroll:before {
    font-size: 12px
  }
  .site-dezahodai .site-module .tableScroll:before {
    content: '\f362';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: -4px;
    left: 0;
    font-size: 14px;
    color: #f65f6a
  }
  .site-dezahodai .site-module .tableScroll:after {
    content: 'スクロールしてご覧ください';
    position: absolute;
    top: 2px;
    left: 24px;
    line-height: 1
  }
}

.site-dezahodai .site-module .tableScroll .form-style {
  background: #fff
}

@media screen and (max-width:768px) {
  .site-dezahodai .site-module .tableScroll .form-style {
    width: 150%
  }
}

.site-dezahodai .site-module .tableScroll .form-style tbody tr th, .site-dezahodai .site-module .tableScroll .form-style thead tr th {
  border: #e8e8e8 1px solid;
  background: #f6f6f8;
  width: 10%;
  text-align: center;
  padding-left: 0
}

.site-dezahodai .site-module .tableScroll .form-style tbody tr td, .site-dezahodai .site-module .tableScroll .form-style thead tr td {
  border: #e8e8e8 1px solid;
  text-align: center;
  padding-left: 24px;
  padding-right: 24px
}

.site-dezahodai .site-module .tableScroll .form-style tbody tr td.order, .site-dezahodai .site-module .tableScroll .form-style thead tr td.order {
  background: #0a0a0a;
  color: #fff
}

.site-dezahodai .site-module .tableScroll .form-style tbody tr td.work, .site-dezahodai .site-module .tableScroll .form-style thead tr td.work {
  background: url(https://webkid.co.jp/images/dezahodai/arrow.png) no-repeat center;
  background-size: contain
}

.site-dezahodai .site-module .tableScroll .form-style tbody tr td.first, .site-dezahodai .site-module .tableScroll .form-style thead tr td.first {
  background: #f65f6a
}

.site-dezahodai .site-module .tableScroll .form-style tbody tr td.finish, .site-dezahodai .site-module .tableScroll .form-style thead tr td.finish {
  background: #F4D780
}

@media screen and (max-width:768px) {
  .site-dezahodai .site-module .tableScroll .form-style tbody tr td, .site-dezahodai .site-module .tableScroll .form-style thead tr td {
    width: 10%;
    padding-left: 20px;
    padding-right: 20px
  }
  .site-dezahodai .site-module .tableScroll .form-style tbody tr td strong, .site-dezahodai .site-module .tableScroll .form-style thead tr td strong {
    font-size: 20px
  }
}

.campaign-bnr {
  margin: 0 0 48px
}

@media screen and (max-width:768px) {
  .campaign-bnr {
    margin: 0 0 20px
  }
}

.campaign-bnr img {
  width: 100%
}

.campaign-bnr .pc {
  display: block
}

@media screen and (max-width:768px) {
  .campaign-bnr .pc {
    display: none
  }
}

.campaign-bnr .sp {
  display: none
}

@media screen and (max-width:768px) {
  .campaign-bnr .sp {
    display: block
  }
}

.site-campaign .site-module h3.borders:after {
  background: #de1616
}

.site-campaign .site-module .btnarea a {
  background: #de1616;
  border-color: #de1616
}

.site-campaign .site-module .btnarea a:hover {
  background: #fff;
  color: #de1616
}

.site-campaign .site-module .tds {
  font-size: 14px
}

.site-campaign .campaign-detail {
  border: red 2px dashed;
  padding: 24px;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  align-items: center
}

@media screen and (max-width:768px) {
  .site-campaign .campaign-detail {
    padding: 15px;
    display: block
  }
}

.site-campaign .campaign-detail figure {
  width: 30%
}

@media screen and (max-width:768px) {
  .site-campaign .campaign-detail figure {
    width: 64%;
    margin: 15px auto 32px
  }
}

.site-campaign .campaign-detail figure img {
  width: 100%
}

.site-campaign .campaign-detail dl {
  width: 66%
}

@media screen and (max-width:768px) {
  .site-campaign .campaign-detail dl {
    width: auto
  }
}

.site-campaign .campaign-detail dl dt {
  line-height: 1;
  font-size: 20px;
  font-weight: 700;
  color: #de1616;
  margin: 0 0 16px
}

@media screen and (max-width:768px) {
  .site-campaign .campaign-detail dl dt {
    font-size: 16px;
    text-align: center
  }
}

.site-campaign .campaign-detail dl dd {
  font-size: 15px
}

@media screen and (max-width:768px) {
  .site-campaign .campaign-detail dl dd {
    font-size: 13px;
    text-align: justify
  }
}

.site-campaign .campaign-detail dl dd.btnarea {
  margin: 16px 0 0
}

.site-campaign .campaign-detail dl dd.btnarea a {
  border-radius: 0;
  padding: 8px 40px;
  margin: 0 8px 0 0
}

@media screen and (max-width:768px) {
  .site-campaign .campaign-detail dl dd.btnarea a {
    margin: 16px 0 0 0
  }
}

#fix-campaign {
  opacity: 0
}

#fix-campaign.active {
  opacity: 1
}

#fix-campaign .overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, .48);
  z-index: 500;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  align-items: center;
  justify-content: center
}

#fix-campaign a:hover img {
  opacity: 1
}

#fix-campaign div.bnr {
  position: relative;
  width: 700px
}

@media screen and (max-width:768px) {
  #fix-campaign div.bnr {
    margin: 0 30px
  }
}

#fix-campaign div.bnr i.close {
  width: 80px;
  height: 80px;
  background: #0a0a0a;
  color: #fff;
  border-radius: 50%;
  position: absolute;
  top: -20px;
  right: -20px;
  box-shadow: 0 0 32px rgba(0, 0, 0, .56);
  cursor: pointer;
  transition: all .2s 0s cubic-bezier(.455, .03, .515, .955);
  z-index: 2
}

@media screen and (max-width:768px) {
  #fix-campaign div.bnr i.close {
    transform: scale(.94)
  }
}

#fix-campaign div.bnr i.close:hover {
  transform: scale(1.2)
}

#fix-campaign div.bnr i.close:after, #fix-campaign div.bnr i.close:before {
  content: '';
  width: 32px;
  height: 1px;
  position: absolute;
  background: #fff;
  top: 30px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg)
}

#fix-campaign div.bnr i.close:after {
  transform: translateX(-50%) rotate(-45deg)
}

#fix-campaign div.bnr i.close span {
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  text-align: center;
  font-size: 12px
}

#fix-campaign div.bnr a:hover {
  opacity: .88
}

#fix-campaign div.bnr img {
  max-width: 100%
}

#fix-campaign div.bnr img.active {
  -webkit-animation: shake .2s 2s 1;
  animation: shake .2s 2s 1
}

@-webkit-keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0)
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg)
  }
  20% {
    transform: translate(-3px, 0) rotate(1deg)
  }
  30% {
    transform: translate(3px, 2px) rotate(0)
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg)
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg)
  }
  60% {
    transform: translate(-3px, 1px) rotate(0)
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg)
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg)
  }
  90% {
    transform: translate(1px, 2px) rotate(0)
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg)
  }
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0)
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg)
  }
  20% {
    transform: translate(-3px, 0) rotate(1deg)
  }
  30% {
    transform: translate(3px, 2px) rotate(0)
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg)
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg)
  }
  60% {
    transform: translate(-3px, 1px) rotate(0)
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg)
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg)
  }
  90% {
    transform: translate(1px, 2px) rotate(0)
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg)
  }
}

#fix-campaign .scale-enter-active, #fix-campaign .scale-leave-active {
  transition: all .6s
}

#fix-campaign .scale-enter, #fix-campaign .scale-leave-to {
  opacity: 0;
  transform: scale(1.1)
}

@media print {
  body {
    width: 100%!important;
    -webkit-print-color-adjust: exact
  }
  * {
    opacity: 1!important
  }
  #site-header {
    width: 100%!important;
    overflow: hidden;
    right: auto!important;
    left: 0
  }
  #firstview {
    width: 100%!important;
    background: #000
  }
  #firstview:before {
    display: none!important;
    opacity: 0!important
  }
  #firstview video {
    display: none!important
  }
  #firstview .content {
    width: 100%!important;
    padding: 0 0 0 80px!important
  }
  .rellax, .rellax-no {
    transform: translateY(0)!important
  }
  .scroll-anime {
    transform: translateY(0)!important
  }
  .scroll-img:after, .scroll-img:before {
    display: none!important
  }
}

body.fix {
  overflow: hidden
}

#site-wrapper {
  width: 100%
}

@media screen and (max-width:768px) {
  #site-wrapper {
    overflow: hidden
  }
}

#page-title {
  height: 440px;
  padding-left: 80px;
  position: relative;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden
}

@media screen and (max-width:768px) {
  #page-title {
    height: 200px;
    padding: 0;
    justify-content: center
  }
}

#page-title:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(10, 10, 10, .4);
  z-index: 2
}

#page-title .bg {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-position: center;
  background-size: cover;
  transform: scale(1.04);
  transition: all 1.4s 0s linear
}

#page-title.is-active .bg {
  transform: scale(1)
}

#page-title.is-active .box #eng-title {
  opacity: 1
}

#page-title.is-active .box #eng-title span:nth-child(1) {
  -webkit-animation: eve 320ms 40ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 40ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(2) {
  -webkit-animation: eve 320ms 80ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 80ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(3) {
  -webkit-animation: eve 320ms 120ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 120ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(4) {
  -webkit-animation: eve 320ms 160ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 160ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(5) {
  -webkit-animation: eve 320ms .2s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms .2s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(6) {
  -webkit-animation: eve 320ms 240ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 240ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(7) {
  -webkit-animation: eve 320ms 280ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 280ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(8) {
  -webkit-animation: eve 320ms 320ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 320ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(9) {
  -webkit-animation: eve 320ms 360ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 360ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(10) {
  -webkit-animation: eve 320ms .4s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms .4s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(11) {
  -webkit-animation: eve 320ms 440ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 440ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(12) {
  -webkit-animation: eve 320ms 480ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 480ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(13) {
  -webkit-animation: eve 320ms 520ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 520ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(14) {
  -webkit-animation: eve 320ms 560ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 560ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(15) {
  -webkit-animation: eve 320ms .6s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms .6s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(16) {
  -webkit-animation: eve 320ms 640ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 640ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(17) {
  -webkit-animation: eve 320ms 680ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 680ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(18) {
  -webkit-animation: eve 320ms 720ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 720ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(19) {
  -webkit-animation: eve 320ms 760ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 760ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(20) {
  -webkit-animation: eve 320ms .8s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms .8s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(21) {
  -webkit-animation: eve 320ms 840ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 840ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(22) {
  -webkit-animation: eve 320ms 880ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 880ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(23) {
  -webkit-animation: eve 320ms 920ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 920ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(24) {
  -webkit-animation: eve 320ms 960ms cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 960ms cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(25) {
  -webkit-animation: eve 320ms 1s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 1s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(26) {
  -webkit-animation: eve 320ms 1.04s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 1.04s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(27) {
  -webkit-animation: eve 320ms 1.08s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 1.08s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(28) {
  -webkit-animation: eve 320ms 1.12s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 1.12s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(29) {
  -webkit-animation: eve 320ms 1.16s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 1.16s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(30) {
  -webkit-animation: eve 320ms 1.2s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 1.2s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(31) {
  -webkit-animation: eve 320ms 1.24s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 1.24s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(32) {
  -webkit-animation: eve 320ms 1.28s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 1.28s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(33) {
  -webkit-animation: eve 320ms 1.32s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 1.32s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(34) {
  -webkit-animation: eve 320ms 1.36s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 1.36s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(35) {
  -webkit-animation: eve 320ms 1.4s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 1.4s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(36) {
  -webkit-animation: eve 320ms 1.44s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 1.44s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(37) {
  -webkit-animation: eve 320ms 1.48s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 1.48s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(38) {
  -webkit-animation: eve 320ms 1.52s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 1.52s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(39) {
  -webkit-animation: eve 320ms 1.56s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 1.56s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(40) {
  -webkit-animation: eve 320ms 1.6s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 1.6s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(41) {
  -webkit-animation: eve 320ms 1.64s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 1.64s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(42) {
  -webkit-animation: eve 320ms 1.68s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 1.68s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(43) {
  -webkit-animation: eve 320ms 1.72s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 1.72s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(44) {
  -webkit-animation: eve 320ms 1.76s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 1.76s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(45) {
  -webkit-animation: eve 320ms 1.8s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 1.8s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(46) {
  -webkit-animation: eve 320ms 1.84s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 1.84s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(47) {
  -webkit-animation: eve 320ms 1.88s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 1.88s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(48) {
  -webkit-animation: eve 320ms 1.92s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 1.92s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(49) {
  -webkit-animation: eve 320ms 1.96s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 1.96s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box #eng-title span:nth-child(50) {
  -webkit-animation: eve 320ms 2s cubic-bezier(.86, 0, .07, 1) forwards;
  animation: eve 320ms 2s cubic-bezier(.86, 0, .07, 1) forwards
}

@keyframes eve {
  0% {
    transform: scale(1.6) translateX(-20px);
    opacity: 0
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1
  }
}

#page-title.is-active .box h1, #page-title.is-active .box p {
  transform: translateX(0);
  opacity: 1
}

#page-title .box {
  padding: 40px 0 0 12%;
  color: rgba(255, 255, 255, .96);
  position: relative;
  z-index: 3;
  white-space: nowrap;
  line-height: 1
}

@media screen and (max-width:768px) {
  #page-title .box {
    padding-left: 0;
    text-align: center
  }
}

#page-title .box #eng-title {
  content: attr(data-eng);
  font-family: Poppins, sans-serif;
  font-size: 88px;
  display: block;
  text-indent: -.02em;
  letter-spacing: .04em;
  margin: 0 0 16px;
  opacity: 0
}

@media screen and (max-width:768px) {
  #page-title .box #eng-title {
    font-size: 28px;
    margin: 0 0 12px
  }
}

#page-title .box #eng-title span {
  display: inline-block;
  opacity: 0
}

#page-title .box h1, #page-title .box p {
  font-size: 20px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(10px);
  transition: all .8s .6s cubic-bezier(.455, .03, .515, .955)
}

@media screen and (max-width:768px) {
  #page-title .box h1, #page-title .box p {
    font-size: 12px
  }
}

.breadnone #bread {
  margin-bottom: 0
}

@media screen and (max-width:768px) {
  .breadnone #bread {
    margin-bottom: 32px
  }
}

#bread {
  background: #0a0a0a;
  margin: 0 0 80px;
  padding: 24px 0;
  padding-left: 120px;
  overflow: hidden;
  color: rgba(255, 255, 255, .8);
  font-size: 13px
}

@media screen and (max-width:768px) {
  #bread {
    margin: 0 0 40px;
    padding: 16px;
    font-size: 11px;
    width: 100%;
    overflow: hidden;
    position: relative
  }
  #bread:after {
    content: '';
    width: 40px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(to right, rgba(10, 10, 10, 0) 0, #0a0a0a 100%)
  }
  #bread ol {
    width: 200%
  }
}

#bread a {
  color: rgba(255, 255, 255, .8)
}

@media screen and (max-width:768px) {
  #bread a {
    white-space: nowrap
  }
}

#bread i {
  display: inline-block;
  margin: 0 12px 0 0;
  font-size: 11px;
  vertical-align: middle;
  transform: translateY(-1px)
}

#bread li {
  float: left;
  list-style: none
}

#bread li:after {
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  font-size: 8px;
  font-weight: 900;
  opacity: .4;
  display: inline-block;
  margin: 0 16px;
  transform: translateY(-2px)
}

#bread li:last-child:after {
  display: none
}

.site-module.wrap {
  padding: 112px 0
}

@media screen and (max-width:768px) {
  .site-module.wrap {
    padding: 40px 15px
  }
}

.site-module.wrap.mid {
  padding-top: 50px;
  padding-bottom: 30px
}

.site-module.wrap.mid1 {
  padding-top: 80px;
  padding-bottom: 100px
}

@media screen and (max-width:768px) {
  .site-module.wrap.mid {
    padding: 40px 15px
  }
}

.site-module.wrap.mid-top {
  padding-top: 80px
}

@media screen and (max-width:768px) {
  .site-module.wrap.mid-top {
    padding: 40px 15px
  }
}

.site-module.wrap.mid-bottom {
  padding-bottom: 80px
}

@media screen and (max-width:768px) {
  .site-module.wrap.mid-bottom {
    padding: 40px 15px
  }
}

.site-module.wrap.side {
  padding-left: 80px;
  padding-right: 80px
}

.site-module.wrap.no-top {
  padding-top: 0
}

.site-module.wrap.no-bottom {
  padding-bottom: 0
}

.site-module.bg {
  background: #f6f6f8
}

.site-module.border {
  border-bottom: #e8e8e8 1px solid
}

.site-module.border-l {
  border-bottom: #f6f6f8 16px solid
}

.site-module .clum-container {
  width: calc(100% - 340px);
  float: left
}

@media screen and (max-width:768px) {
  .site-module .clum-container {
    width: auto;
    float: none;
    margin: 0 0 40px
  }
}

.site-module .clum-side {
  width: 340px;
  float: right;
  padding-left: 60px
}

@media screen and (max-width:768px) {
  .site-module .clum-side {
    width: auto;
    float: none;
    padding: 0
  }
}

.site-module .clum-side .bnr-area {
  margin: 0 0 56px
}

@media screen and (max-width:768px) {
  .site-module .clum-side .bnr-area {
    margin: 0 0 24px
  }
}

.site-module .clum-side .bnr-area figure {
  margin: 0 0 12px
}

.site-module .clum-side .bnr-area figure:last-of-type {
  margin: 0
}

.site-module .clum-side .bnr-area figure img {
  width: 100%
}

.site-module .clum-side .mini-list li {
  list-style: none;
  margin: 0 0 16px;
  padding: 0 0 16px;
  border-bottom: #e8e8e8 1px solid
}

.site-module .clum-side .mini-list li a {
  color: #0a0a0a
}

.site-module .clum-side .mini-list li a .category, .site-module .clum-side .mini-list li a time {
  display: inline-block;
  font-weight: 600
}

@media screen and (max-width:768px) {
  .site-module .clum-side .mini-list li a .category, .site-module .clum-side .mini-list li a time {
    font-size: 12px
  }
}

.site-module .clum-side .mini-list li a .category {
  margin: 0 0 0 16px;
  width: 100px;
  background: #ebebef;
  text-align: center;
  font-size: 12px;
  padding: 1px 0
}

@media screen and (max-width:768px) {
  .site-module .clum-side .mini-list li a .category {
    background: #b1b1c2;
    font-size: 10px;
    padding: 1px 12px;
    color: #fff;
    width: auto
  }
}

.site-module .clum-side .mini-list li a h4 {
  font-size: 15px;
  margin: 8px 0 0
}

@media screen and (max-width:768px) {
  .site-module .clum-side .mini-list li a h4 {
    font-size: 12px
  }
}

.site-module .marker {
  position: relative;
  display: inline-block;
  z-index: 1
}

.site-module .marker:before {
  content: '';
  width: 100%;
  height: 32%;
  background: #F4D780;
  position: absolute;
  left: 0;
  bottom: 8%;
  z-index: -1;
  border-radius: 3px
}

.site-module .marker_m {
  font-weight: 700;
  background: linear-gradient(transparent 70%, #F4D780 70%)
}

.site-module h2.large, .site-module h3.large {
  font-weight: 700;
  font-size: 34px;
  text-align: center;
  margin: 0 0 32px
}

@media screen and (max-width:768px) {
  .site-module h2.large, .site-module h3.large {
    font-size: 24px;
    margin: 0 0 24px
  }
}

.site-module h2.large.medium, .site-module h3.large.medium {
  font-size: 28px;
  line-height: 1.66
}

@media screen and (max-width:768px) {
  .site-module h2.large.medium, .site-module h3.large.medium {
    font-size: 18px;
    margin: 0 15px 24px
  }
}

.site-module h2.large.medium:after, .site-module h3.large.medium:after {
  font-size: 13px;
  opacity: .24;
  margin: 12px 0 0
}

@media screen and (max-width:768px) {
  .site-module h2.large.medium:after, .site-module h3.large.medium:after {
    font-size: 10px
  }
}

.site-module h2.large:after, .site-module h3.large:after {
  content: attr(data-eng);
  font-family: Poppins, sans-serif;
  font-size: 14px;
  letter-spacing: .12em;
  display: block
}

@media screen and (max-width:768px) {
  .site-module h2.large:after, .site-module h3.large:after {
    font-size: 10px
  }
}

.site-module h2.borders, .site-module h3.borders, .site-module h4.borders {
  border-bottom: #e8e8e8 1px solid;
  position: relative;
  padding: 12px;
  padding-left: 20px;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  margin: 0 0 24px
}

@media screen and (max-width:768px) {
  .site-module h2.borders, .site-module h3.borders, .site-module h4.borders {
    font-size: 18px;
    margin: 0 0 20px;
    padding-left: 18px
  }
}

.site-module h2.borders small, .site-module h3.borders small, .site-module h4.borders small {
  display: inline-block;
  margin: 0 0 0 20px;
  font-size: 13px
}

@media screen and (max-width:768px) {
  .site-module h2.borders small, .site-module h3.borders small, .site-module h4.borders small {
    margin: 0 0 0 15px;
    font-size: 11px
  }
}

.site-module h2.borders:after, .site-module h3.borders:after, .site-module h4.borders:after {
  content: '';
  width: 5px;
  height: 70%;
  background: #0a0a0a;
  border-radius: 4px;
  display: block;
  position: absolute;
  top: 15%;
  left: 0
}

.site-module .flex {
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between
}

.site-module .btnarea {
  margin: 32px 0 0
}

@media screen and (max-width:768px) {
  .site-module .btnarea {
    margin: 24px 0 0
  }
}

.site-module .btnarea.center {
  text-align: center
}

.site-module .btnarea a {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  padding: 13px 56px;
  background: #0a0a0a;
  border: #0a0a0a 1px solid;
  color: #fff;
  margin: 0 8px;
  border-radius: 999px;
  transition: all .2s 0s cubic-bezier(.455, .03, .515, .955)
}

@media screen and (max-width:768px) {
  .site-module .btnarea a {
    display: block;
    padding: 13px 0;
    text-align: center;
    font-size: 15px;
    margin: 0
  }
}

.site-module .btnarea a:hover {
  background: #fff;
  color: #0a0a0a
}

.site-module .btnarea a i {
  font-size: 13px;
  display: inline-block;
  margin: 0 0 0 12px;
  transform: translateY(-1px)
}

.site-module .btnarea a.one {
  margin: 0
}

.site-module .btnarea a.block {
  display: block;
  padding: 14px;
  text-align: center
}

@media screen and (max-width:768px) {
  .site-module .btnarea a.block {
    padding: 13px 0
  }
}

.site-module .table-style {
  border-collapse: collapse;
  border: #e8e8e8 1px solid;
  width: 100%
}

@media screen and (max-width:768px) {
  .site-module .table-style {
    border: #e8e8e8 1px solid;
    display: block
  }
  .site-module .table-style tbody, .site-module .table-style td, .site-module .table-style th, .site-module .table-style thead, .site-module .table-style tr {
    display: block
  }
  .site-module .table-style tr:last-child td {
    border-bottom: none
  }
}

.site-module .table-style tbody tr td, .site-module .table-style tbody tr th, .site-module .table-style thead tr td, .site-module .table-style thead tr th {
  padding: 32px 24px;
  border: #e8e8e8 1px solid;
  vertical-align: middle;
  text-align: left;
  font-size: 15px
}

@media screen and (max-width:768px) {
  .site-module .table-style tbody tr td, .site-module .table-style tbody tr th, .site-module .table-style thead tr td, .site-module .table-style thead tr th {
    font-size: 13.5px;
    padding: 15px;
    border: none;
    border-bottom: #e8e8e8 1px solid
  }
}

.site-module .table-style tbody tr th, .site-module .table-style thead tr th {
  font-weight: 700;
  width: 24%;
  background: #f6f6f8
}

@media screen and (max-width:768px) {
  .site-module .table-style tbody tr th, .site-module .table-style thead tr th {
    width: 100%;
    border: none;
    border-bottom: #e8e8e8 1px solid
  }
}

.site-module .form-style {
  border-collapse: collapse;
  width: 100%
}

@media screen and (max-width:768px) {
  .site-module .form-style.responsive {
    display: block;
    border: #e8e8e8 1px solid
  }
  .site-module .form-style.responsive tbody, .site-module .form-style.responsive td, .site-module .form-style.responsive th, .site-module .form-style.responsive thead, .site-module .form-style.responsive tr {
    display: block
  }
  .site-module .form-style.responsive tbody tr td, .site-module .form-style.responsive tbody tr th, .site-module .form-style.responsive thead tr td, .site-module .form-style.responsive thead tr th {
    border-bottom: #e8e8e8 1px solid
  }
  .site-module .form-style.responsive tbody tr th, .site-module .form-style.responsive thead tr th {
    width: 100%
  }
  .site-module .form-style.responsive tbody tr:last-child td, .site-module .form-style.responsive thead tr:last-child td {
    border-bottom: none
  }
}

.site-module .form-style.long.table-border tbody tr th, .site-module .form-style.long.table-border thead tr th {
  width: 32%
}

@media screen and (max-width:768px) {
  .site-module .form-style.long.table-border tbody tr th, .site-module .form-style.long.table-border thead tr th {
    width: 100%
  }
}

.site-module .form-style.table-border {
  border: #e8e8e8 1px solid
}

.site-module .form-style.table-border tbody tr td, .site-module .form-style.table-border tbody tr th, .site-module .form-style.table-border thead tr td, .site-module .form-style.table-border thead tr th {
  padding-left: 24px
}

@media screen and (max-width:768px) {
  .site-module .form-style.table-border tbody tr td, .site-module .form-style.table-border tbody tr th, .site-module .form-style.table-border thead tr td, .site-module .form-style.table-border thead tr th {
    padding-left: 15px
  }
}

.site-module .form-style.table-border tbody tr th, .site-module .form-style.table-border thead tr th {
  width: 24%
}

@media screen and (max-width:768px) {
  .site-module .form-style.table-border tbody tr th, .site-module .form-style.table-border thead tr th {
    width: 100%
  }
}

.site-module .form-style input, .site-module .form-style option, .site-module .form-style select, .site-module .form-style textarea {
  font-family: 'Open Sans', "游ゴシック", YuGothic, "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", Helvetica, Arial, Verdana, sans-serif;
  font-weight: 500;
  font-feature-settings: "palt";
  letter-spacing: .016em;
  border: none;
  font-size: 15px;
  background: #f6f6f8;
  padding: 10px 12px;
  border-radius: 4px
}

.site-module .form-style input[type=email], .site-module .form-style input[type=tel], .site-module .form-style input[type=text], .site-module .form-style textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  display: block;
  transition: all .2s 0s cubic-bezier(.455, .03, .515, .955)
}

.site-module .form-style input[type=email]:focus, .site-module .form-style input[type=tel]:focus, .site-module .form-style input[type=text]:focus, .site-module .form-style textarea:focus {
  background: #fff;
  box-shadow: 0 0 56px rgba(0, 0, 0, .12);
  transform: scale(1.04)
}

.site-module .form-style textarea {
  height: 200px
}

.site-module .form-style tbody tr td, .site-module .form-style tbody tr th, .site-module .form-style thead tr td, .site-module .form-style thead tr th {
  padding: 32px 0;
  border-bottom: #e8e8e8 1px solid;
  vertical-align: middle;
  text-align: left;
  font-size: 16px
}

@media screen and (max-width:768px) {
  .site-module .form-style tbody tr td, .site-module .form-style tbody tr th, .site-module .form-style thead tr td, .site-module .form-style thead tr th {
    font-size: 13.5px;
    padding: 15px
  }
}

.site-module .form-style tbody tr th, .site-module .form-style thead tr th {
  width: 30%
}

@media screen and (max-width:768px) {
  .site-module .form-style tbody tr th, .site-module .form-style thead tr th {
    width: 100%;
    background: #f6f6f8
  }
}

.site-module .form-style tbody tr th.hiss, .site-module .form-style thead tr th.hiss {
  position: relative;
  top: 0;
  left: 0
}

.site-module .form-style tbody tr th.hiss:after, .site-module .form-style thead tr th.hiss:after {
  content: '必須';
  background: #0a0a0a;
  color: #fff;
  display: inline-block;
  padding: 4px 24px;
  position: absolute;
  top: 50%;
  right: 40px;
  font-size: 13px;
  margin-top: -16px;
  border-radius: 4px
}

@media screen and (max-width:768px) {
  .site-module .form-style tbody tr th.hiss:after, .site-module .form-style thead tr th.hiss:after {
    right: 15px
  }
}

.site-module .form-style tbody tr th.custum:after, .site-module .form-style thead tr th.custum:after {
  content: attr(data-text);
  color: #0a0a0a;
  background: #f0f0f4
}

@media screen and (max-width:768px) {
  .site-module .form-style tbody tr th.custum:after, .site-module .form-style thead tr th.custum:after {
    background: #dfdfe6
  }
}

.site-module .form-style tbody tr td strong, .site-module .form-style thead tr td strong {
  font-weight: 700
}

.site-module .form-style tbody tr td .gadget li, .site-module .form-style thead tr td .gadget li {
  list-style: none;
  margin: 0 0 24px
}

.site-module .form-style tbody tr td .gadget li:before, .site-module .form-style thead tr td .gadget li:before {
  content: attr(data-text);
  display: block;
  margin: 0 0 4px
}

.site-module .form-style tbody tr td .gadget li:last-child, .site-module .form-style thead tr td .gadget li:last-child {
  margin: 0
}

.site-module .form-style tbody tr td p.alert, .site-module .form-style thead tr td p.alert {
  margin: 4px;
  color: #f65f6a;
  font-size: 13px;
  font-weight: 700
}

@media screen and (min-width:769px) {
  .site-module .blog-list.clum>li {
    list-style: none;
    width: 48.5%;
    float: left;
    margin: 0 3% 3% 0
  }
  .site-module .blog-list.clum>li:nth-child(2n+1) {
    clear: both
  }
  .site-module .blog-list.clum>li:nth-child(2n+2) {
    margin-right: 0
  }
  .site-module .blog-list.clum>li:nth-last-child(-n+2) {
    margin-bottom: 0
  }
}

@media screen and (max-width:768px) {
  .site-module .blog-list.clum>li {
    list-style: none;
    margin: 0 0 16px
  }
  .site-module .blog-list.clum>li:last-child {
    margin: 0
  }
}

.site-module .blog-list>li {
  background: #fff;
  padding: 16px;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between
}

@media screen and (max-width:768px) {
  .site-module .blog-list>li {
    padding: 15px
  }
}

.site-module .blog-list>li a {
  color: #0a0a0a
}

.site-module .blog-list>li a:hover {
  opacity: .64
}

.site-module .blog-list>li a:hover img {
  opacity: 1
}

.site-module .blog-list>li figure {
  width: 96px
}

@media screen and (max-width:768px) {
  .site-module .blog-list>li figure {
    width: 88px
  }
}

.site-module .blog-list>li figure img {
  width: 100%
}

.site-module .blog-list>li .text {
  width: calc(100% - 120px)
}

@media screen and (max-width:768px) {
  .site-module .blog-list>li .text {
    width: calc(100% - 104px)
  }
}

.site-module .blog-list>li .text ul.meta {
  margin: 0 0 16px
}

@media screen and (max-width:768px) {
  .site-module .blog-list>li .text ul.meta {
    margin: 0 0 8px
  }
}

.site-module .blog-list>li .text ul.meta>li {
  float: left
}

.site-module .blog-list>li .text ul.meta>li .category, .site-module .blog-list>li .text ul.meta>li time {
  font-size: 12px;
  line-height: 1;
  padding: 4px 12px;
  margin: 0 12px 0 0;
  border: #e8e8e8 1px solid;
  color: #0a0a0a
}

@media screen and (max-width:768px) {
  .site-module .blog-list>li .text ul.meta>li .category, .site-module .blog-list>li .text ul.meta>li time {
    padding: 2px 8px;
    font-size: 10px;
    margin: 0 8px 0 0
  }
}

@media screen and (max-width:768px) {
  .site-module .blog-list>li .text ul.meta>li .category {
    margin: 0
  }
}

.site-module .blog-list>li .text ul.meta>li time {
  border-color: #0a0a0a;
  background: #0a0a0a;
  color: #fff
}

.site-module .blog-list>li .text ul.meta>li.like {
  float: right
}

.site-module .blog-list>li .text ul.meta>li.like i {
  color: #f65f6a;
  margin: 0 8px 0 0;
  display: inline-block;
  font-size: 12px
}

.site-module .blog-list>li .text h4 {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.7
}

@media screen and (max-width:768px) {
  .site-module .blog-list>li .text h4 {
    font-size: 12px;
    line-height: 1.6
  }
}

.site-module .campainbnr {
  margin: 32px 0 0
}

.site-module .campainbnr.mb {
  margin: 0 0 32px
}

.site-module .campainbnr img {
  width: 100%
}

.site-module .pager {
  margin: 40px 0 0;
  text-align: center;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  align-items: center;
  justify-content: center
}

@media screen and (max-width:768px) {
  .site-module .pager {
    margin: 24px 0 0
  }
}

.site-module .pager a, .site-module .pager span {
  width: 36px;
  height: 36px;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  align-items: center;
  justify-content: center;
  color: #0a0a0a;
  margin: 0 6px;
  background: #fff;
  border-radius: 50%;
  transition: transform 160ms
}

.site-module .pager a:hover {
  background: #F4D780;
  transform: scale(1.2)
}

.site-module .pager span {
  background: #0a0a0a;
  color: #fff
}

.scroll-anime {
  opacity: 0;
  transform: translateY(48px);
  transition: all .8s 0s cubic-bezier(.455, .03, .515, .955)
}

.scroll-anime._active {
  opacity: 1;
  transform: translateY(0)
}

.scroll-img {
  position: relative
}

.scroll-img:after, .scroll-img:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%
}

.scroll-img:before {
  background: #F4D780;
  transition: all .6s .6s cubic-bezier(.86, 0, .07, 1)
}

.scroll-img:after {
  background: #fff;
  transition: all .6s 0s cubic-bezier(.86, 0, .07, 1)
}

.scroll-img.__active:before {
  width: 0
}

.scroll-img.__active:after {
  width: 0
}

._move {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  min-height: 480px;
  z-index: 9000
}

._move.moved {
  left: 0;
  transform: rotate(45deg) scale(3)
}

._move.moved:after, ._move.moved:before {
  content: '';
  position: absolute;
  width: 50.1%;
  height: 0;
  background: #fff;
  -webkit-animation: anime 1.6s cubic-bezier(.39, .575, .565, 1);
  animation: anime 1.6s cubic-bezier(.39, .575, .565, 1)
}

@-webkit-keyframes anime {
  0% {
    width: 50.1%;
    height: 0;
    background: #F4D780
  }
  40% {
    width: 50.1%;
    height: 100%
  }
  60% {
    height: 100%;
    width: 100%;
    opacity: 1;
    background: #F4D780
  }
  100% {
    height: 100%;
    width: 100%;
    opacity: 0;
    background: #fff
  }
}

@keyframes anime {
  0% {
    width: 50.1%;
    height: 0;
    background: #F4D780
  }
  40% {
    width: 50.1%;
    height: 100%
  }
  60% {
    height: 100%;
    width: 100%;
    opacity: 1;
    background: #F4D780
  }
  100% {
    height: 100%;
    width: 100%;
    opacity: 0;
    background: #fff
  }
}

._move.moved:before {
  bottom: 0;
  left: 0
}

._move.moved:after {
  top: 0;
  right: 0
}


/*# sourceMappingURL=style.css.map */