@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap');

/* スクロールバーのデザインを共通デザインに同じ形で表示 */
.scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.scrollbar::-webkit-scrollbar-thumb {
  /*#262D4D*/
  background: #c1c1c1 0% 0% no-repeat padding-box;
  border-radius: 4px;
}

.scrollbar::-webkit-scrollbar-thumb:hover {
  /*#262D4D*/
  background: #a8a8a8 0% 0% no-repeat padding-box;
}

.scrollbar::-webkit-scrollbar-track {
  /*#262D4D*/
  background: #f1f1f1 0% 0% no-repeat padding-box;
  border-radius: 4px;
}

i {
  font-style: normal;
}

body {
  height: 100vh;
}

/*body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
}*/
body.js-animate {
  height: auto;
}

#wrap {
  opacity: 0;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}

#wrap.js-animate {
  opacity: 1;
}

.nicescroll-rails {
  visibility: hidden;
}

body.js-animate .nicescroll-rails {
  visibility: visible;
}

.nicescroll-rails-hr {
  visibility: hidden !important;
}

.slick-slide:focus {
  outline: none;
}

.is-robot {
  font-family: 'Roboto', 'Noto Sans JP', メイリオ, Meiryo, 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

.weight {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  -webkit-transition: -webkit-transform 1s ease;
  transition: -webkit-transform 1s ease;
  transition: transform 1s ease;
  transition: transform 1s ease, -webkit-transform 1s ease;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media (max-width: 767px) {
  .sp {
    /* display: none; */
  }

  a {
    transition: .5s ease;
  }

  a:hover {
    opacity: .8;
    text-decoration: none;
  }

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

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

  .content-inr {
    width: 92%;
    margin: 0 auto;
    font-size: 1.4rem;
    position: relative;
    z-index: 5;
  }

  /*--------------------------
  type-text
  ---------------------------*/
  .type-text {
    color: #196ffe;
    overflow: hidden;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 2px;
    text-align: center;
  }

  .type-text::after {
    content: '';
    margin: 0 0 0 3px;
    border-right: 1px solid #196ffe;
  }

  .type-text span {
    font-size: 1.5rem;
    font-weight: 400;
    display: none;
  }

  /*--------------------------
  sec-ttl
  ---------------------------*/
  #fade-text {
    font-family: 'Slabo 27px', Helvetica, Arial, sans-serif;
    font-size: .5em;
  }

  svg {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .sec-box {
    position: relative;
    z-index: 99;
  }

  .animate .sec-box {
    opacity: 1;
  }

  .sec-ttl {
    font-size: 6rem;
    line-height: 1.28;
    font-weight: 600;
    opacity: 1;
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
    word-break: normal;
    word-wrap: normal;
    text-align: center;
  }

  .sec-ttl span {
    display: block;
    position: relative;
  }

  .sec-ttl span.lead {
    font-size: 3.5rem;
    font-weight: 100;
    color: #19aafe;
    margin: 35px 0 25px;
    text-shadow: 0px 0px 30px #007eff, 0px 0px 30px #007eff;
  }

  .sec-ttl span.lead strong {
    font-weight: 300;
    text-shadow: 0px 0px 5px #007eff, 0px 0px 10px #007eff;
  }

  .sec-ttl span.main {
    text-align: center;
    margin: 20px 0 15px;
    color: #fff;
  }

  .sec-ttl.animate b::after {
    -webkit-transition-delay: .3s;
    transition-delay: .3s;
  }

  .sec-ttl span {
    display: block;
    font-size: 2rem;
    font-weight: 200;
  }

  .sec-txt {
    margin: 0 0 16px;
    color: #ffffff;
    font-size: 1.35rem;
    line-height: 1.9;
    letter-spacing: 0.1px;
    font-weight: 200;
    text-align: left;
  }

  /*--------------------------
  fv
  ---------------------------*/
  .fv {
    position: relative;
  }

  .fv__ttl {
    position: absolute;
    top: 15%;
    left: 7%;
    z-index: +1;
    width: 86.4%;
  }

  .fv__lead {
    position: absolute;
    top: 10px;
    right: 2%;
    font-size: clamp(1.2rem, 3.2vw, 1.8rem);
    color: #FFF;
  }

  .fv__txt {
    font-size: clamp(1rem, 2.5vw, 1.8rem);
    color: #000;
    letter-spacing: 0.08em;
    font-weight: 600;
    padding: 4px 0;
    text-align: center;
    background: #FFF;
    margin-top: 15px;
  }

  /*--------------------------
  parallax
  ---------------------------*/
  .fixed-bg {
    background: #050c1e;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-transition: background 1s ease;
    transition: background 1s ease;
  }

  .content.after .fixed-bg {
    background: #25262a;
  }

  .content.after.video .fixed-bg {
    background: #111112;
  }

  .content.after .fixed-bg #particles-left2,
  .content.after .fixed-bg #particles-right2 {
    opacity: 0;
  }

  #particles-left2 {
    width: 25%;
    height: 100vh;
    margin: 0;
    margin-left: -5%;
    -webkit-transition: opacity 1s ease;
    transition: opacity 1s ease;
  }

  #particles-right2 {
    width: 25%;
    height: 100vh;
    margin: 0 auto;
    position: absolute;
    right: -5%;
    top: 0;
    -webkit-transition: opacity 1s ease;
    transition: opacity 1s ease;
  }

  /*--------------------------
  introduction
  ---------------------------*/
  .mv__video {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    min-width: 100vw;
    min-height: 100vh;
    background: url(/resources/firstTimePage/img/about/bg_mv.jpg) no-repeat 50% 50%/cover;
    opacity: 0;
    -webkit-transition: 2s opacity 1s;
    transition: 2s opacity 1s;
  }

  .animate .mv__video {
    opacity: 1;
  }

  .approach {
    position: relative;
    background: url(/resources/firstTimePage/img/about/approach_bg1_top_sp.png) no-repeat left top/100%, url(/resources/firstTimePage/img/about/approach_bg1_bottom_sp.jpg) no-repeat center bottom /100%, -webkit-gradient(linear, left top, right top, from(rgb(5 12 30)), to(rgb(2, 8, 28)));
    background: url(/resources/firstTimePage/img/about/approach_bg1_top_sp.png) no-repeat left top/100%, url(/resources/firstTimePage/img/about/approach_bg1_bottom_sp.jpg) no-repeat center bottom /100%, linear-gradient(90deg, rgb(5 12 30) 0%, rgb(2, 8, 28) 100%);
    padding: 80px 0 80vw;
  }

  .approach::after {
    content: "";
    width: 100%;
    height: 70vw;
    background: url(/resources/firstTimePage/img/about/approach_bg2_sp.png) no-repeat right top /contain;
    display: block;
    visibility: visible;
    margin: 20px 0;
  }

  .approach .type-text {
    text-align: left;
  }

  .approach-ttl span.main {

    text-align: left;
  }

  /*--------------------------
  applicable
  ---------------------------*/
  .applicable {
    padding: 50px 0 0;
  }

  .applicable-txt {
    text-align: center;
    margin-bottom: 40px;
  }

  .applicable-box {
    max-width: 440px;
    margin-inline: auto;
  }

  .applicable-table {
    width: 100%;
    color: #fefefe;
    border: 1px solid #fff;
  }
  .applicable-table th,
  .applicable-table td {
    font-weight: 200;
    font-size: 1.6rem;
    line-height: 1.5;
    padding: 0px 10px;
    text-align: center;
  }

  .applicable-table th {
    font-size: 1.4rem;
    padding: 5px;
    background-color: #01204b;
    border: 1px solid #fff;
  }

  .applicable-table th:first-child {
    width: 60%;
  }

  .applicable-table tbody tr:first-child td {
    padding-top: 8px;
  }
  .applicable-table tbody tr:last-child td {
    padding-bottom: 16px;
  }
  .applicable-table td:first-child {
    padding-left: 16px;
  }
  .applicable-table td:nth-child(2) {
    padding-right: 16px;
  }
  .applicable-table td:last-child {
    border-left: 1px solid #fff;
  }
  .applicable-note {
    font-size: 1.3rem;
    color: #b0b0b0;
    margin-top: 8px;
  }

  /*--------------------------
  role
  ---------------------------*/
  .role {
    padding: 50px 0 40px;
  }

  .role-txt {
    margin-bottom: 24px;
  }

  .role-box {
    display: grid;
    justify-content: center;
  }


  .introduction {
    color: #fff;
    position: relative;
    overflow: hidden;
    background: #050c1e;
    z-index: 55;
  }

  .introduction-box {
    padding: 50px 0 100px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
  }

  .introduction a {
    display: block;
  }

  .introduction-box::before {
    content: "";
    width: 160px;
    height: 180px;
    background: url(/resources/firstTimePage/img/about/introduction_play.png)no-repeat 0 0 /contain;
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0;
    -webkit-transition: background .5s ease, opacity .5s ease 1s;
    transition: background .5s ease, opacity .5s ease 1s;
  }

  .animate .introduction-box::before {
    opacity: 1;
  }

  .introduction-ttl span.lead {
    text-align: left;
    margin: 26px 0 20px 0;
    letter-spacing: 1.5px;
  }

  .introduction-ttl span.main {
    text-align: left;
  }

  .introduction-txt {}

  .introduction-link {
    margin: 32px 0 0;
    display: block;
  }

  .introduction-link a {
    display: block;
    color: #cb2138;
    border: 1px solid #ffffff;
    padding: 10px 0;
    border-radius: 8px;
    text-align: center;
    max-width: 210px;
    width: 80%;
    font-size: 1.5rem;
    letter-spacing: 0.3px;
    font-weight: 600;
    margin: 0 0 15px;
    position: relative;
    background: #fff;
  }

  .introduction-link a:after {
    content: "";
    position: absolute;
    top: calc(50% - 6px);
    right: 22px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #cb2138;
    border-right: 2px solid #cb2138;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: .3s ease;
    transition: .3s ease;
  }

  .introduction-signal {
    width: 1000px;
    height: 100%;
    position: absolute;
    top: 0;
    left: -270px;
    z-index: 1;
    opacity: 0.9;
  }

  /*--------------------------
  advantage
  ---------------------------*/
  .advantage-wrap {
    position: relative;
    /* overflow: hidden; */
  }

  .advantage-bg {
    /* background: #050c1e; */
    /* background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #010613), color-stop(95%, #050c1e)); */
    /* background: linear-gradient(#010613 10%, #050c1e 95%); */
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
  }

  #particles-left {
    width: 25%;
    height: 100vh;
    margin: 0;
    margin-left: -5%;
  }

  #particles-right {
    width: 25%;
    height: 100vh;
    margin: 0 auto;
    position: absolute;
    right: -5%;
    top: 0;
  }

  .advantage {
    padding: 65px 0 330px;
    color: #fff;
    position: relative;
    background: #050c1e;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #010613), color-stop(95%, #050c1e));
    background: linear-gradient(#010613 10%, #050c1e 95%);
  }

  .advantage-tanker {
    position: absolute;
    width: 70%;
    top: -150px;
    right: -10%;
    -webkit-transition: -webkit-transform 2s ease;
    transition: -webkit-transform 2s ease;
    transition: transform 2s ease;
    transition: transform 2s ease, -webkit-transform 2s ease;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .advantage::after {
    content: "";
    width: 100%;
    height: 1073px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: url(/resources/firstTimePage/img/about/advantage-feature_bg.png)no-repeat center bottom /auto;
    visibility: visible;
    opacity: 0;
    -webkit-transition: .5s ease;
    transition: .5s ease;
  }

  .animate2.advantage::after {
    opacity: 1;
  }

  .advantage-box {
    padding-top: 150px;
  }

  .advantage-ttl::before {
    width: 21ch;
  }

  .advantage-txt {}

  .advantage-img-wrap {
    position: relative;
    margin: 250px 0 -200px;
  }

  .advantage-img {
    position: relative;
    width: 100%;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 1s ease-out 0s, opacity 1s ease .5s;
    transition: -webkit-transform 1s ease-out 0s, opacity 1s ease .5s;
    -webkit-transition: opacity 1s ease .5s, -webkit-transform 1s ease-out 0s;
    transition: opacity 1s ease .5s, -webkit-transform 1s ease-out 0s;
    transition: transform 1s ease-out 0s, opacity 1s ease .5s;
    transition: transform 1s ease-out 0s, opacity 1s ease .5s, -webkit-transform 1s ease-out 0s;
    transition: transform 1s ease-out 0s, -webkit-transform 1s ease-out 0s, opacity 1s ease .5s;
  }

  .advantage-img:not(.is-01) {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: -webkit-transform 1s ease-out 0s, opacity 1s ease .5s;
    transition: -webkit-transform 1s ease-out 0s, opacity 1s ease .5s;
    -webkit-transition: opacity 1s ease .5s, -webkit-transform 1s ease-out 0s;
    transition: opacity 1s ease .5s, -webkit-transform 1s ease-out 0s;
    transition: transform 1s ease-out 0s, opacity 1s ease .5s;
    transition: transform 1s ease-out 0s, opacity 1s ease .5s, -webkit-transform 1s ease-out 0s;
    transition: transform 1s ease-out 0s, -webkit-transform 1s ease-out 0s, opacity 1s ease .5s;
  }

  .advantage-img.is-02 {
    -webkit-transition: opacity .5s ease .2s, -webkit-transform 1s ease-out 0s;
    transition: opacity .5s ease .2s, -webkit-transform 1s ease-out 0s;
    transition: opacity .5s ease .2s, transform 1s ease-out 0s;
    transition: opacity .5s ease .2s, transform 1s ease-out 0s, -webkit-transform 1s ease-out 0s;
  }

  .advantage-img.is-03 {
    -webkit-transition: opacity .5s ease .4s, -webkit-transform 1s ease-out 0s;
    transition: opacity .5s ease .4s, -webkit-transform 1s ease-out 0s;
    transition: opacity .5s ease .4s, transform 1s ease-out 0s;
    transition: opacity .5s ease .4s, transform 1s ease-out 0s, -webkit-transform 1s ease-out 0s;
  }

  .advantage-img.is-04 {
    -webkit-transition: opacity .5s ease .6s, -webkit-transform 1s ease-out 0s;
    transition: opacity .5s ease .6s, -webkit-transform 1s ease-out 0s;
    transition: opacity .5s ease .6s, transform 1s ease-out 0s;
    transition: opacity .5s ease .6s, transform 1s ease-out 0s, -webkit-transform 1s ease-out 0s;
  }

  .advantage-img.is-05 {
    -webkit-transition: opacity .5s ease .8s, -webkit-transform 1s ease-out 0s;
    transition: opacity .5s ease .8s, -webkit-transform 1s ease-out 0s;
    transition: opacity .5s ease .8s, transform 1s ease-out 0s;
    transition: opacity .5s ease .8s, transform 1s ease-out 0s, -webkit-transform 1s ease-out 0s;
  }

  .advantage-img.is-06 {
    -webkit-transition: opacity .5s ease 1.2s, -webkit-transform 1s ease-out 0s;
    transition: opacity .5s ease 1.2s, -webkit-transform 1s ease-out 0s;
    transition: opacity .5s ease 1.2s, transform 1s ease-out 0s;
    transition: opacity .5s ease 1.2s, transform 1s ease-out 0s, -webkit-transform 1s ease-out 0s;
  }

  .advantage-img-wrap.animate .advantage-img {
    opacity: 1;
  }

  .advantage-feature-wrap {
    padding: 80px 0 0;
    margin: 40px 0 0;
  }

  .advantage-feature {
    position: relative;
    z-index: 2;
    display: block;
    height: 503px;
  }

  .feature-box {
    max-width: 440px;
    position: relative;
    top: 0;
    left: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 65px 0 125px;
    -webkit-transform: translate(0, 50px);
    transform: translate(0, 50px);
    -webkit-transition: -webkit-transform 1s ease-out 0s, opacity 1s ease .5s;
    transition: -webkit-transform 1s ease-out 0s, opacity 1s ease .5s;
    -webkit-transition: opacity 1s ease .5s, -webkit-transform 1s ease-out 0s;
    transition: opacity 1s ease .5s, -webkit-transform 1s ease-out 0s;
    transition: transform 1s ease-out 0s, opacity 1s ease .5s;
    transition: transform 1s ease-out 0s, opacity 1s ease .5s, -webkit-transform 1s ease-out 0s;
    transition: transform 1s ease-out 0s, -webkit-transform 1s ease-out 0s, opacity 1s ease .5s;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .feature-box--01 {
    padding: 30px 11% 70px 0;
  }

  .feature-box--02 {
    padding: 35px 4% 115px 10%;
    margin: 10px 0 0;
    margin-left: auto;
    right: -5%;
    left: auto;
  }

  .feature-box--02 .feature-detail {
    max-width: 360px;
    margin: 0;
  }

  .feature-box--01::before {
    content: "";
    width: 105%;
    height: 100%;
    background: url(/resources/firstTimePage/img/about/advantage-feature_box01.png)no-repeat right top /100% 100%;
    position: absolute;
    top: 0;
    left: -5%;
  }

  .feature-box--02::before {
    content: "";
    width: 107%;
    height: 100%;
    background: url(/resources/firstTimePage/img/about/advantage-feature_box02.png)no-repeat left top /100% 100%;
    position: absolute;
    top: 0;
    right: -5%;
  }

  .feature-box--02::after {
    content: "";
    width: 30%;
    height: 180px;
    background: url(/resources/firstTimePage/img/about/feature-bot.png)no-repeat left top /contain;
    position: absolute;
    bottom: -70px;
    right: -10px;
    -webkit-transition: .5s ease .5s;
    transition: .5s ease .5s;
    /* opacity: 0; */
  }

  .feature-box--02.animate::after {
    opacity: 1;
  }

  .feature-cont {
    position: relative;
  }

  .feature-ttl {
    font-weight: 100;
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 5px;
    color: #19aafe;
    text-shadow: 0px 0px 30px #007eff, 0px 0px 30px #007eff;
  }

  .feature-detail {}

  .feature-detail__ttl {
    font-weight: 200;
    font-size: 1.8rem;
    margin: 15px 0 11px;
  }

  .feature-detail__txt {
    line-height: 1.9;
    font-weight: 200;
    font-size: 1.3rem;
  }

  .illust01 {
    position: relative;
  }

  .fade.animate {
    -webkit-transition: .5s ease;
    transition: .5s ease;
    opacity: 1;
  }

  span[class^="illust01-0"] {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }

  span.illust01-00 {
    position: relative;
    z-index: 10;
    opacity: 1;
  }

  .fade.animate span[class^="illust01-0"] {
    opacity: 1;
    -webkit-transition-duration: .7s;
    transition-duration: .7s;
  }

  .fade.animate .illust01-01 {
    -webkit-transition-delay: 2s;
    transition-delay: 2s;
  }

  .fade.animate .illust01-02 {
    -webkit-transition-delay: 1.5s;
    transition-delay: 1.5s;
  }

  .fade.animate .illust01-03 {
    -webkit-transition-delay: 2.5s;
    transition-delay: 2.5s;
  }

  .fade.animate .illust01-04 {
    -webkit-transition-delay: 1s;
    transition-delay: 1s;
  }

  .fade.animate .illust01-05 {
    -webkit-transition-delay: 3s;
    transition-delay: 3s;
  }

  .illust02 {
    position: relative;
    margin: -30px 0 0 20px;
  }

  span[class^="illust02-0"] {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }

  span.illust02-00 {
    position: relative;
    z-index: 10;
    opacity: 1;
  }

  .fade.animate span[class^="illust02-0"] {
    opacity: 1;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
  }

  .fade.animate .illust02-01 {
    -webkit-transition-delay: .8s;
    transition-delay: .8s;
  }

  .fade.animate .illust02-02 {
    -webkit-transition-delay: 1.8s;
    transition-delay: 1.8s;
    width: 100%;
  }

  /*--------------------------
  service
  ---------------------------*/
  .service {
    padding: 0;
    margin: -200px 0 0;
    position: relative;
  }

  .service_bg-wrap {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
  }

  .service_bg-img {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: -webkit-transform 1s ease;
    transition: -webkit-transform 1s ease;
    transition: transform 1s ease;
    transition: transform 1s ease, -webkit-transform 1s ease;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .service_bg-img.is-01 {
    background: url(/resources/firstTimePage/img/about/service_bg01.png)no-repeat right top /40%;
    width: 100%;
    height: 350px;
    top: 17%;
  }

  .service_bg-img.is-02 {
    background: url(/resources/firstTimePage/img/about/service_bg02.png)no-repeat left top /40%;
    width: 100%;
    height: 300px;
    top: 51.6%;
  }

  .service_bg-img.is-03 {
    background: url(/resources/firstTimePage/img/about/service_bg03.png)no-repeat right top /20%;
    width: 100%;
    height: 400px;
    top: 76%;
  }

  .service_bg-img.is-04 {
    background: url(/resources/firstTimePage/img/about/service_bg04.png)no-repeat right 4% top /50%;
    width: 100%;
    height: 400px;
    top: 10%;
  }

  .service_bg-img.is-05 {
    background: url(/resources/firstTimePage/img/about/service_bg05.png)no-repeat left top /59%;
    width: 100%;
    height: 552px;
    top: 25.5%;
  }

  .service_bg-img.is-06 {
    background: url(/resources/firstTimePage/img/about/service_bg06.png)no-repeat right top /27%;
    width: 100%;
    height: 302px;
    top: 37.6%;
  }

  .service_bg-img.is-07 {
    background: url(/resources/firstTimePage/img/about/service_bg05.png)no-repeat left -2% top /60%;
    width: 100%;
    height: 552px;
    top: 86%;
  }

  .service-head {
    background: url(/resources/firstTimePage/img/about/service-head_bg.png)no-repeat center top;
    color: #fff;
    padding: 29px 92px 117px 90px;
    width: 1104px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 -40px;
    -webkit-box-shadow: 0px 0px 20px 0px rgba(7, 1, 3, 0.1);
    box-shadow: 0px 0px 20px 0px rgba(7, 1, 3, 0.1);
    position: relative;
  }

  .service-head::before {
    content: "";
    width: 476px;
    height: 250px;
    background: url(/resources/firstTimePage/img/about/service_logo.png);
    position: absolute;
    top: -100px;
    right: -130px;
  }

  .service-head::after {
    content: "";
    width: 100%;
    height: 100%;
    background: #dc1e37;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
  }

  .service-head.animate::after {
    -webkit-transition: .5s ease;
    transition: .5s ease;
    width: 0;
  }

  .service-ttl span.main {
    margin: 30px 0 20px;
  }

  .service-row {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 80px 4% 70px;
  }

  .service-box {
    padding: 42px 4% 15px;
    margin: 20px 0;
    position: relative;
  }

  .service-box.is-even {
    background-position: right 37% top;
  }

  .service-data__img {
    position: relative;
  }

  .service-data__img .is-child:not(.is-01) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  .service-box.is-01 {
    background: url(/resources/firstTimePage/img/about/function01_sp_bg.png)no-repeat left top /400px;
    margin: 0 0 -4px;
  }

  .service-box.is-01 .service-data__img {
    position: relative;
    left: 0px;
  }

  .service-box.is-02 {
    background: url(/resources/firstTimePage/img/about/function02_sp_bg.png)no-repeat left top /400px;
    padding: 42px 4% 0;
  }

  .service-box.is-02 .service-data__img {
    height: 200px;
    left: 0;
    right: 0;
    -webkit-transform-origin: left center;
    transform-origin: left center;
    margin: 0 auto;
    width: auto;
  }

  .service-box.is-03 {
    background: url(/resources/firstTimePage/img/about/function03_sp_bg.png)no-repeat left top /400px;
    padding: 42px 4% 0;
  }

  .service-box.is-03 .service-data__img {
    height: 200px;
    left: 0;
    right: 0;
    -webkit-transform-origin: left center;
    transform-origin: left center;
    margin: 20px auto 0;
    width: auto;
  }

  .service-box.is-06 {
    background: url(/resources/firstTimePage/img/about/function06_sp_bg.png)no-repeat left top /400px;
    margin: 0 0 -20px;
  }

  /* .service-box.is-06 .service-data__img {
    width: 291px;
    height: 200px;
    text-align: center;
    max-width: none;
  } */
  .service-box.is-05 {
    background: url(/resources/firstTimePage/img/about/function05_sp_bg.png)no-repeat left top /400px;
    margin: 0 0 30px;
  }

  .service-box.is-05 .service-data__img {
    width: 80%;
  }

  .service-box.is-04 {
    background: url(/resources/firstTimePage/img/about/function04_sp_bg.png)no-repeat left top /400px;
    margin: 0 0 50px;
  }

  .service-box.is-04 .service-data__wrap {
    width: auto;
  }

  .service-box.is-04 .service-data__img {
    width: 84%;
  }

  .service-box.is-04 .service-data__txt {
    max-width: none;
  }

  .service-box.is-09 {
    background: url(/resources/firstTimePage/img/about/function09_sp_bg.png)no-repeat left top /400px;
    margin: 0 0 24px;
  }

  .service-box.is-09 .service-data__img {
    width: 80%;
    margin-right: -2%;
  }

  .service-box.is-06 {
    background: url(/resources/firstTimePage/img/about/function06_sp_bg.png)no-repeat left top /400px;
  }

  .service-box.is-06 .service-data__img {
    width: 80%;
  }

  .service-box.is-02 .is-child {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
  }

  .service-box.is-02 .is-child img {
    min-width: 421px;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    -webkit-transform-origin: left top;
    transform-origin: left top;
  }

  .service-box.is-03 .is-child.is-02 {
    top: 48px;
    left: 68px;
    width: 59px;
  }

  .service-box.is-03 .is-child.is-03 {
    top: 95px;
    left: 29px;
    width: 71px;
  }

  .service-box.is-04 .service-data__img {
    top: 15px;
    left: 15px;
  }

  .service-box.is-04 .is-child.is-02 {
    top: 41px;
    right: 76px;
    left: auto;
    width: 30px;
  }

  .service-box.is-04 .is-child.is-03 {
    top: 48px;
    left: auto;
    right: 46px;
    width: 34px;
  }

  .service-box.is-04 .is-child.is-04 {
    top: 84px;
    left: auto;
    right: 91px;
    width: 48px;
  }

  .service-box.is-04 .is-child.is-05 {
    top: 94px;
    left: auto;
    right: 66px;
    width: 25px;
  }

  .service-box.is-04 .is-child.is-06 {
    top: 0;
    left: auto;
    right: 18px;
    width: 184px;
  }

  .service-box.is-04 .is-child.is-07 {
    top: 73px;
    left: 0px;
    width: 112px;
  }

  .service-box.is-04 .is-child.is-08 {
    top: 47px;
    left: 6px;
    width: 34px;
  }

  .service-box.is-04 .is-child.is-09 {
    top: 38px;
    left: 39px;
    width: 43px;
  }

  .service-box.is-05 .is-child:not(.is-01) {
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
  }

  .service-box.is-06 .is-child.is-02 {
    opacity: 0;
    -webkit-transition: .5s ease;
    transition: .5s ease;
  }

  .service-box.is-06 .is-child.is-02 {
    opacity: 0;
    -webkit-transition: .5s ease;
    transition: .5s ease;
  }

  .service-box.is-06.animate .is-child.is-02 {
    opacity: 1;
    -webkit-transition-delay: .5s;
    transition-delay: .5s;
  }

  .service-box.is-even .service-box__inr {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }

  .service-data__wrap {
    width: 100%;
  }

  .service-box__ttl {
    font-size: 2.8rem;
    color: #fff;
    padding: 16px 0 8px;
    font-weight: 100;
    letter-spacing: 1px;
    color: #19aafe;
    line-height: 1.1;
  }






  .service-data {
    position: relative;
  }

  .service-data__ttl {
    color: #fff;
    font-size: 1.45rem;
    font-weight: 200;
    padding: 3px 0;
    letter-spacing: 1.5px;
  }

  .service-data__txt {
    font-size: 1.35rem;
    padding: 7px 0 0;
    letter-spacing: -0.3px;
    font-weight: 200;
    line-height: 1.9;
    color: #fff;
    max-width: 480px;
  }

  .service-data__txt span {
    display: block;
    font-size: 1.4rem;
  }

  .service-data__img {
    text-align: center;
    position: relative;
    width: auto;
    -webkit-transition: opacity 1s ease .5s;
    transition: opacity 1s ease .5s;
    margin: 20px auto 0;
    width: 72%;
    max-width: 290px;
  }

  .service-box.animate .service-data__img {
    opacity: 1;
  }

  /*--------------------------
  after-service
  ---------------------------*/
  .after-service {
    padding: 0 0 60px;
    margin: 70px 0 0;
    /* overflow: hidden; */
    position: relative;
  }

  #canvas-container {
    position: relative;
    top: 0;
    margin: 0 0 100px;
    z-index: -5;
    opacity: 1;
    width: 100%;
    opacity: 0;
    -webkit-transition: .5s ease;
    transition: .5s ease;
  }

  .content.after #canvas-container {
    opacity: 1;
  }

  #canvas-container::after {
    content: "";
    position: absolute;
    top: 77.6%;
    left: 0;
    width: 100%;
    height: 600px;
    -webkit-transition: ease;
    transition: ease;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #28282d94), color-stop(95%, #050c1e));
    background: linear-gradient(#28282d94 10%, #050c1e 95%);
  }

  .content.after #canvas-container::after {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #28282d94), color-stop(95%, #25262a));
    background: linear-gradient(#28282d94 10%, #25262a 95%);
  }

  #canvas-container canvas {
    width: 100%;
    max-height: 300px;
  }

  .after-service_bg {
    position: absolute;
    top: -700px;
    left: 0;
    right: 0;
    width: 100%;
    -webkit-transition: .2s ease;
    transition: .2s ease;
  }

  /* .after-service_bg img {
  max-width: 200%;
} */
  .after-service-content {
    padding: 0;
    margin: 0 auto;
  }

  .after-service-head {
    padding: 25px 0 0;
    text-align: center;
  }

  .after-service-ttl {
    color: #fff;
    font-size: 5.4rem;
    text-align: center;
  }

  .after-service-ttl span.main {
    margin: 34px 0 9px;
    text-align: center;
  }

  .after-service-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin: 0 0 0;
    padding: 0 2%;
  }

  .after-service-box {
    max-width: 480px;
    width: 100%;
    margin: 0 auto 30px;
    padding: 100px 0 0;
    -webkit-transition: all .5s;
    transition: all .5s;
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
    -webkit-box-shadow: 7.071px 7.071px 19.95px 1.05px rgba(0, 0, 0, 0.38);
    box-shadow: 7.071px 7.071px 19.95px 1.05px rgba(0, 0, 0, 0.38);
  }

  .after-service-box::before {
    content: "";
    width: calc(100% + 10px);
    height: 100%;
    position: absolute;
    top: 0;
    left: -10px;
  }

  .after-service-box.is-01::before {
    background: url(/resources/firstTimePage/img/about/after-service-box01.png)no-repeat left top /cover, url(/resources/firstTimePage/img/about/after-service-box01_hover.png)no-repeat left top /cover;
  }

  .after-service-box.is-02::before {
    background: url(/resources/firstTimePage/img/about/after-service-box02.png)no-repeat left top /cover, url(/resources/firstTimePage/img/about/after-service-box02_hover.png)no-repeat left top /cover;
  }

  .after-service-box.is-03::before {
    background: url(/resources/firstTimePage/img/about/after-service-box03.png)no-repeat left top /cover, url(/resources/firstTimePage/img/about/after-service-box03_hover.png)no-repeat left top /cover;
  }

  .after-service-box.is-04::before {
    background: url(/resources/firstTimePage/img/about/after-service-box04.png)no-repeat left top /cover, url(/resources/firstTimePage/img/about/after-service-box04_hover.png)no-repeat left top /cover;
  }

  .after-service-box.is-05::before {
    background: url(/resources/firstTimePage/img/about/after-service-box05.png)no-repeat left top /cover, url(/resources/firstTimePage/img/about/after-service-box05_hover.png)no-repeat left top /cover;
  }

  .after-service-box.is-06::before {
    background: url(/resources/firstTimePage/img/about/after-service-box06.png)no-repeat left top /cover, url(/resources/firstTimePage/img/about/after-service-box06_hover.png)no-repeat left top /cover;
  }

  .after-service-box__img {
    position: relative;
  }

  .after-service-box__img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/resources/firstTimePage/img/about/as-img_on.png)repeat 0 0 /2px;
  }

  .after-service-box__ttl {
    font-size: 2rem;
    color: #fff;
    font-weight: 600;
    margin: 9px 0 10px;
    padding: 0 4%;
    position: relative;
  }

  .after-service-box__detail {
    background: hsla(217, 72%, 8%, 0.8);
    padding: 10px 4% 11px;
    position: relative;
    height: 132px;
  }

  .after-service-box__txt {
    font-size: 1.35rem;
    line-height: 1.82;
    letter-spacing: 0.2px;
    color: #fff;
    font-weight: 200;
  }

  .after-service-box__link {
    text-align: left;
    margin: 9px 0 0;
    display: inline-block;
  }

  .after-service-box__link span {
    border: #19aafe 1px solid;
    font-size: 1.3rem;
    color: #fff;
    padding: 4px 43px 4px 21px;
    border-radius: 20px;
    position: relative;
    font-weight: 100;
    letter-spacing: 1px;
  }

  .after-service-box__link span:after {
    content: "";
    position: absolute;
    top: calc(50% - 4px);
    right: 11px;
    width: 20px;
    height: 4px;
    background: url(/resources/firstTimePage/img/about/after-service_arrow.png)no-repeat left top /cover;
  }

  .after-logo {
    position: absolute;
    top: -88px;
    left: 385px;
    z-index: 2;
  }

  .after-logo__img {
    position: relative;
    overflow: hidden;
  }

  .after-logo__img::before {
    content: "";
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    position: absolute;
    top: -10px;
    left: -10px;
    border: 10px solid #dc1e37;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    z-index: 5;
  }

  .after-logo__mask {
    position: relative;
    z-index: 10;
  }

  .after-logo__layer {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: translate(-290px, -130px);
    transform: translate(-290px, -130px);
  }

  .after-logo.animate .after-logo__layer {
    -webkit-transition: 1.5s ease;
    transition: 1.5s ease;
    -webkit-transform: translate(-220px, -130px);
    transform: translate(-220px, -130px);
  }

  .fadeout {
    opacity: 0;
    -webkit-transition: .5s ease;
    transition: .5s ease;
  }


  /*--------------------------
  function compare
  ---------------------------*/
  .function__ttl {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    font-weight: 400;
    font-size: 24px;
    letter-spacing: 0.04em;
    line-height: 2;
    text-align: center;
    color: #fff;
    margin-top: 60px;
    margin-bottom: 30px;
  }

  .function__ttl::before,
  .function__ttl::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background-color: #fff;
  }

  .function__table {
    width: 100%;
    padding-bottom: 20px;
    overflow-x: auto;
  }

  .function__table table {
    width: 1024px;
  }

  .function__table thead th:first-child {
    border-top: none;
    border-left: none;
    width: 52.24%;
    background-color: transparent;
  }

  .function__table thead th:not(:first-child) {
    width: 20.50%;
  }

  .function__table tr:last-child th,
  .function__table tr:last-child td {
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }

  .function__table th:last-child,
  .function__table td:last-child {
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }

  .function__table .data th:first-child {
    width: 113px;
    border-bottom: 1px solid #ddd;
  }

  .function__table th.is-border-b {
    border-bottom: 1px solid #ddd;
  }

  .function__table .data th:nth-child(2) {
    width: 15.625%;
  }

  .function__table .data th:nth-child(3) {
    width: auto;
  }

  .function__table th,
  .function__table td {
    font-size: 1.6rem;
    letter-spacing: 0.02em;
    line-height: 1.25;
    text-align: center;
    color: #fff;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    padding: 10px;
    vertical-align: middle;
  }

  .function__table th img,
  .function__table td img {
    vertical-align: middle;
  }

  .function__table th .is-small,
  .function__table td .is-small {
    font-size: 1.2rem;
  }

  .function__table th {
    background-color: #00204B;
  }

  .function__table th.text-left {
    text-align: left;
    padding-left: 16px;
  }

  .function__table td.is-bg {
    background-color: #1A51AF;
  }

  .function__table-note {
    width: 1024px;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.78;
    color: #fff;
    margin-top: 24px;
  }


  .side-nav {
    position: fixed;
    left: 0;
    bottom: 0;
    -webkit-transition: opacity .45s, -webkit-transform .45s;
    transition: opacity .45s, -webkit-transform .45s;
    transition: transform .45s, opacity .45s;
    transition: transform .45s, opacity .45s, -webkit-transform .45s;
    z-index: 101;
    width: 100%;
    opacity: 0;
  }

  .side-nav,
  .side-nav * {
    box-sizing: border-box;
  }

  .side-nav.show {
    opacity: 1;
    visibility: visible;
  }

  .side-nav.show.bottom {
    visibility: hidden;
    opacity: 0;
  }

  .side-nav__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
  }

  .side-nav__item {
    width: calc(100% / 2);
    border-left: 1px solid #707070;
    background: #111;
  }

  .side-nav__item.is-01 {
    width: calc(100% / 2);
    border-bottom: 1px solid #707070;
  }

  .side-nav__item.is-02 {
    width: calc(100% / 2);
    border-bottom: 1px solid #707070;
  }

  .side-nav__item.is-05 {
    border-left: none;
  }

  .side-nav__item:first-child {
    border-left: none;
  }

  .side-nav__item.is-06 {
    border-left: none;
    border-bottom: 1px solid #707070;
  }

  .side-nav__item a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    background: #111111;
    font-size: 1.1rem;
    font-weight: 200;
    line-height: 1.2;
    text-align: center;
    padding: 12px 4% 10px;
    color: #fff;
    -webkit-transition: .45s;
    transition: .45s;
  }

  .side-nav__item a .txt {
    text-align: left;
    margin-left: 7px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .side-nav__item a .txt span {
    display: inline-block;
  }

  .side-nav__item a::before {
    content: "";
    width: 30px;
    height: 27px;
    display: block;
    /* left: 0; */
    /* right: 0; */
    /* margin: 0 auto; */
    /* top: 10px; */
    /* -webkit-transition: .45s; */
    /* transition: .45s; */
  }

  .side-nav__item.is-01 a::before {
    background: url(/resources/firstTimePage/img/about/side-nav_icon01.png)no-repeat center /contain;
  }

  .side-nav__item.is-02 a::before {
    background: url(/resources/firstTimePage/img/about/side-nav_icon02.png)no-repeat center /contain;
  }

  .side-nav__item.is-03 a::before {
    background: url(/resources/firstTimePage/img/about/side-nav_icon03.png)no-repeat center /contain;
  }

  .side-nav__item.is-04 a::before {
    background: url(/resources/firstTimePage/img/about/side-nav_icon04.png)no-repeat center /contain;
  }

  .side-nav__item.is-05 a::before {
    background: url(/resources/firstTimePage/img/about/side-nav_icon05.png)no-repeat center /contain;
  }

  .side-nav__item.is-06 a::before {
    background: url(/resources/firstTimePage/img/about/side-nav_icon06.png)no-repeat center /contain;
  }

  /*--------------------------
  lbox
  ---------------------------*/

  .lbox {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 200;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .lbox .lbox-inr {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .lbox .lbox-inr iframe {
    width: 100%;
    height: 100%;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
  }

  .lbox .close {
    position: absolute;
    right: 5px;
    top: 10px;
    width: 35px;
    height: 35px;
  }

  .lbox .close::before,
  .lbox .close::after {
    content: '';
    display: block;
    width: 3px;
    height: 100%;
    background: #196ffe;
    position: absolute;
    top: 0;
    left: 50%;
  }

  .lbox .close::before {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }

  .lbox .close::after {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }

  .lbox .close:hover {
    cursor: pointer;
  }

  .lbox .clickable {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    opacity: .3;
    display: none;
  }

  .lbox .lbox-inr [id^="box"] {
    /* height: 100%; */
    width: 92%;
    max-width: 880px;
    max-height: 82vh;
    text-align: left;
    position: relative;
    margin: 0 auto;
    /* z-index: 0; */
    overflow: hidden;
    border-radius: 10px;
    z-index: 100;
    display: none;
  }

  .lcont {
    padding: 40px 0;
    text-align: center;
  }

  .lcont p {
    padding-top: 56.25%;
    position: relative;
    height: 0;
  }

  .lcont p::-webkit-scrollbar {
    height: 5px;
    width: 5px;
  }

  .lcont p::-webkit-scrollbar-track {
    background: #fff;
  }

  .lcont p::-webkit-scrollbar-thumb {
    background: #cccccc;
    border-radius: 10px;
  }

  .lcont p img {
    max-width: 629px;
    /* width: 150%; */
  }

  /*--------------------------
  deployment
  ---------------------------*/
  .deployment {
    color: #fff;
    background: #dc1e37;
    padding: 40px 0 35px;
  }

  .deployment__ttl {
    font-size: 2.2rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
  }

  .deployment__txt {
    font-size: 1.4rem;
    /* text-align: center; */
    font-weight: 200;
    line-height: 1.8;
    margin: 18px 0 54px;
  }

  .deployment-box {
    background: #fff;
    border-radius: 8px;
    max-width: 940px;
    margin: 0 auto;
    padding: 0 4% 24px;
    box-sizing: border-box;
  }

  .deployment-box__img {
    /* width: 44.5%; */
    text-align: center;
  }

  .deployment-box__img span {
    background: #dc1e37;
    display: block;
    max-width: 335px;
    margin: 0 auto 4px;
    padding: 21px 4% 21px 4%;
    border-radius: 8px;
    text-align: left;
    box-sizing: border-box;
    position: relative;
    top: -30px;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.05);
    text-align: center;
  }

  .deployment-box__img span::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 22px 0px 0 19px;
    border-color: #dc1e37 transparent transparent transparent;
    position: absolute;
    bottom: -21px;
    left: 118px;
    z-index: 2;
  }

  .deployment-box__img span::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 23px 0px 0 25px;
    border-color: rgba(0, 0, 0, 0.07) transparent transparent transparent;
    position: absolute;
    bottom: -23px;
    left: 114px;
    z-index: 0;
  }

  .deployment-box__img img {
    /* display: block; */
    /* margin: 0 auto; */
    /* margin: 0 0 0 -8px; */
    width: 45%;
    max-width: 159px;
  }

  .deployment-col {
    color: #dc1e37;
    /* width: calc(100% - 44.5%); */
    padding: 10px 0 0;
    margin-bottom: 20px;
    box-sizing: border-box;
  }

  .deployment-box__ttl {
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: -4.1px;
    border-bottom: 1px solid #dc1e37;
    padding: 0 0 5px;
  }

  .deployment-box__txt-wrap {

    font-weight: 300;
    color: #000;
  }

  .deployment-list-wrap {
    margin: 25px 0 15px 0;
    font-size: 1.4rem;
  }

  .deployment-list {
    line-height: 1.5;
    /* letter-spacing: -0.4px; */
    display: flex;
  }

  .deployment-list span {
    display: inline-block;
  }

  .deployment-box__txt {
    line-height: 1.6;
    font-size: 1.35rem;
  }

  .deployment-box__txt .solution-txt__link {
    margin: 15px 0 0;
    display: block;
  }

  .application {
    padding: 60px 0 80px;
  }

  .application .type-text {
    text-align: left;
  }

  .application-ttl {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 2.4rem;
    font-weight: 400;
    color: #ffffff;
    margin-top: 34px;
    margin-bottom: 36px;
  }

  .application-ttl .icon {
    display: flex;
  }

  .application-row {
    margin: 20px 0 0;
  }

  .application-row+.application-row {
    margin: 60px 0 0;
  }

  .application-txt {
    margin: 0 0 20px;
  }

  .application-col-btn a {
    display: inline-grid;
    place-content: center;
    width: 200px;
    height: 48px;
    font-size: 1.4rem;
    text-align: center;
    color: #fff;
    background-color: #090080;
    border: 1px solid #196ffe;
    position: relative;
  }

  .application-col-btn a::after {
    content: '';
    display: block;
    width: 10px;
    aspect-ratio: 1/1;
    background-color: #196ffe;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    position: absolute;
    top: 50%;
    right: 15px;
    translate: 0 -50%;
  }

  .application-btn-wrap {
    margin: 6px 0 0;
  }

  .application-btn a {
    display: block;
    width: 80%;
    /* max-width: 317px; */
    margin: 40px auto 0;
    position: relative;
  }

  /* .application-btn .main {
    position: absolute;
    top: 0;
    left: 0;
  } */
  .application-btn .shadow {
    display: none;
  }

  .application-flow-container {
    background-color: #f6f7f9;
    border-radius: 12px;
    margin: 100px 0 0;
    padding: 30px 4%;
  }

  .application-flow-ttl {
    font-size: 2.4rem;
    color: #808080;
    text-align: center;
    border-bottom: 1px solid #808080;
    padding-bottom: 10px;
    margin-bottom: 30px;
  }

  .application-flow {
    align-items: flex-start;
    margin: 50px 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .application-flow__list {
    width: 44%;
    /* padding: 0 50px; */
    text-align: center;
    padding: 0 0 35px;
    position: relative;
  }

  .application-flow__list::after {
    content: "";
    width: 37px;
    height: 31px;
    background: url(/resources/firstTimePage/img/about/arrow.png)no-repeat 0 0 /contain;
    position: absolute;
    right: -17.5%;
    top: 110px;
  }

  .application-flow__list:first-child .application-flow__ttl span.tall {
    height: 36px;
  }

  .application-flow__txt {
    font-size: 1.25rem;
    color: #313131;
    text-align: left;
    line-height: 1.4;
    font-weight: 200;
    padding: 10px 0;
  }

  .application-flow__txt.is-gray {
    color: #999;
  }

  .application-flow__txt.is-red .caution {
    color: #dc1e37;
    font-weight: 400;
    margin: -10px 0 0;
  }

  .application-flow__txt span {
    display: block;
    font-size: 1.3rem;
    font-weight: 500;
    /* height: 36px; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 0 4px;
    line-height: 1.4;
  }

  .application-flow__txt span.caution {
    display: block;
    font-size: 1.2rem;
    margin: 8px 0;
    padding: 0;
    line-height: 1.4;
    font-weight: 200;
  }

  .application-link a {
    display: block;
    color: #808080;
    border: 1px solid #808080;
    padding: 10px 0;
    border-radius: 35px;
    text-align: center;
    max-width: 240px;
    width: 100%;
    font-size: 1.5rem;
    letter-spacing: 0.3px;
    font-weight: 600;
    position: relative;
    margin: 20px auto 0;
  }

  .application-link a:after {
    content: "";
    position: absolute;
    top: calc(50% - 6px);
    right: 10%;
    width: 10px;
    height: 10px;
    border-top: 1px solid #808080;
    border-right: 1px solid #808080;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: .5s ease;
  }

  .about-footer {
    background: #4d4d4d;
  }

  .about-footer .about-footer__ttl {
    background: #dc1e37;
    padding: 18px 0 7px;
  }

  .about-footer span {
    display: block;
    max-width: 1020px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .about-footer .about-footer__content {
    color: #ccc;
    padding: 30px 0 20px;
  }

  .about-footer__row {
    margin: 0 0 80px;
  }

  .about-footer__btn a {
    display: block;
    color: #ccc;
    border: 1px solid #ccc;
    padding: 10px 0;
    border-radius: 35px;
    text-align: center;
    max-width: 240px;
    width: 80%;
    font-size: 1.5rem;
    letter-spacing: 0.3px;
    font-weight: 600;
    margin: 0 auto 15px;
    position: relative;
  }

  .about-footer__btn a:after {
    content: "";
    position: absolute;
    top: calc(50% - 6px);
    right: 10%;
    width: 10px;
    height: 10px;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: .5s ease;
  }

  .about-footer__txt {
    font-weight: 300;
    /* width: 45%; */
    line-height: 1.5;
    margin: 0 0 25px;
    font-size: 1.3rem;
  }

  .about-footer__logo {
    text-align: center;
    font-weight: 100;
    font-size: 1.3rem;
  }

  /*ライトボックス*/
  .lbox {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.7);
    z-index: 200;
    justify-content: center;
    align-items: center;
  }

  .lbox .lbox-inr {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .lbox .lbox-inr iframe {
    width: 100%;
    height: 100%;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
  }

  .lbox .close {
    position: absolute;
    right: 5px;
    top: 13px;
    width: 15px;
    height: 15px;
  }

  .lbox .close::before,
  .lbox .close::after {
    content: '';
    display: block;
    width: 3px;
    height: 100%;
    background: #dc1e37;
    position: absolute;
    top: 0;
    left: 50%;
  }

  .lbox .close::before {
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }

  .lbox .close::after {
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }

  .lbox .close:hover {
    cursor: pointer;
  }

  .lbox .clickable {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    opacity: .3;
    display: none;
  }

  .lbox .lbox-inr [id^="box"] {
    /* height: 100%; */
    width: 92%;
    max-width: 880px;
    max-height: 82vh;
    text-align: left;
    position: relative;
    margin: 0 auto;
    /* z-index: 0; */
    overflow: hidden;
    border-radius: 10px;
    z-index: 100;
    display: none;
  }

  .lcont {
    padding: 40px 0;
    text-align: center;
  }

  .lcont p {
    padding-top: 56.25%;
    position: relative;
    height: 0;
  }

  .lcont p::-webkit-scrollbar {
    height: 5px;
    width: 5px;
  }

  .lcont p::-webkit-scrollbar-track {
    background: #fff;
  }

  .lcont p::-webkit-scrollbar-thumb {
    background: #cccccc;
    border-radius: 10px;
  }

  .lcont p img {
    max-width: 629px;
    /* width: 150%; */
  }

  #box05 .lcont p img {
    width: 110%;
  }

  .scroll {
    display: none;
  }
}

