@charset "UTF-8";
/* Scss Document */
:root {
  --pc: 1000px;
  --sp: 999px;
  --fs48: 4.8rem;
  --fs40: 4rem;
  --fs36: 3.6rem;
  --fs28: 2.8rem;
  --fs22: 2.2rem;
  --fs20: 2.0rem;
  --fs18: 1.8rem;
  --fs16: 1.6rem;
  --fs14:1.4rem;
  --fs12:1.2rem; }

@media (max-width: 999px) {
  :root {
    --fs48: 2.6rem;
    --fs40: 2.2rem;
    --fs36: 2.4rem;
    --fs28: 2.2rem;
    --fs22: 2.0rem;
    --fs20: 1.8rem;
    --fs18: 1.4rem;
    --fs16: 1.4rem;
    --fs14: 1.2rem;
    --fs12: 1.0rem; } }
/* 
---------------------------------------
メインビジュアル
---------------------------------------
*/
@media (max-width: 999px) {
  #kv {
    padding-bottom: 100px; } }

#kv .boxs {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100vh;
  position: relative; }

#kv .boxs .boxL {
  position: relative;
  z-index: 1;
  margin-left: calc(120/1920*100%); }
  @media (max-width: 999px) {
    #kv .boxs .boxL {
      top: 0;
      transform: translate(0, -50%);
      -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%); } }

#kv .boxs .ttl {
  font-size: 10.5rem;
  color: #fff;
  line-height: 1.247787610619469; }
  @media (max-width: 999px) {
    #kv .boxs .ttl {
      font-size: 32px;
      margin-bottom: 10px; } }

#kv .boxs .txt {
  font-size: 11.5rem;
  -webkit-text-stroke: 2px white;
  color: transparent;
  line-height: 1; }
  @media (max-width: 999px) {
    #kv .boxs .txt {
      font-size: 30px;
      margin-bottom: 10px;
      -webkit-text-stroke: 1px white; } }

#kv .bg {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: url(../img/home/fv_bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  transition: 0.3s;
  z-index: -2; }
  @media (max-width: 999px) {
    #kv .bg {
      min-height: -webkit-fill-available;
      background: url(../img/home/fv_bg_sp.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center; } }

#kv.change .bg {
  background: url(../img/home/fv_bg_change.jpg);
  transition: 0.3s;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: -1; }
  @media (max-width: 999px) {
    #kv.change .bg {
      min-height: -webkit-fill-available;
      background: url(../img/home/fv_bg_change_sp.jpg);
      width: 100%;
      height: 100vh;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center; } }

.keep {
  position: absolute;
  z-index: 1;
  display: flex;
  align-content: center;
  justify-content: center;
  bottom: 5rem;
  right: 5rem;
  opacity: 0; }
  .keep:hover i {
    transform: scale(1.2);
    transition: all 0.3s; }
  @media (max-width: 999px) {
    .keep {
      right: inherit;
      left: 5%; } }

.is-active .keep {
  opacity: 1;
  transition: all 0.3s;
  transition-delay: 1.6s; }

.keep_around {
  animation: rotation 10s infinite linear;
  width: 20rem; }
  @media (max-width: 999px) {
    .keep_around {
      width: 10rem; } }

@keyframes rotation {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(359deg); } }
.keep .fa-arrow-down-long {
  font-size: 4rem;
  color: #fff;
  transition: all 0.3s; }
  @media (max-width: 999px) {
    .keep .fa-arrow-down-long {
      font-size: 2.4rem; } }

.keepBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%); }

.matrix .bg-wrap,
.matrix .bg-wrap .inn {
  display: block; }

.matrix .bg-wrap {
  overflow: hidden;
  opacity: 0; }

.matrix .bg-wrap + .bg-wrap {
  margin-top: 10px; }

.matrix .bg-wrap .inn {
  opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 100);
  transition: 1s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 1s; }

.is-active .matrix .bg-wrap {
  opacity: 1; }

.is-active .matrix .bg-wrap .inn {
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0); }

.slideInLeft,
.slideinRight {
  opacity: 0; }

.is-active .slideInLeft {
  animation: slideInLeft 1s cubic-bezier(0.25, 1, 0.5, 1) forwards; }

@keyframes slideInLeft {
  0% {
    transform: translateX(-18rem);
    opacity: 0; }
  100% {
    transform: translateX(0); }
  40%,100% {
    opacity: 1; } }