@media screen and (max-width:481px) {
  .application-flow {
    display: block;
  }

  .application-flow__list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 0 0 55px;
  }

  .application-flow__list:nth-child(4) {
    padding: 0 0 100px;
  }

  .application-flow__list::after {
    content: "";
    width: 37px;
    height: 31px;
    background: url(/resources/firstTimePage/img/about/arrow.png)no-repeat 0 0 /contain;
    position: absolute;
    right: 0;
    left: 0px;
    margin: 0 auto;
    bottom: 13px;
    top: auto;
    transform: rotate(90deg);
  }

  .application-flow__list:nth-child(2n)::after {
    content: "";
  }

  .application-flow__list:last-child {
    padding: 0;
  }

  .application-flow__list:last-child::after {
    content: none;
  }

  .application-flow__ttl {
    width: 45%;
    text-align: center;
    padding: 10px 0;
  }

  .application-flow__txt {
    width: 49%;
    font-size: 1.25rem;
  }

  .application-flow__txt.is-gray {
    color: #999;
  }

  .application-flow__txt.is-red {
    position: absolute;
    bottom: 50px;
    right: 0;
  }

  .application-flow__txt.is-red .caution {
    color: #dc1e37;
    font-weight: 400;

    margin: 0;
  }

  .application-flow__txt span {
    padding: 0 0 6px;
    justify-content: flex-start;
  }
}