.is-active .slideinRight {
  animation: slideInRight 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 0.3s; }

@keyframes slideInRight {
  0% {
    transform: translateX(18rem);
    opacity: 0; }
  100% {
    transform: translateX(0); }
  40%,100% {
    opacity: 1; } }
#about {
  opacity: 0;
  width: calc(900 / 1400 * 100%);
  margin: 0 0 24rem calc(400 / 1920 * 100%);
  transition: 0.3s; }
  @media (max-width: 999px) {
    #about {
      max-width: 375px;
      width: 90%;
      margin: 0 auto 0; } }

#about .sttl {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  font-size: 3.6rem;
  margin-bottom: 5rem;
  color: #fff; }
  @media (max-width: 999px) {
    #about .sttl {
      font-size: 24px;
      margin-bottom: 30px;
      text-align: center;
      line-height: 1.5; } }

#about .stxt {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  font-size: 2rem;
  color: #fff; }
  @media (max-width: 999px) {
    #about .stxt {
      font-size: 14px; } }

#about .btn {
  opacity: 0;
  transition: opacity 1s ease-in-out; }
  @media (max-width: 999px) {
    #about .btn {
      margin: 0 auto; } }

#about .stxtBox {
  margin: 0 0 0 auto;
  width: calc(900 / 1400 * 100%);
  padding-top: 12rem; }
  @media (max-width: 999px) {
    #about .stxtBox {
      margin: 0 auto;
      width: 100%;
      padding-top: 6rem; } }

.change #about {
  opacity: 1;
  transition: 0.6s; }

.change #about .sttl {
  opacity: 1;
  transition-delay: 0.2s; }

.change #about .stxt {
  opacity: 1;
  transition-delay: 0.8s; }

.change #about .btn {
  opacity: 1;
  transition-delay: 0.8s; }

[id^="home"] {
  background: #fff; }

/* 
---------------------------------------
home02
---------------------------------------
*/
#home02 {
  padding: 16rem 0;
  position: relative;
  overflow: hidden; }
  #home02 .bgDeco {
    position: absolute;
    top: 50%;
    right: calc(1046 / 1920 * -100%);
    -webkit-transform: translate(0, -50%);
    z-index: 0;
    width: calc(2806 / 1920 * 100%);
    max-width: max-content; }
  @media (max-width: 999px) {
    #home02 {
      padding: 60px 0; } }
  #home02 .layer {
    position: relative;
    z-index: 1; }
  #home02 .ttlDeco {
    font-size: 9.6rem;
    color: #0097EA;
    line-height: 1.25;
    margin-bottom: 2rem; }
    @media (max-width: 999px) {
      #home02 .ttlDeco {
        font-size: 36px;
        margin-bottom: 0.5rem; } }
  #home02 .ttl {
    font-size: 2rem; }
    @media (max-width: 999px) {
      #home02 .ttl {
        font-size: 14px; } }
  @media (max-width: 999px) {
    #home02 .btn {
      margin: 0 auto; } }

.image-slider {
  width: 100vw;
  overflow: hidden;
  position: relative; }

.image-track {
  display: flex;
  min-width: 200%;
  animation: slide 20s linear infinite; }

@media (max-width: 999px) {
  .image-track {
    min-width: 600%; } }
.image-track img {
  width: 50%; }

@keyframes slide {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-50%); } }
/* 


/* 
---------------------------------------
home03
---------------------------------------
*/
#home03 {
  background: linear-gradient(#D4EBFB, #fff);
  padding: 24rem 0; }
  @media (max-width: 999px) {
    #home03 {
      padding: 6rem 0 22rem; } }
  #home03 .boxs {
    position: relative;
    display: flex;
    z-index: 1; }
  #home03 .ttlBox {
    position: absolute;
    top: 68%;
    left: 0;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    z-index: 1; }
    @media (max-width: 999px) {
      #home03 .ttlBox {
        position: absolute;
        top: 93%;
        left: 0;
        transform: inherit;
        -webkit-transform: inherit;
        width: 100%; } }
  #home03 .ttlDeco {
    font-size: 8.6rem;
    color: #0097EA;
    line-height: 1.25;
    margin-bottom: 2rem; }
    @media (max-width: 999px) {
      #home03 .ttlDeco {
        font-size: 36px;
        margin-bottom: 0.5rem; } }
  #home03 .ttl {
    font-size: 2rem;
    margin-bottom: 6rem; }
    @media (max-width: 999px) {
      #home03 .ttl {
        font-size: 14px;
        margin-bottom: 3rem; } }
  #home03 .deco {
    position: absolute;
    top: -9rem;
    left: calc(100 / 1400 * -100%);
    z-index: -1;
    width: calc(496 / 1400 * 100%); }
    @media (max-width: 999px) {
      #home03 .deco {
        top: -3rem;
        left: -4rem; } }
  #home03 .pic {
    width: calc(1140 / 1400 * 100%);
    margin: 0 0 0 auto; }
    @media (max-width: 999px) {
      #home03 .pic {
        width: 90%; } }
  @media (max-width: 999px) {
    #home03 .btn {
      margin: 0 auto 0; } }

.marquee-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  margin-top: -8rem;
  margin-bottom: -6rem;
  z-index: 1;
  position: relative; }
  @media (max-width: 999px) {
    .marquee-wrapper {
      margin-top: -3rem;
      margin-bottom: -3rem; } }

.marquee-inner {
  display: flex;
  width: max-content;
  animation: scrollRight 60s linear infinite; }

.marquee-track {
  display: flex; }

.marquee-track span {
  display: inline-block;
  white-space: nowrap;
  padding-right: 2rem;
  font-size: 11.5rem;
  -webkit-text-stroke: 1px #0097EA;
  color: transparent;
  line-height: 1; }
  @media (max-width: 999px) {
    .marquee-track span {
      font-size: 6rem; } }

@keyframes scrollRight {
  0% {
    transform: translateX(-50%); }
  100% {
    transform: translateX(0%); } }
/* 
---------------------------------------
home04
---------------------------------------
*/
#home04 {
  position: relative;
  padding: 16rem 0; }
  @media (max-width: 999px) {
    #home04 {
      padding: 6rem 0; } }
  #home04 .bg {
    position: absolute;
    top: 0;
    background: linear-gradient(to top, #fff, #F7F7F7);
    width: 100%;
    height: calc(545 / 1920 * 100%);
    z-index: 0; }
  #home04 .boxs {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1; }
    @media (max-width: 999px) {
      #home04 .boxs {
        flex-direction: column; } }
  #home04 .pic {
    width: calc(900 / 1920 * 100%); }
    @media (max-width: 999px) {
      #home04 .pic {
        width: 90%; } }
  #home04 .box {
    width: calc(652 / 1400 * 100%);
    margin-right: calc(260 / 1920 * 100%);
    margin-left: calc(108 / 1920 * 100%); }
    @media (max-width: 999px) {
      #home04 .box {
        width: 90%;
        margin: 0 auto; } }
  #home04 .ttlDeco {
    font-size: 22rem;
    line-height: 1.25;
    margin-left: -14.5rem;
    margin-bottom: -3.5rem;
    color: rgba(0, 151, 234, 0.1); }
    @media (max-width: 999px) {
      #home04 .ttlDeco {
        font-size: 10rem;
        margin-left: 0;
        margin-bottom: -6rem;
        text-align: right; } }
  #home04 .ttl {
    font-size: 4.8rem;
    color: #0097EA; }
    @media (max-width: 999px) {
      #home04 .ttl {
        font-size: 2.4rem; } }
  #home04 .pic2 {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
    width: calc(400 / 1920 * 100%);
    height: auto; }
    @media (max-width: 999px) {
      #home04 .pic2 {
        display: none; } }
  @media (max-width: 999px) {
    #home04 .btn {
      margin: 0 auto; } }