@media screen and (min-width:481px) and (max-width:930px) {

  .application-flow__list:nth-child(2n)::after,
  .application-flow__list:nth-child(5)::after {
    content: none;
  }
}

@media screen and (min-width:931px) {

  .application-flow__list:nth-child(3)::after,
  .application-flow__list:nth-child(5)::after {
    content: none;
  }
}

@media screen and (min-width:481px) and (max-width:767px) {
  .application-flow__list::after {
    width: 30px;
    height: 26px;
    right: -19%;
    top: 130px;
  }
}

@media screen and (min-width: 768px) {
  #wrap {
    opacity: 0;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
  }

  .section-wrap {
    /* background: #050c1e; */
  }

  .js-fade {
    opacity: 1;
    -webkit-transition: .5s ease;
    transition: .5s ease;
  }

  .js-fade.animate {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  #wrap.js-animate {
    opacity: 1;
  }

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

  .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }

  .content {
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 0;
  }

  .content-inr {
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
    font-size: 1.6rem;
    position: relative;
    z-index: 5;
    padding: 0 4%;
    box-sizing: border-box;
  }

  /*--------------------------
  parallax
  ---------------------------*/
  .fixed-bg {
    background: #050c1e;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-transition: background 1s ease;
    transition: background 1s ease;
  }

  .content.after .fixed-bg {
    background: #25262a;
  }

  .content.after.video .fixed-bg {
    background: #111112;
  }

  .content.after .fixed-bg #particles-left2,
  .content.after .fixed-bg #particles-right2 {
    opacity: 0;
  }

  #particles-left2 {
    width: 25%;
    height: 100vh;
    margin: 0;
    margin-left: -5%;
    -webkit-transition: opacity 1s ease;
    transition: opacity 1s ease;
    display: none;
  }

  #particles-right2 {
    width: 25%;
    height: 100vh;
    margin: 0 auto;
    position: absolute;
    right: -5%;
    top: 0;
    -webkit-transition: opacity 1s ease;
    transition: opacity 1s ease;
    display: none;
  }

  .plus-box {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    transform: matrix(1, 0, 0, 1, 0, 0);
  }

  /*--------------------------
  sec-ttl
  ---------------------------*/
  #fade-text {
    font-family: 'Slabo 27px', Helvetica, Arial, sans-serif;
    font-size: .5em;
  }

  svg {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .animate .sec-box {
    opacity: 1;
  }

  .sec-ttl {
    font-size: 6rem;
    line-height: 1.28;
    font-weight: 600;
    opacity: 1;
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
    word-break: normal;
    word-wrap: normal;
    text-align: center;
  }

  .sec-ttl span {
    display: block;
    position: relative;
  }

  .sec-ttl span.lead {
    font-size: 5.5rem;
    font-weight: 100;
    color: #19aafe;
    margin: 55px 0 29px;
    text-shadow: 0px 0px 30px #007eff, 0px 0px 30px #007eff;
  }

  .sec-ttl span.lead strong {
    font-weight: 300;
    text-shadow: 0px 0px 5px #007eff, 0px 0px 10px #007eff;
  }

  .sec-ttl .main {
    display: block;
    font-size: 3rem;
    font-weight: 200;
    position: relative;
    margin: 46px 0 28px;
    color: #fff;
  }

  .sec-ttl.animate b::after {
    -webkit-transition-delay: .3s;
    transition-delay: .3s;
  }

  .sec-ttl span {
    display: block;
    font-size: 3rem;
    font-weight: 200;
  }

  .sec-txt {
    line-height: 1.5;
    margin: 0 0 26px;
    color: #ffffff;
    font-size: 1.4rem;
    line-height: 2.4;
    letter-spacing: 0.1px;
    font-weight: 200;
  }

  .sec-txt.text-center {
    text-align: center;
  }

  /*--------------------------
  type-text
  ---------------------------*/
  .type-text {
    color: #196ffe;
    overflow: hidden;
    font-size: 1.7rem;
    font-weight: 400;
    letter-spacing: 2px;
    text-align: center;
  }

  .type-text::after {
    content: '';
    margin: 0 0 0 3px;
    border-right: 1px solid #196ffe;
  }

  .type-text span {
    font-size: 1.7rem;
    font-weight: 400;
    display: none;
  }

  /*--------------------------
  fv
  ---------------------------*/
  .fv {
    position: relative;
  }

  .fv__ttl {
    position: absolute;
    top: 35%;
    right: 15.5%;
    z-index: +1;
    width: 34%;
  }

  .fv__lead {
    position: absolute;
    top: 3.6%;
    right: 5%;
    font-size: clamp(1.2rem, 1vw, 1.8rem);
    color: #FFF;
  }

  .fv__txt {
    font-size: clamp(1rem, 0.9vw, 1.8rem);
    color: #000;
    letter-spacing: 0.08em;
    font-weight: 600;
    padding: 4px 0;
    text-align: center;
    background: #FFF;
    margin-top: 15px;
  }

  /*--------------------------
  approach
  ---------------------------*/
  .approach {
    position: relative;
    background: url(/resources/firstTimePage/img/about/approach_bg1.jpg) no-repeat center bottom/auto 100%, -webkit-gradient(linear, left top, right top, from(rgb(10, 18, 37)), to(rgb(2, 8, 28)));
    background: url(/resources/firstTimePage/img/about/approach_bg1.jpg) no-repeat center bottom/auto 100%, linear-gradient(90deg, rgb(10, 18, 37) 0%, rgb(2, 8, 28) 100%);
    padding: 120px 0 550px;
  }

  .approach::after {
    content: "";
    width: 50%;
    height: 100%;
    background: url(/resources/firstTimePage/img/about/approach_bg2.png) no-repeat left top 19.2%/auto;
    position: absolute;
    top: 0;
    right: 0;
    z-index: +2;
    visibility: visible;
  }

  .approach-box {
    max-width: 67%;
  }

  .approach .content-inr {
    max-width: 1233px;
  }

  .approach-box .type-text {
    text-align: left;
    letter-spacing: 2.78px;
  }

  .approach-ttl .main {
    margin: 24px 0 16px;
    text-align: left;
    letter-spacing: 1.3px;
  }

  .approach-txt {
    line-height: 2.1;
  }

  /*--------------------------
  applicable
  ---------------------------*/
  .applicable {
    padding: 100px 0 0;
  }

  .applicable-txt {
    text-align: center;
    margin-bottom: 40px;
  }

  .applicable-box {
    max-width: 600px;
    margin-inline: auto;
  }

  .applicable-table {
    width: 100%;
    color: #fefefe;
    border: 1px solid #fff;
  }
  .applicable-table th,
  .applicable-table td {
    font-weight: 200;
    font-size: 1.8rem;
    line-height: 1.5;
    padding: 0px 10px;
    text-align: center;
  }

  .applicable-table th {
    font-size: 1.6rem;
    padding: 8px 10px;
    background-color: #01204b;
    border: 1px solid #fff;
  }

  .applicable-table th:first-child {
    width: 67%;
  }

  .applicable-table tbody tr:first-child td {
    padding-top: 8px;
  }
  .applicable-table tbody tr:last-child td {
    padding-bottom: 16px;
  }
  .applicable-table td:first-child {
    padding-left: 36px;
  }
  .applicable-table td:nth-child(2) {
    padding-right: 36px;
  }
  .applicable-table td:last-child {
    border-left: 1px solid #fff;
  }
  .applicable-note {
    font-size: 1.4rem;
    color: #b0b0b0;
    margin-top: 8px;
  }

  /*--------------------------
  role
  ---------------------------*/
  .role {
    padding: 80px 0 120px;
  }

  .role-txt {
    text-align: center;
    margin-bottom: 40px;
  }

  .role-box {
    display: grid;
    justify-content: center;
  }


  /*--------------------------
  introduction
  ---------------------------*/
  .mv__video {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    min-width: 100vw;
    min-height: 100vh;
    background: url(/resources/firstTimePage/img/about/bg_mv.jpg) no-repeat 50% 50%/cover;
    opacity: 0;
    -webkit-transition: 2s opacity .8s;
    transition: 2s opacity .8s;
  }

  .animate .mv__video {
    opacity: 1;
    /* display: none; */
  }

  .introduction {
    color: #fff;
    padding: 94px 0 118px;
    position: relative;
    overflow: hidden;
    background: #050c1e;
    z-index: 55;
  }

  .introduction-box {
    padding: 2px 0 50px 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
  }

  .introduction a {
    display: block;
  }

  .introduction a:hover {
    text-decoration: none;
  }

  .introduction-box::before {
    content: "";
    width: 300px;
    height: 300px;
    background: url(/resources/firstTimePage/img/about/introduction_play.png)no-repeat;
    position: absolute;
    bottom: 11px;
    right: 113px;
    -webkit-transition: background .5s ease, opacity .5s ease 1s;
    transition: background .5s ease, opacity .5s ease 1s;
  }

  .animate .introduction-box::before {
    opacity: 1;
  }

  .introduction a:hover .introduction-box::before {
    background: url(/resources/firstTimePage/img/about/introduction_play_hover.png)no-repeat;
  }

  .introduction-ttl span.lead {
    text-align: left;
    margin: 88px 0 56px -4px;
    letter-spacing: 1.5px;
  }

  .introduction-ttl .main {
    text-align: left;
  }

  .introduction-txt {}

  .introduction-link {
    margin: 32px 0 0;
    display: block;
  }

  .introduction-link a {
    display: block;
    color: #cb2138;
    border: 1px solid #ffffff;
    padding: 10px 0;
    border-radius: 8px;
    text-align: center;
    max-width: 210px;
    width: 80%;
    font-size: 1.5rem;
    letter-spacing: 0.3px;
    font-weight: 600;
    margin: 0 0 15px;
    position: relative;
    background: #fff;
  }

  .introduction-link a:after {
    content: "";
    position: absolute;
    top: calc(50% - 6px);
    right: 22px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #cb2138;
    border-right: 2px solid #cb2138;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: .3s ease;
    transition: .3s ease;
  }

  .introduction-link a:hover {
    text-decoration: none;
  }

  .introduction-link a:hover {
    opacity: 1;
    background: #ffffff00;
    color: #ffffff;
  }

  .introduction-link a:hover::after {
    opacity: 1;
    right: 17px;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
  }

  .introduction-signal {
    width: 1000px;
    height: 100%;
    position: absolute;
    top: 0;
    left: -270px;
    z-index: 1;
    opacity: 0.9;
  }

  /*--------------------------
  advantage
  ---------------------------*/
  .advantage-wrap {
    position: relative;
  }

  .advantage-bg {
    background: #050c1e;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #010613), color-stop(95%, #050c1e));
    background: linear-gradient(#010613 10%, #050c1e 95%);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -8;
  }

  #particles-left {
    width: 25%;
    height: 130vh;
    margin: 0;
    margin-left: -5%;
  }

  #particles-right {
    width: 25%;
    height: 50vh;
    margin: 0 auto;
    position: absolute;
    right: -5%;
    bottom: 50%;
  }

  .advantage {
    padding: 5vw 0 380px;
    color: #fff;
    position: relative;
  }

  .advantage-tanker {
    position: absolute;
    top: -254px;
    right: 0;
    -webkit-transition: -webkit-transform 1s ease;
    transition: -webkit-transform 1s ease;
    transition: transform 1s ease;
    transition: transform 1s ease, -webkit-transform 1s ease;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    max-width: 50vw;
  }

  .advantage::after {
    content: "";
    width: 100%;
    height: 1073px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: url(/resources/firstTimePage/img/about/advantage-feature_bg.png)no-repeat center bottom /cover;
    visibility: visible;
    opacity: 0;
    -webkit-transition: 1s ease;
    transition: 1s ease;
  }

  .animate2.advantage::after {
    opacity: 1;
  }

  .advantage-box {
    -webkit-transition: -webkit-transform 1s ease;
    transition: -webkit-transform 1s ease;
    transition: transform 1s ease;
    transition: transform 1s ease, -webkit-transform 1s ease;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    padding-top: 200px;
  }

  .advantage-ttl::before {
    width: 21ch;
  }

  .advantage-txt {
    text-align: center;
  }

  .advantage-img-wrap {
    position: relative;
    margin: 320px 0 0 23px;
  }

  .advantage-img {
    position: relative;
    width: 100%;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 1s ease-out 0s, opacity 1s ease .5s;
    transition: -webkit-transform 1s ease-out 0s, opacity 1s ease .5s;
    -webkit-transition: opacity 1s ease .5s, -webkit-transform 1s ease-out 0s;
    transition: opacity 1s ease .5s, -webkit-transform 1s ease-out 0s;
    transition: transform 1s ease-out 0s, opacity 1s ease .5s;
    transition: transform 1s ease-out 0s, opacity 1s ease .5s, -webkit-transform 1s ease-out 0s;
    transition: transform 1s ease-out 0s, -webkit-transform 1s ease-out 0s, opacity 1s ease .5s;
  }

  .advantage-img:not(.is-01) {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: -webkit-transform 1s ease-out 0s, opacity 1s ease .5s;
    transition: -webkit-transform 1s ease-out 0s, opacity 1s ease .5s;
    -webkit-transition: opacity 1s ease .5s, -webkit-transform 1s ease-out 0s;
    transition: opacity 1s ease .5s, -webkit-transform 1s ease-out 0s;
    transition: transform 1s ease-out 0s, opacity 1s ease .5s;
    transition: transform 1s ease-out 0s, opacity 1s ease .5s, -webkit-transform 1s ease-out 0s;
    transition: transform 1s ease-out 0s, -webkit-transform 1s ease-out 0s, opacity 1s ease .5s;
  }

  .advantage-img.is-02 {
    -webkit-transition: opacity .5s ease .4s, -webkit-transform 1s ease-out 0s;
    transition: opacity .5s ease .4s, -webkit-transform 1s ease-out 0s;
    transition: opacity .5s ease .4s, transform 1s ease-out 0s;
    transition: opacity .5s ease .4s, transform 1s ease-out 0s, -webkit-transform 1s ease-out 0s;
  }

  .advantage-img.is-03 {
    -webkit-transition: opacity .5s ease .6s, -webkit-transform 1s ease-out 0s;
    transition: opacity .5s ease .6s, -webkit-transform 1s ease-out 0s;
    transition: opacity .5s ease .6s, transform 1s ease-out 0s;
    transition: opacity .5s ease .6s, transform 1s ease-out 0s, -webkit-transform 1s ease-out 0s;
  }

  .advantage-img.is-04 {
    -webkit-transition: opacity .5s ease .8s, -webkit-transform 1s ease-out 0s;
    transition: opacity .5s ease .8s, -webkit-transform 1s ease-out 0s;
    transition: opacity .5s ease .8s, transform 1s ease-out 0s;
    transition: opacity .5s ease .8s, transform 1s ease-out 0s, -webkit-transform 1s ease-out 0s;
  }

  .advantage-img.is-05 {
    -webkit-transition: opacity .5s ease 1s, -webkit-transform 1s ease-out 0s;
    transition: opacity .5s ease 1s, -webkit-transform 1s ease-out 0s;
    transition: opacity .5s ease 1s, transform 1s ease-out 0s;
    transition: opacity .5s ease 1s, transform 1s ease-out 0s, -webkit-transform 1s ease-out 0s;
  }

  .advantage-img.is-06 {
    -webkit-transition: opacity .5s ease 1.4s, -webkit-transform 1s ease-out 0s;
    transition: opacity .5s ease 1.4s, -webkit-transform 1s ease-out 0s;
    transition: opacity .5s ease 1.4s, transform 1s ease-out 0s;
    transition: opacity .5s ease 1.4s, transform 1s ease-out 0s, -webkit-transform 1s ease-out 0s;
  }

  .advantage-img-wrap.animate .advantage-img {
    opacity: 1;
  }

  .advantage-feature-wrap {
    padding: 50px 0 0;
    margin: -220px 0 0;
  }

  .advantage-feature {
    position: relative;
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    height: 503px;
  }

  .feature-box {
    position: absolute;
    top: 125px;
    left: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 44%;
    padding: 65px 0 125px;
    -webkit-transform: translate(0, 50px);
    transform: translate(0, 50px);
    -webkit-transition: -webkit-transform 1s ease-out 0s, opacity 1s ease .5s;
    transition: -webkit-transform 1s ease-out 0s, opacity 1s ease .5s;
    -webkit-transition: opacity 1s ease .5s, -webkit-transform 1s ease-out 0s;
    transition: opacity 1s ease .5s, -webkit-transform 1s ease-out 0s;
    transition: transform 1s ease-out 0s, opacity 1s ease .5s;
    transition: transform 1s ease-out 0s, opacity 1s ease .5s, -webkit-transform 1s ease-out 0s;
    transition: transform 1s ease-out 0s, -webkit-transform 1s ease-out 0s, opacity 1s ease .5s;
  }

  .feature-box--01 {
    padding: 96px 40px 118px 10px;
  }

  .feature-box--02 {
    padding: 96px 0 118px 30px;
    right: 27px;
    left: auto;
  }

  .feature-box--02 .feature-detail {
    max-width: 360px;
    margin: 0 46px 0 0;
  }

  .feature-box--01::before {
    content: "";
    width: calc(50vw - 0px);
    height: 130%;
    background: url(/resources/firstTimePage/img/about/advantage-feature_box01.png)no-repeat right top /auto;
    position: absolute;
    top: 0;

    left: calc(100% - (50vw - 36px));
  }

  .feature-box--02::before {
    content: "";
    width: calc(50vw - -17px);
    height: 130%;
    background: url(/resources/firstTimePage/img/about/advantage-feature_box02.png)no-repeat left top /auto;
    position: absolute;
    top: 0;
    right: calc(100% - (50vw - 2.6vw));
  }

  .feature-box--02::after {
    content: "";
    width: 215px;
    height: 348px;
    background: url(/resources/firstTimePage/img/about/feature-bot.png)no-repeat left top /auto;
    position: absolute;
    bottom: -46px;
    left: calc(50% + 200px);
    -webkit-transition: 1.5s ease .5s;
    transition: 1.5s ease .5s;
    -webkit-transform: translate(0, 20px);
    transform: translate(0, 20px);
  }

  .feature-box--02.animate::after {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  .feature-cont {
    position: relative;
  }

  .feature-ttl {
    font-weight: 100;
    font-size: 6rem;
    color: #19aafe;
    text-shadow: 0px 0px 30px #007eff, 0px 0px 30px #007eff;
    line-height: 1;
  }

  .feature-detail {}

  .feature-detail__ttl {
    font-weight: 200;
    font-size: 2.6rem;
    margin: 40px 0 11px;
    line-height: 1.3;
  }

  .feature-detail__txt {
    line-height: 1.9;
    font-weight: 200;
    font-size: 1.6rem;
  }

  /*--------------------------
  service
  ---------------------------*/
  .service {
    padding: 0;
    margin: -175px 0 0;
    position: relative;
  }

  .service_bg-wrap {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
  }

  .service_bg-img {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: ease;
    transition: ease;
    -webkit-transition: -webkit-transform 1s ease;
    transition: -webkit-transform 1s ease;
    transition: transform 1s ease;
    transition: transform 1s ease, -webkit-transform 1s ease;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .service_bg-img.is-01 {
    background: url(/resources/firstTimePage/img/about/service_bg01.png)no-repeat right top;
    width: 100%;
    height: 1001px;
    top: 12%;
  }

  .service_bg-img.is-02 {
    background: url(/resources/firstTimePage/img/about/service_bg02.png)no-repeat left top;
    width: 100%;
    height: 1001px;
    top: 22.6%;
  }

  .service_bg-img.is-03 {
    background: url(/resources/firstTimePage/img/about/service_bg03.png)no-repeat right top;
    width: 100%;
    height: 865px;
    top: 37%;
  }

  .service_bg-img.is-04 {
    background: url(/resources/firstTimePage/img/about/service_bg04.png)no-repeat right 4% top;
    width: 100%;
    height: 694px;
    top: -10%;
  }

  .service_bg-img.is-05 {
    background: url(/resources/firstTimePage/img/about/service_bg05.png)no-repeat left top;
    width: 100%;
    height: 752px;
    top: -4.5%;
  }

  .service_bg-img.is-06 {
    background: url(/resources/firstTimePage/img/about/service_bg06.png)no-repeat right top;
    width: 100%;
    height: 602px;
    top: 20.6%;
  }

  .service_bg-img.is-07 {
    background: url(/resources/firstTimePage/img/about/service_bg07.png)no-repeat left top;
    width: 100%;
    height: 752px;
    top: 44%;
  }

  .service-head {
    background: url(/resources/firstTimePage/img/about/service-head_bg.png)no-repeat center top;
    color: #fff;
    padding: 29px 92px 117px 90px;
    width: 1104px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 -40px;
    -webkit-box-shadow: 0px 0px 20px 0px rgba(7, 1, 3, 0.1);
    box-shadow: 0px 0px 20px 0px rgba(7, 1, 3, 0.1);
    position: relative;
  }

  .service-head::before {
    content: "";
    width: 476px;
    height: 250px;
    background: url(/resources/firstTimePage/img/about/service_logo.png);
    position: absolute;
    top: -100px;
    right: -130px;
  }

  .service-head::after {
    content: "";
    width: 100%;
    height: 100%;
    background: #dc1e37;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
  }

  .service-head.animate::after {
    -webkit-transition: .5s ease;
    transition: .5s ease;
    width: 0;
  }

  .service-ttl span.main {
    margin: 60px 0 20px;
    letter-spacing: 4.1px;
  }

  .service-row {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 1360px 0 -1100px;
  }

  .service-box {
    padding: 42px 23px 25px;
    position: relative;
  }

  .service-data__img {
    position: relative;
  }

  .service-data__img .is-child:not(.is-01) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  .service-box.is-01 {
    background: url(/resources/firstTimePage/img/about/function01_bg.png)no-repeat left top;
    margin: 0 0 -4px;
  }

  .service-box.is-01 .service-data__img {
    position: relative;
    top: -40px;
    left: 30px;
  }

  .service-box.is-02 {
    background: url(/resources/firstTimePage/img/about/function02_bg.png)no-repeat right top;
    margin: 0 0 61px;
  }

  .service-box.is-02 .service-data__img {
    position: absolute;
    top: 10px;
    left: 0;
    width: 421px;
  }

  .service-box.is-05 {
    background: url(/resources/firstTimePage/img/about/function05_bg.png)no-repeat left top;
    margin: 0 0 42px;
  }

  .service-box.is-05 .service-data__img {
    position: relative;
    top: -50px;
    left: 45px;
  }

  .service-box.is-04 {
    background: url(/resources/firstTimePage/img/about/function04_bg.png)no-repeat right top;
    margin: 0 0 111px;
    padding-right: 10px;
    padding-bottom: 70px;
  }

  .service-box.is-04 .service-data__img {
    position: absolute;
    top: 7px;
    left: -21px;
  }

  .service-box.is-04 .service-data__txt {
    max-width: none;
  }

  .service-box.is-09 {
    background: url(/resources/firstTimePage/img/about/function09_bg.png)no-repeat left top;
    margin: 0 0 24px;
  }

  .service-box.is-09 .service-data__img {
    position: relative;
    top: -44px;
    right: -80px;
  }

  .service-box.is-06 {
    background: url(/resources/firstTimePage/img/about/function06_bg.png)no-repeat right top;
    margin: 0 0 54px;
    padding-bottom: 50px;
  }

  .service-box.is-06 .service-data__img {
    position: absolute;
    top: -23px;
    left: 27px;
  }

  .service-box.is-03 {
    background: url(/resources/firstTimePage/img/about/function03_bg.png)no-repeat left top;
    margin: 0 0 54px;
    padding-bottom: 50px;
  }

  .service-box.is-03 .service-data__img {
    position: absolute;
    top: 23px;
    right: 27px;
  }

  .service-box.is-03 .service-data__wrap {
    width: 80%;
  }

  .service-box.is-03 .service-data__txt {
    max-width: 500px;
  }

  .service-box.is-02 .is-child {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
  }

  .service-box.is-02 .is-child img {
    min-width: 421px;
  }

  .service-box.is-03 .is-child.is-02 {
    top: 48px;
    left: 68px;
    width: 59px;
  }

  .service-box.is-03 .is-child.is-03 {
    top: 95px;
    left: 29px;
    width: 71px;
  }

  .service-box.is-04 .is-child.is-02 {
    top: 61px;
    right: 125px;
    left: auto;
    width: 53px;
  }

  .service-box.is-04 .is-child.is-03 {
    top: 73px;
    left: auto;
    right: 72px;
    width: 61px;
  }

  .service-box.is-04 .is-child.is-04 {
    top: 124px;
    left: auto;
    right: 133px;
    width: 89px;
  }

  .service-box.is-04 .is-child.is-05 {
    top: 147px;
    left: auto;
    right: 94px;
    width: 37px;
  }

  .service-box.is-04 .is-child.is-06 {
    top: 0;
    left: auto;
    right: 37px;
    width: 284px;
  }

  .service-box.is-04 .is-child.is-07 {
    top: 107px;
    left: 58px;
    width: 178px;
  }

  .service-box.is-04 .is-child.is-08 {
    top: 56px;
    left: 60px;
    width: 62px;
  }

  .service-box.is-04 .is-child.is-09 {
    top: 45px;
    left: 122px;
    width: 75px;
  }

  .service-box.is-04 .is-child.is-02 {
    opacity: 0;
    -webkit-transition: opacity 1s ease;
    transition: opacity 1s ease;
  }

  .service-box.is-04 .is-child.is-02 {
    opacity: 0;
    -webkit-transition: 1s ease;
    transition: 1s ease;
  }

  .service-box.is-06 .is-child.is-02 {
    opacity: 0;
    -webkit-transition: .5s ease;
    transition: .5s ease;
  }

  .service-box.is-06 .is-child.is-02 {
    opacity: 0;
    -webkit-transition: .5s ease;
    transition: .5s ease;
  }

  .service-box.is-06.animate .is-child.is-02 {
    opacity: 1;
    -webkit-transition-delay: .5s;
    transition-delay: .5s;
  }

  .service-box__inr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .service-box.is-even .service-box__inr {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }

  .service-data__wrap {
    width: 50%;
  }

  .service-box__ttl {
    font-size: 4.6rem;
    padding: 23px 0 10px;
    font-weight: 100;
    letter-spacing: 0.2px;
    line-height: 1.2;
    color: #19aafe;
    text-shadow: 0px 0px 30px #007eff, 0px 0px 30px #007eff;
  }

  .service-data {
    position: relative;
  }

  .service-data__ttl {
    color: #fff;
    font-size: 1.55rem;
    font-weight: 200;
    padding: 3px 0;
    letter-spacing: 0.5px;
  }

  .service-data__txt {
    font-size: 1.6rem;
    padding: 12px 0 0;
    letter-spacing: -0.3px;
    font-weight: 200;
    line-height: 1.6;
    color: #fff;
    max-width: 480px;
  }

  .service-data__txt span {
    display: inline-block;
    font-size: 1.4rem;
  }

  .service-data__img {
    text-align: center;
    position: relative;
    width: auto;
  }

  /*--------------------------
  after-service
  ---------------------------*/
  .after-service {
    padding: 185px 0 0;
    overflow: hidden;
    position: relative;
  }

  .after-service_bg img {
    width: 100vw;
  }

  #canvas-container {
    position: relative;
    top: 0;
    margin: 0;
    z-index: -5;
    opacity: 1;
    width: 100%;
    opacity: 0;
    -webkit-transition: .5s ease;
    transition: .5s ease;
  }

  .content.after #canvas-container {
    opacity: 1;
  }

  #canvas-container::after {
    content: "";
    position: absolute;
    top: 97.5%;
    left: 0;
    width: 100%;
    height: 600px;
    -webkit-transition: ease;
    transition: ease;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #28282d94), color-stop(95%, #050c1e));
    background: linear-gradient(#28282d94 10%, #050c1e 95%);
  }

  .content.after #canvas-container::after {
    background: #28282d;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #28282d94), color-stop(95%, #25262a));
    background: linear-gradient(#28282d94 10%, #25262a 95%);
  }

  #canvas-container canvas {
    width: 100%;
    max-height: 300px;
  }

  .after-service_bg {
    position: absolute;
    left: 0;
    right: 0;
    top: -51vw;
    text-align: center;
    -webkit-transition: opacity .5s ease 1s, -webkit-transform 1s ease;
    transition: opacity .5s ease 1s, -webkit-transform 1s ease;
    transition: opacity .5s ease 1s, transform 1s ease;
    transition: opacity .5s ease 1s, transform 1s ease, -webkit-transform 1s ease;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .after-service_bg-img {
    top: 340px;
  }

  .after-service-content {
    margin: 1600px auto -1500px;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .after-service-head {
    padding: 13px 0 0;
    text-align: center;
  }

  .after-service-ttl {
    color: #fff;
    font-size: 5.4rem;
    text-align: center;
  }

  .after-service-ttl span.main {
    margin: 34px 0 9px;
    text-align: center;
  }

  .after-service-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin: 90px 0 0;
    -webkit-transition: -webkit-transform 1s ease;
    transition: -webkit-transform 1s ease;
    transition: transform 1s ease;
    transition: transform 1s ease, -webkit-transform 1s ease;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .after-service-box {
    max-width: 480px;
    width: 48%;
    margin: 0 0 43px;
    padding: 123px 0 0;
    -webkit-transition: all .5s;
    transition: all .5s;
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
    -webkit-box-shadow: 7.071px 7.071px 19.95px 1.05px rgba(0, 0, 0, 0.38);
    box-shadow: 7.071px 7.071px 19.95px 1.05px rgba(0, 0, 0, 0.38);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }

  .after-service-box:hover {
    text-decoration: none;
  }

  .after-service-box::before {
    content: "";
    width: calc(100% + 10px);
    height: calc(100% - 1px);
    position: absolute;
    top: 0;
    left: -10.5px;
    z-index: -1;
  }

  .after-service-box.is-01::before {
    background: url(/resources/firstTimePage/img/about/after-service-box01.png)no-repeat left top /cover, url(/resources/firstTimePage/img/about/after-service-box01_hover.png)no-repeat left top /cover;
  }

  .after-service-box.is-02::before {
    background: url(/resources/firstTimePage/img/about/after-service-box02.png)no-repeat left top /cover, url(/resources/firstTimePage/img/about/after-service-box02_hover.png)no-repeat left top /cover;
  }

  .after-service-box.is-03::before {
    background: url(/resources/firstTimePage/img/about/after-service-box03.png)no-repeat left top /cover, url(/resources/firstTimePage/img/about/after-service-box03_hover.png)no-repeat left top /cover;
  }

  .after-service-box.is-04::before {
    background: url(/resources/firstTimePage/img/about/after-service-box04.png)no-repeat left top /cover, url(/resources/firstTimePage/img/about/after-service-box04_hover.png)no-repeat left top /cover;
  }

  .after-service-box.is-05::before {
    background: url(/resources/firstTimePage/img/about/after-service-box05.png)no-repeat left top /cover, url(/resources/firstTimePage/img/about/after-service-box05_hover.png)no-repeat left top /cover;
  }

  .after-service-box.is-06::before {
    background: url(/resources/firstTimePage/img/about/after-service-box06.png)no-repeat left top /cover, url(/resources/firstTimePage/img/about/after-service-box06_hover.png)no-repeat left top /cover;
  }

  .after-service-box.is-01.is-hover::before {
    background: url(/resources/firstTimePage/img/about/after-service-box01_hover.png)no-repeat left top /cover;
  }

  .after-service-box.is-02.is-hover::before {
    background: url(/resources/firstTimePage/img/about/after-service-box02_hover.png)no-repeat left top /cover;
  }

  .after-service-box.is-03.is-hover::before {
    background: url(/resources/firstTimePage/img/about/after-service-box03_hover.png)no-repeat left top /cover;
  }

  .after-service-box.is-04.is-hover::before {
    background: url(/resources/firstTimePage/img/about/after-service-box04_hover.png)no-repeat left top /cover;
  }

  .after-service-box.is-05.is-hover::before {
    background: url(/resources/firstTimePage/img/about/after-service-box05_hover.png)no-repeat left top /cover;
  }

  .after-service-box__img {
    position: relative;

  }

  .after-service-box__img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/resources/firstTimePage/img/about/as-img_on.png)repeat 0 0 /2px;
  }

  .after-service-box__ttl {
    font-size: 2.2rem;
    color: #fff;
    font-weight: 600;
    margin: 9px 0 10px;
    padding: 0 22px;
    position: relative;
  }

  .after-service-box__detail {
    background: hsla(217, 72%, 8%, 0.8);
    padding: 10px 22px 21px;
    position: relative;
    z-index: 5;
    height: 120px;
  }

  .after-service-box__txt {
    font-size: 1.4rem;
    line-height: 1.82;
    letter-spacing: 0.2px;
    color: #fff;
    font-weight: 200;
  }

  .after-service-box__link {
    text-align: left;
    margin: 9px 0 0;
    display: inline-block;
  }

  .after-service-box__link .after-service-box__more {
    border: #19aafe 1px solid;
    font-size: 1.3rem;
    color: #fff;
    padding: 4px 43px 4px 21px;
    border-radius: 20px;
    position: relative;
    font-weight: 100;
    letter-spacing: 1px;
  }

  .after-service-box__link .after-service-box__more:after {
    content: "";
    position: absolute;
    top: calc(50% - 4px);
    right: 11px;
    width: 20px;
    height: 4px;
    background: url(/resources/firstTimePage/img/about/after-service_arrow.png)no-repeat left top /cover;
    -webkit-transition: .3s ease;
    transition: .3s ease;
  }

  .after-service-box:hover .after-service-box__more {
    text-decoration: none;
    -webkit-box-shadow: 0 0 8px #19aaff;
    box-shadow: 0 0 8px #19aaff;
  }

  .after-service-box:hover .after-service-box__more::after {
    right: 8px;
  }

  .after-logo {
    position: absolute;
    top: -88px;
    left: 385px;
    z-index: 2;
  }

  .after-logo__img {
    position: relative;
    overflow: hidden;
  }

  .after-logo__img::before {
    content: "";
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    position: absolute;
    top: -10px;
    left: -10px;
    border: 10px solid #dc1e37;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    z-index: 5;
  }

  .fadeout {
    opacity: 0;
    -webkit-transition: .5s ease;
    transition: .5s ease;
  }


  /*--------------------------
  function compare
  ---------------------------*/
  .function__ttl {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    font-weight: 400;
    font-size: 24px;
    letter-spacing: 0.04em;
    line-height: 2;
    text-align: center;
    color: #fff;
    margin-top: 77px;
    margin-bottom: 37px;
  }

  .function__ttl::before,
  .function__ttl::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background-color: #fff;
  }

  .function__table thead th:first-child {
    border-top: none;
    border-left: none;
    width: 52.24%;
    background-color: transparent;
  }

  .function__table thead th:not(:first-child) {
    width: 20.50%;
  }

  .function__table tr:last-child th,
  .function__table tr:last-child td {
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }

  .function__table th:last-child,
  .function__table td:last-child {
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }

  .function__table .data th:first-child {
    width: 100px;
    border-bottom: 1px solid #ddd;
  }

  .function__table th.is-border-b {
    border-bottom: 1px solid #ddd;
  }

  .function__table .data th:nth-child(2) {
    width: 16.625%;
  }

  .function__table .data th:nth-child(3) {
    width: auto;
  }

  .function__table th,
  .function__table td {
    font-size: 1.6rem;
    letter-spacing: 0.02em;
    line-height: 1.25;
    text-align: center;
    color: #fff;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    padding: 10px;
    vertical-align: middle;
  }

  .function__table th img,
  .function__table td img {
    vertical-align: middle;
  }

  .function__table th .is-small,
  .function__table td .is-small {
    font-size: 1.2rem;
  }

  .function__table th {
    background-color: #00204B;
  }

  .function__table th.text-left {
    text-align: left;
    padding-left: 16px;
  }

  .function__table td.is-bg {
    background-color: #1A51AF;
  }

  .function__table-note {
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.78;
    color: #fff;
    margin-top: 24px;
  }

  /*--------------------------
  side-nav
  ---------------------------*/
  .side-nav {
    position: fixed;
    right: 0;
    top: 50%;
    -webkit-transform: translate3d(192px, -50%, 0);
    transform: translate3d(192px, -50%, 0);
    -webkit-transition: opacity .5s, -webkit-transform .45s;
    transition: opacity .5s, -webkit-transform .45s;
    transition: transform .45s, opacity .5s;
    transition: transform .45s, opacity .5s, -webkit-transform .45s;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    visibility: hidden;
    opacity: 0;
    z-index: 105;
  }

  .side-nav,
  .side-nav * {
    box-sizing: border-box;
  }

  .side-nav.show {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }

  .side-nav__item {
    position: relative;
    background: #fff;
    -webkit-transition: .45s ease;
    transition: .45s ease;
  }

  .side-nav__item::before {
    content: "";
    width: 100%;
    height: 100%;
    background: #111;
    position: absolute;
    top: 0;
    right: 0;
    -webkit-transition: .3s ease;
    transition: .3s ease;
  }

  .side-nav__item:hover::before {
    width: 0;
  }

  .side-nav__item a {
    display: block;
    position: relative;
    font-size: 1.4rem;
    padding: 25px 25px 22px 76px;
    color: #fff;
    -webkit-transition: .45s;
    transition: .45s;
  }

  .side-nav__item a:hover {
    text-decoration: none;
    color: #111;
  }

  .side-nav__item a::before {
    content: "";
    width: 41px;
    height: 40px;
    position: absolute;
    left: 19px;
    top: calc(50% - 20px);
    -webkit-transition: background .45s;
    transition: background .45s;
  }

  .side-nav__item.is-01 a::before {
    background: url(/resources/firstTimePage/img/about/side-nav_icon01.png)no-repeat center /auto;
  }

  .side-nav__item.is-02 a::before {
    background: url(/resources/firstTimePage/img/about/side-nav_icon02.png)no-repeat center /auto;
  }

  .side-nav__item.is-03 a::before {
    background: url(/resources/firstTimePage/img/about/side-nav_icon03.png)no-repeat center /auto;
  }

  .side-nav__item.is-04 a::before {
    background: url(/resources/firstTimePage/img/about/side-nav_icon04.png)no-repeat center /auto;
  }

  .side-nav__item.is-05 a::before {
    background: url(/resources/firstTimePage/img/about/side-nav_icon05.png)no-repeat center /auto;
  }

  .side-nav__item.is-06 a::before {
    background: url(/resources/firstTimePage/img/about/side-nav_icon06.png)no-repeat center /auto;
  }

  .side-nav__item.is-01 a:hover::before {
    background: url(/resources/firstTimePage/img/about/side-nav_icon01_on.png)no-repeat center /auto;
  }

  .side-nav__item.is-02 a:hover::before {
    background: url(/resources/firstTimePage/img/about/side-nav_icon02_on.png)no-repeat center /auto;
  }

  .side-nav__item.is-03 a:hover::before {
    background: url(/resources/firstTimePage/img/about/side-nav_icon03_on.png)no-repeat center /auto;
  }

  .side-nav__item.is-04 a:hover::before {
    background: url(/resources/firstTimePage/img/about/side-nav_icon04_on.png)no-repeat center /auto;
  }

  .side-nav__item.is-05 a:hover::before {
    background: url(/resources/firstTimePage/img/about/side-nav_icon05_on.png)no-repeat center /auto;
  }

  .side-nav__item.is-06 a:hover::before {
    background: url(/resources/firstTimePage/img/about/side-nav_icon06_on.png)no-repeat center /auto;
  }

  /*--------------------------
  lbox
  ---------------------------*/
  .lbox {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 200;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .lbox .lbox-inr {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .lbox .lbox-inr iframe {
    width: 100%;
    border: none;
  }

  .lbox .close {
    position: absolute;
    right: 0;
    top: -35px;
    width: 35px;
    height: 35px;
  }

  .lbox .close::before,
  .lbox .close::after {
    content: '';
    display: block;
    width: 3px;
    height: 100%;
    background: #196ffe;
    position: absolute;
    top: 0;
    left: 50%;
  }

  .lbox .close::before {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }

  .lbox .close::after {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }

  .lbox .close:hover {
    cursor: pointer;
  }

  .lbox .clickable {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    opacity: .3;
    display: none;
  }

  .lbox .lbox-inr [id^="box"] {
    width: 92%;
    max-width: 880px;
    text-align: left;
    position: relative;
    margin: 0 auto;
    /* overflow: hidden; */
    border-radius: 10px;
    z-index: 100;
    display: none;
    margin: 0 auto;
  }

  .lcont {
    text-align: center;
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .scroll {
    display: none;
  }

  /*--------------------------
  deployment
  ---------------------------*/
  .deployment {
    color: #fff;
    background: #dc1e37;
    padding: 68px 0 86px;
  }

  .deployment__ttl {
    font-size: 3.6rem;
    font-weight: 500;
    text-align: center;
  }

  .deployment__txt {
    font-size: 1.6rem;
    text-align: center;
    font-weight: 200;
    line-height: 1.82;
    margin: 18px 0 94px;
  }

  .deployment-box {
    background: #fff;
    border-radius: 8px;
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 4% 24px;
    box-sizing: border-box;
  }

  .deployment-box__img {
    width: 40.8%;
    text-align: center;
  }

  .deployment-box__img span {
    background: #dc1e37;
    display: block;
    width: 95%;
    max-width: 335px;
    margin: -41px 0 26px 28px;
    padding: 21px 0 21px 4%;
    border-radius: 8px;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.05);
  }

  .deployment-box__img span::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 22px 0px 0 19px;
    border-color: #dc1e37 transparent transparent transparent;
    position: absolute;
    bottom: -21px;
    left: 118px;
    z-index: 2;
  }

  .deployment-box__img span::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 26px 0px 0 25px;
    border-color: rgba(0, 0, 0, 0.07) transparent transparent transparent;
    position: absolute;
    bottom: -26px;
    left: 114px;
    z-index: 0;
  }

  .deployment-box__img img {
    /* display: block; */
    /* margin: 0 auto; */
    margin: 0 0 0 -8px;
  }

  .deployment-col {
    color: #dc1e37;
    width: calc(100% - 48.8%);
    padding: 0;
    box-sizing: border-box;
    position: relative;
    left: -3.7%;
    top: -10px;
  }

  .deployment-box__ttl {
    font-size: 3.6rem;
    font-weight: 600;
    letter-spacing: -0.7px;
    border-bottom: 1px solid #dc1e37;
    padding: 0 0 19px;
  }

  .deployment-box__txt-wrap {
    font-weight: 300;
    color: #000;
  }

  .deployment-list-wrap {
    margin: 25px 0 24px;
  }

  .deployment-list {
    line-height: 1.5;
  }

  .deployment-box__txt {
    line-height: 1.5
  }

  .deployment .solution-movie {
    margin: 24px auto 41px;
    text-align: center;
  }

  .solution-txt__link .txt {
    font-size: 1.4rem;
    font-weight: 600;
    color: #777;
    display: block;
    margin: 20px 0 0;
  }

  .solution-txt__link a {
    display: block;
    border-radius: 20px;
    color: #fff;
    font-size: 1.6rem;
    text-align: center;
    margin: 0 auto;
    letter-spacing: 0px;
    font-weight: 500;
  }

  .solution-box__img {
    position: relative;
    width: 50%;
  }

  .application {
    padding: 80px 0 105px;
  }

  .application .type-text {
    text-align: left;
  }

  .application-ttl {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 4rem;
    font-weight: 400;
    color: #ffffff;
    margin-top: 34px;
    margin-bottom: 24px;
  }

  .application-ttl .icon {
    display: flex;
  }

  .application-row {
    display: flex;
    justify-content: space-between;
    margin: 49px 0 0;
    column-gap: 20px;
  }

  .application-row+.application-row {
    margin: 100px 0 0;
  }

  .application-txt {
    margin-bottom: 22px;
  }

  .application-btn-wrap {
    margin: 6px 0 0;
  }

  .application-btn a {
    display: block;
    width: 317px;
    position: relative;
  }

  .application-col-btn a {
    display: inline-grid;
    place-content: center;
    width: 200px;
    height: 48px;
    font-size: 1.4rem;
    text-align: center;
    color: #fff;
    background-color: #090080;
    border: 1px solid #196ffe;
    transition: opacity .3s;
    position: relative;
  }

  .application-col-btn a::after {
    content: '';
    display: block;
    width: 10px;
    aspect-ratio: 1/1;
    background-color: #196ffe;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    position: absolute;
    top: 50%;
    right: 15px;
    translate: 0 -50%;
  }

  .application-col-btn a:hover {
    opacity: 0.7;
    text-decoration: none;
  }

  .application-btn-wrap {
    margin: 6px 0 0;
  }

  .application-btn a {
    display: block;
    width: 317px;
    position: relative;
  }

  .application-btn.btn01 a {
    width: 244px;
  }

  .application-btn .main {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: -webkit-transform 1s ease;
    transition: -webkit-transform 1s ease;
    transition: transform 1s ease;
    transition: transform 1s ease, -webkit-transform 1s ease;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  .application-btn a:hover .main {
    -webkit-transform: translate(0, -20px);
    transform: translate(0, -20px);
  }

  .application-btn .shadow {
    display: none;
  }

  .application-flow-container {
    position: relative;
    background-color: #f6f7f9;
    border-radius: 12px;
    margin: 100px -10% 0;
    padding: 60px;
  }

  .application-flow-ttl {
    font-size: 3.2rem;
    color: #808080;
    text-align: center;
    border-bottom: 1px solid #808080;
    padding-bottom: 24px;
    margin-bottom: 60px;
  }

  .application-flow {
    align-items: flex-start;
    justify-content: center;
  }

  .application-flow__list {
    max-width: 240px;
    padding: 0 1.7%;
    text-align: center;
    margin: 0 2.7% 50px;
    width: calc(100% / 2);
    position: relative;
  }

  .application-flow__list::after {
    content: "";
    width: 37px;
    height: 31px;
    background: url(/resources/firstTimePage/img/about/arrow.png)no-repeat 0 0 /contain;
    position: absolute;
    left: 104%;
    top: 87px;
  }

  .application-flow__ttl span {
    display: block;
    font-size: 1.4rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 0 5px;
    line-height: 1.3;
  }

  .application-flow__ttl span.tall {
    height: 36px;
  }

  .application-flow__ttl {
    height: 179px;
  }

  .application-flow__txt {
    font-size: 1.4rem;
    color: #313131;
    text-align: left;
    line-height: 1.4;
    font-weight: 200;
  }

  .application-flow__txt.is-gray {
    color: #999;
  }

  .application-flow__txt.is-red .caution {
    color: #dc1e37;
    font-weight: 400;
    margin: 23px 0 0;
  }

  .application-flow__txt span {
    display: block;
    font-size: 1.4rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 0 5px;
    line-height: 1.3;
  }

  .application-flow__txt span.tall {
    height: 36px;
  }

  .application-flow__txt span.caution {
    display: block;
    font-size: 1.2rem;
    margin: 5px 0 0;
    padding: 0;
    line-height: 1.4;
    font-weight: 200;
  }

  .application-link {
    position: absolute;
    bottom: 16px;
    right: 16px;
  }

  .application-link a {
    display: block;
    color: #808080;
    border: 1px solid #808080;
    padding: 20px 0 20px;
    border-radius: 35px;
    text-align: center;
    min-width: 320px;
    font-size: 1.7rem;
    font-weight: 600;
    position: relative;
  }

  .application-link a:after {
    content: "";
    position: absolute;
    top: calc(50% - 5px);
    right: 28px;
    width: 12px;
    height: 12px;
    border-top: 1px solid #808080;
    border-right: 1px solid #808080;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: .5s ease;
  }

  .application-link a:hover {
    opacity: 1;
    background: #808080;
    color: #fafafa;
  }

  .application-link a:hover::after {
    opacity: 1;
    right: 20px;
    border-top: 1px solid #fafafa;
    border-right: 1px solid #fafafa;
  }

  .about-footer {
    background: #4d4d4d;
  }

  .about-footer .about-footer__ttl {
    background: #dc1e37;
    padding: 18px 0 7px;
  }

  .about-footer span {
    display: block;
    max-width: 1020px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .about-footer .about-footer__content {
    color: #ccc;
    padding: 73px 0 67px;
  }

  .about-footer__row {
    margin: 0 0 120px;
  }

  .about-footer__btn a {
    display: block;
    color: #ccc;
    border: 1px solid #ccc;
    padding: 20px 0 20px;
    border-radius: 35px;
    text-align: center;
    min-width: 320px;
    font-size: 1.7rem;
    font-weight: 600;
    margin: 17px 0 0;
    position: relative;
  }

  .about-footer__btn a:after {
    content: "";
    position: absolute;
    top: calc(50% - 5px);
    right: 28px;
    width: 12px;
    height: 12px;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: .5s ease;
  }

  .about-footer__btn a:hover {
    opacity: 1;
    background: #ccc;
    color: #4d4d4d;
  }

  .about-footer__btn a:hover::after {
    opacity: 1;
    right: 20px;
    border-top: 1px solid #4d4d4d;
    border-right: 1px solid #4d4d4d;
  }

  .about-footer__txt {
    font-weight: 300;
    width: 45%;
    line-height: 1.5;
    margin: 0 0 17px;
  }

  .about-footer__logo {
    text-align: center;
    font-weight: 100;
    font-size: 1.35rem;
  }
}

@media screen and (min-width: 1024px) {
  .deployment {
    padding: 91px 0 100px;
  }

  .deployment-box {
    padding: 0 31px 24px;
  }

  .deployment-box__img span {
    padding: 21px 0 21px 11px;
  }

  .deployment-box__img {
    width: 48.8%;
    text-align: center;
  }

  .application {
    padding: 120px 0 111px;
  }

  .application-flow__list::after {
    left: 105%;
  }
}

@media (max-width: 1400px) and (min-width: 768px) {
  .feature-box--02::after {
    width: 40%;
    background: url(/resources/firstTimePage/img/about/feature-bot.png)no-repeat left top /contain;
    height: 210px;
    left: calc(50vw - 72%);
  }
}

@media (max-width: 1129px) and (min-width: 768px) {
  img {
    max-width: 100%;
    height: auto;
  }

  .advantage-box {
    margin: 0 0 -80px;
    padding-top: 200px;
  }

  .content-inr {
    width: 94%;
  }

  .leaflet-img-wrap {
    width: 40%;
  }

  .advantage-tanker {
    max-width: 70%;
    right: -10%;
  }

  .service-data__img {
    width: 41% !important;
  }

  /* .service-box.is-05 .service-data__img {
    width: 29% !important;
    left: 120px;
    top: -51px;
    width: 278px !important;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    margin: -40px auto -40px !important;
  } */
  .service-box.is-06 .service-data__img {
    top: 30px;
  }

  .feature-box {
    padding: 65px 60px 125px 20px;
    max-width: 45%;
  }

  .feature-box--02 {
    padding: 65px 40px 175px 40px;
    right: 0;
  }

  .feature-ttl {
    font-size: 4.6vw;
  }

  .feature-detail__ttl {
    font-size: 2.7vw;
  }

  .service-box.is-01 {
    margin: 0 0 20px;
  }

  .after-service-row {
    padding: 0;
  }

  .video-library {
    padding: 80px 0 83px;
  }

  .service-box.animate .service-data__img {
    position: relative !important;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  .service-box.animate.is-even .service-data__img {
    position: relative !important;
  }

  .service-box.is-02 .is-child {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
  }

  .service-box.is-02 .is-child img {
    min-width: 421px;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    -webkit-transform-origin: left top;
    transform-origin: left top;
  }

  .service-box.is-02 .service-data__img {
    width: 60% !important;
  }

  .service-box.is-even.animate {
    background-position: right 0 top 0;
    margin: 0 0 30px !important;
  }

  .service-box.is-02.is-even.animate {
    background-position: right top;
  }

  .service-box.is-03 .service-data__img {
    top: 30px;
    left: 30px;
  }

  .service-box.is-03 .is-child.is-02 {
    top: 54px;
    left: 62px;
    width: 40px;
  }

  .service-box.is-03 .is-child.is-03 {
    top: 78px;
    left: 23px;
    width: 52px;
  }

  .service-box.is-04 .service-data__wrap {
    width: 50%;
  }

  .service-box.is-04 .service-data__img {
    top: 15px;
    left: 15px;
  }

  .service-box.is-04 .is-child.is-02 {
    top: 41px;
    right: 76px;
    left: auto;
    width: 30px;
  }

  .service-box.is-04 .is-child.is-03 {
    top: 48px;
    left: auto;
    right: 46px;
    width: 34px;
  }

  .service-box.is-04 .is-child.is-04 {
    top: 84px;
    left: auto;
    right: 91px;
    width: 48px;
  }

  .service-box.is-04 .is-child.is-05 {
    top: 94px;
    left: auto;
    right: 66px;
    width: 25px;
  }

  .service-box.is-04 .is-child.is-06 {
    top: 0;
    left: auto;
    right: 18px;
    width: 184px;
  }

  .service-box.is-04 .is-child.is-07 {
    top: 73px;
    left: 0px;
    width: 112px;
  }

  .service-box.is-04 .is-child.is-08 {
    top: 47px;
    left: 6px;
    width: 34px;
  }

  .service-box.is-04 .is-child.is-09 {
    top: 38px;
    left: 39px;
    width: 43px;
  }

  .service-box.is-06 .service-data__img {
    width: 315px !important;
    height: 200px;
    text-align: center;
    max-width: none;
    top: 20px;
  }

  .service-box.is-06 .is-child:not(.is-01) {
    overflow: hidden;
  }

  .service-box.is-01 .service-data__img {
    top: -30px;
    left: 62px;
  }

  .service-box {
    padding: 42px 7% 25px 10px !important;
    margin: 0 0 20px !important;
  }

  .service-box__ttl {
    line-height: 1;
    font-size: 4vw;
    padding: 25px 0 10px;
  }

  .service-box.is-02 .service-data__img {
    height: 200px;
    top: 20px;
    left: 0;
    right: 0;
    -webkit-transform-origin: left center;
    transform-origin: left center;
    margin: 0 auto -10px;
  }

  .service-box.is-04 .service-data__txt {
    max-width: 480px;
  }

  .service-box.is-06 .is-child:not(.is-01) img {
    min-width: 485px;
    -webkit-transform: scale(0.65);
    transform: scale(0.65);
    -webkit-transform-origin: left top;
    transform-origin: left top;
  }

  .feature-box--01::before {
    width: calc(100% + 6vw);
  }

  .feature-box--02::before {
    width: calc(100% + 10vw);
  }

  .feature-box--02 .feature-detail {
    margin: 0 10px 0 0;
  }

  .introduction-box::before {
    right: 0;
  }

  .leaflet-txt {
    width: 66%;
    position: relative;
  }
}

@media (min-width: 1445px) {
  .advantage {
    padding: 0 0 330px;
  }

  .advantage::after {
    height: 100%;
    background: url(/resources/firstTimePage/img/about/advantage-feature_bg.png)no-repeat center bottom /100%;
    bottom: -2vw;
  }

  .advantage-img-wrap {
    margin: 200px 0 0 23px;
  }

  .advantage-feature {
    max-width: none;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .feature-box--01 {
    width: 48%;
    max-width: 765px;
    position: relative;
    margin-right: 2%;
    padding: 75px 80px 125px 80px;
  }

  .feature-box--01::before {
    background: url(/resources/firstTimePage/img/about/advantage-feature_box01_big.png)no-repeat left top /contain;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .feature-box--02 {
    width: 48%;
    max-width: 765px;
    position: relative;
    margin-left: 2%;
    padding: 75px 80px 175px 80px;
  }

  .feature-box--02::before {
    background: url(/resources/firstTimePage/img/about/advantage-feature_box02_big.png)no-repeat left top /contain;
    width: 100%;
    height: 100%;
    right: 0;
  }

  .feature-box--02 .feature-detail {
    max-width: 390px;
  }

  .feature-box--02::after {
    left: auto;
    right: 40px;
  }

  .after-service {
    padding: 185px 0 0;
  }

  .after-service_bg {
    top: -490px;
  }

  .after-service-row {
    /* margin: 0; */
  }
}

@media (min-width: 2170px) {
  .video-library__item.is-large .thumb {
    max-width: 101%;
    position: absolute;
    -webkit-transform: translateY(-13%);
    transform: translateY(-13%);
  }

  .video-library__item.is-large02 .thumb {
    max-width: 101%;
    position: absolute;
    -webkit-transform: translateY(-13%);
    transform: translateY(-13%);
  }

  .video-library__item.is-large:hover .thumb {
    -webkit-transform: translateY(-13%) scale(1.1);
    transform: translateY(-13%) scale(1.1);
  }

  .video-library__item.is-large02:hover .thumb {
    -webkit-transform: translateY(-13%) scale(1.1);
    transform: translateY(-13%) scale(1.1);
  }
}

@media all and (-ms-high-contrast: none) {
  body {
    overflow-x: hidden;
  }
}

@media all and (-ms-high-contrast: none) and (max-width: 767px) {
  .feature-box {
    opacity: 1;
    -webkit-transition: -webkit-transform 1s ease-out 0s;
    -webkit-transition: -webkit-transform 1s ease-out 0s;
    transition: -webkit-transform 1s ease-out 0s;
    transition: transform 1s ease-out 0s;
    transition: transform 1s ease-out 0s, -webkit-transform 1s ease-out 0s;
  }
}

/*--------------------------
smart-link
---------------------------*/
.smart-link_content {
  display: block;
  font-family: 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'Noto Sans JP', メイリオ, Meiryo, 游ゴシック体, 'Yu Gothic', YuGothic, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  background: #ae182c;
  background: url(/resources/firstTimePage/img/about/bg01.png)no-repeat right calc(50% - 462px) top -24px, url(/resources/firstTimePage/img/about/bg02.png)no-repeat left calc(50% - 536px) top 94%, -webkit-gradient(linear, left bottom, left top, from(rgba(174, 24, 44, 1)), to(rgba(220, 30, 55, 1)));
  background: url(/resources/firstTimePage/img/about/bg01.png)no-repeat right calc(50% - 462px) top 0, url(/resources/firstTimePage/img/about/bg02.png)no-repeat left calc(50% - 536px) top 94%, linear-gradient(0deg, rgba(174, 24, 44, 1) 0%, rgba(220, 30, 55, 1) 100%);
  padding: 60px 4% 40px;
  overflow: hidden;
}

.smart-link {
  background: #ae182c;
  padding-bottom: 50px;
}

.smart-link__logo {
  text-align: center;
}

.smart-link__box {
  max-width: 1008px;
  margin: 38px auto 0;
  background: #fff;
  border-radius: 4px;
  padding: 28px 20px 31px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 0px 4px 4.85px 0.15px rgba(0, 0, 0, 0.06), 0px 2px 5.94px 0.06px rgba(0, 0, 0, 0.04);
  box-shadow: 0px 4px 4.85px 0.15px rgba(0, 0, 0, 0.06), 0px 2px 5.94px 0.06px rgba(0, 0, 0, 0.04);
}

.smart-link__ttl {
  font-size: 2.5rem;
  color: #454545;
  text-align: center;
  font-weight: 700;
}

.smart-link__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  margin: 44px 0 0;
}

.smart-link__col {
  text-align: center;
}

.smart-link__col.is-02 {
  position: relative;
}

.smart-link__col.is-02::before {
  content: "";
  width: 33px;
  height: 97px;
  background: url(/resources/firstTimePage/img/about/arrow.svg)no-repeat 50% /contain;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.smart-link__col.is-02::after {
  content: "";
  width: 33px;
  height: 97px;
  background: url(/resources/firstTimePage/img/about/arrow.svg)no-repeat 50% /contain;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -3px;
}

.smart-link__col-ttl {
  text-align: center;
  max-width: 224px;
  margin: 0 auto;
}

.smart-link__col-ttl .img {
  display: block;
  margin-bottom: 2px;
}

.smart-link__col-ttl .txt {
  display: block;
  text-align: center;
  font-size: 1.2rem;
  color: #a0a0a0;
  font-weight: 600;
}

.smart-link__col-img {
  margin: 23px 0 13px;
}

.smart-link__col.is-02 .smart-link__col-img {
  margin: 3px 0 17px;
}

.smart-link__col-txt {
  font-weight: 600;
}

.smart-link__col-txt .large {
  display: block;
  text-align: center;
  font-size: 2rem;
  color: #454545;
  position: relative;
  line-height: 1.4;
}

.smart-link__col-txt {
  min-height: 76px;
}

.smart-link__col-txt .small {
  color: #737373;
  font-size: 1.6rem;
  line-height: 1.25;
}

.smart-link__col-txt .small span {
  font-size: 1.2rem;
  display: block;
}

.smart-link__note {
  max-width: 1008px;
  margin: 6px auto 0;
  text-align: right;
  color: #fcfcfc;
  font-weight: 300;
}

.smart-link__note span {
  display: inline-block;
  vertical-align: text-top;
  text-align: left;
  max-width: 692px;
  width: 86%;
}

.smart-link__note span.ttl {
  margin-right: 10px;
  width: auto;
}

@media screen and (min-width: 1000px) {
  .smart-link__col-txt .large {
    height: auto;
    /* white-space: nowrap; */
  }

  .smart-link__col-txt .large span {
    /* position: absolute; */
    top: 0;
    left: 50%;
    /* -webkit-transform: translateX(-50%); */
    /* transform: translateX(-50%); */
  }
}

@media screen and (max-width: 767px) {
  .smart-link_content {
    padding: 70px 4% 20px;
    background: url(/resources/firstTimePage/img/about/bg01.png)no-repeat right -17px top 0 /40%, url(/resources/firstTimePage/img/about/bg02.png)no-repeat left -32px top 85px /29%, linear-gradient(#dc1e37 0%, #ae182c 100%);
  }

  .smart-link__logo {
    max-width: 60%;
    margin: 0 auto;
  }

  .smart-link__ttl {
    font-size: 1.62rem;
    line-height: 1.6;
  }

  .smart-link__box {
    padding: 20px 3%;
    margin: 30px auto 0;
  }

  .smart-link__row {
    display: block;
    margin: 30px 0 0;
  }

  .smart-link__col.is-02 {
    padding: 60px 0 50px;
  }

  .smart-link__col.is-02::before {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    top: -20px;
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  .smart-link__col.is-02::after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    top: auto;
    bottom: -18px;
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  .smart-link__col-img {
    margin: 10px 0 5px;
  }

  .smart-link__col.is-03 .smart-link__col-img {
    padding: 6px 0 11px;
  }

  .smart-link__col-txt .large {
    font-size: 1.68rem;
    margin-bottom: 4px;
  }

  .smart-link__col-txt .small {
    font-size: 1.45rem;
  }
}

@media screen and (min-width: 768px) {
  .smart-link__col {
    max-width: 270px;
    width: calc(100% / 3);
  }

  .smart-link__col.is-02 {
    max-width: 300px;
    min-width: 270px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: calc(100% / 3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: auto;
    margin-bottom: 7%;
    padding: 0 40px;
  }

  .smart-link__col.is-03 .smart-link__col-img {
    padding: 36px 0 38px;
  }
}

@keyframes loop-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

/*--------------------------
service-3d
---------------------------*/
.service-3d {
  background: url('/resources/firstTimePage/img/about/img_3d_bg.png') no-repeat center / cover;
  border: 2px solid;
  border-image: linear-gradient(to bottom, #081c3a 0%, #040d1e 100%);
  border-image-slice: 1;
  padding-bottom: 66px;
  margin-top: 80px;
}

.service-3d::before {
  content: '';
  display: block;
  width: 26.82%;
  aspect-ratio: 1/1;
  background: url('/resources/firstTimePage/img/about/img_3d_deco.png') no-repeat center / contain;
  position: absolute;
  top: 29px;
  left: 11.82%;
}

.service-3d-lead {
  font-size: 2.1rem;
  color: #fff;
  background: linear-gradient(90deg, #103265 0%, #040d1e 100%);
  padding: 13px 17px 14px;
  position: relative;
}

.service-3d-lead .is-border {
  display: inline-block;
  font-weight: 300;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
  position: relative;
  margin-right: 7px;
}

.service-3d-lead .is-border::after {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background-color: #00a0e9;
  position: absolute;
  top: 100%;
  left: -17px;
}

.service-3d-container {
  text-align: center;
  padding: 0 9.09%;
  position: relative;
}

.service-3d-head {
  color: #fff;
  padding: 50px 0;
}

.service-3d-ttl {
  font-size: 3.5rem;
  letter-spacing: 0.04em;
  color: #19aafe;
  text-shadow: 0px 0px 20px #007eff, 0px 0px 20px #007eff;
}

.service-3d-txt {
  font-size: 2.0rem;
  margin: 28px auto 38px;
}

.service-3d-txt2 {
  font-size: 1.6rem;
}

.service-3d-img {
  margin-bottom: 85px;
}

@media (max-width: 767px) {
  .service-3d {
    padding-bottom: 33px;
    margin-top: 40px;
  }

  .service-3d-head {
    padding: 25px 0;
  }

  .service-3d-lead {
    font-size: 1.6rem;
    padding: 6px 17px 7px;
  }

  .service-3d-lead .is-border {
    font-size: 1.35rem;
  }

  .service-3d-lead .is-border::after {
    width: 40px;
  }

  .service-3d-ttl {
    font-size: 2.5rem;
  }

  .service-3d-txt {
    font-size: 1.5rem;
    margin: 14px auto 19px;
  }

  .service-3d-txt2 {
    font-size: 1.35rem;
  }

  .service-3d-img {
    margin-bottom: 42px;
  }
}