.acdns {
  border-bottom: 2px solid #F0F0F0; }
  .acdns .acdn-q {
    padding: 3rem 0;
    border-top: 2px solid #F0F0F0;
    color: #0C70B4;
    display: flex;
    align-items: center;
    transition: 0.3s all; }
    @media (max-width: 999px) {
      .acdns .acdn-q {
        padding: 2rem 0; } }
    .acdns .acdn-q:hover {
      cursor: pointer;
      color: #0097EA;
      transition: 0.3s all; }
    .acdns .acdn-q span {
      font-size: 3rem;
      margin-right: 1rem;
      line-height: 1.25; }
  .acdns .acdn-a {
    display: flex; }
    .acdns .acdn-a .data {
      display: flex;
      align-items: center;
      margin-bottom: 3rem; }
    .acdns .acdn-a span {
      font-size: 3rem;
      margin-right: 1rem;
      line-height: 1.25; }
  .acdns .qTxt {
    margin-right: 1rem; }
  .acdns .icons {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 3.6rem;
    height: 3.6rem;
    background: #0097EA;
    border-radius: 999px;
    margin: 0 0 0 auto; }
    @media (max-width: 999px) {
      .acdns .icons {
        min-width: 3rem;
        height: 3rem; } }
    .acdns .icons i {
      position: absolute;
      color: #fff; }
  .acdns .open .fa-plus {
    display: none; }

/* 
---------------------------------------
home05
---------------------------------------
*/
#home05 {
  width: 100%;
  height: 120rem;
  position: relative;
  overflow: hidden;
  background-attachment: fixed;
  background-image: url("../img/home/05_bg.jpg");
  background-size: cover;
  background-position-y: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -1px 0; }
  @media (max-width: 999px) {
    #home05 {
      background-attachment: inherit;
      background-image: url("../img/home/05_bg_sp.jpg");
      background-position-y: 10%; } }
  @media (max-width: 999px) {
    #home05 {
      height: 50rem; } }
  #home05 .bgTop {
    position: absolute;
    top: 0;
    width: 100%;
    height: auto; }
  #home05 .bgBottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto; }
  #home05 .ttlDeco {
    font-size: 8.6rem;
    color: #fff;
    line-height: 1.25;
    margin-bottom: 2rem; }
    @media (max-width: 999px) {
      #home05 .ttlDeco {
        font-size: 36px;
        margin-bottom: 0.5rem; } }
  #home05 .ttl {
    font-size: 2rem;
    color: #fff; }
    @media (max-width: 999px) {
      #home05 .ttl {
        font-size: 14px;
        margin-bottom: 2rem; } }
  #home05 .boxs {
    display: flex;
    align-items: center;
    width: 96%;
    margin: 0 auto;
    justify-content: center; }
    @media (max-width: 999px) {
      #home05 .boxs {
        flex-direction: column;
        align-items: flex-start;
        width: 89.75%; } }
  #home05 .ttlBox {
    margin-right: 3vw; }
    @media (max-width: 999px) {
      #home05 .ttlBox {
        margin-right: 0;
        margin-bottom: 2rem; } }
  #home05 .txt {
    color: #fff; }
  @media (max-width: 999px) {
    #home05 .btn {
      margin: 0 auto; } }

/* ====================================================
LOADING
==================================================== */
.loadingLine {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1001;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: left;
  transform-origin: left;
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transition-duration: .6s;
  transition-duration: .6s;
  -webkit-transition-timing-function: cubic-bezier(0.68, 0.01, 0.65, 0.98);
  transition-timing-function: cubic-bezier(0.68, 0.01, 0.65, 0.98);
  -webkit-transition-property: transform;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  z-index: 1000; }

.is-active .loadingLine {
  display: none; }

.loadingLine01 {
  background: #fff;
  z-index: 1004; }

.loadingLine02 {
  background: linear-gradient(45deg, #01D1FB, #0650E8);
  z-index: 1003;
  -webkit-transition-delay: .1s;
  transition-delay: .1s; }

.loadingLine03 {
  background: linear-gradient(45deg, #01D1FB, #0650E8);
  z-index: 1002;
  -webkit-transition-delay: .2s;
  transition-delay: .2s; }

.loadingLine04 {
  background: #fff;
  z-index: 1001;
  -webkit-transition: none;
  transition: none; }

.loadFin .loadingLine {
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transform: scaleY(0);
  transform: scaleY(0); }

/*========= LoadingのためのCSS ===============*/
/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center; }

#splash.is-active {
  opacity: 0;
  visibility: hidden;
  display: none; }

#body.is-active {
  opacity: 1 !important; }

/*========= LoadingのためのCSS ===============*/
/* Loading背景画面設定　*/
body.loadbg {
  background: #fff; }

body.is-active {
  background: #fff;
  /*遷移アニメーションと同じ色を指定*/ }

body.appear {
  background: #fff;
  /*画面を開いた後の背景色を指定*/ }

/*画面遷移の後現れるコンテンツ設定*/
@keyframes PageAnimeAppear {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/*ローディング画面上アニメーションのスタイル*/
#loader-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 9998;
  overflow: hidden; }

.loader {
  opacity: 0;
  animation: fadeUpAnime 1.6s 0.4s 1 forwards ease;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); }

@keyframes fadeUpAnime {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }