@charset "UTF-8";
:root{
  --card-background-color: #222426;
  --card-inner-z-index: 100;
}

#mobile,
#mobile .card-eyecatch{
  background-image: url(../img/mobile3.jpg);
}
#itsolution,
#itsolution .card-eyecatch{
  background-image: url(../img/web.jpg);
}
#officedesign,
#officedesign .card-eyecatch{
  background-image: url(../img/construction.jpg);
}
#japanc,
#japanc .card-eyecatch{
  background-image: url(../img/bonsai.jpg);
}

.card{
  position: relative;

  width: var(--card-width);
  height: var(--service-card-height);
  background-color: var(--card-background-color);

  overflow: hidden;
}
.card-inner{
  position: absolute;
  z-index: var(--card-inner-z-index);
  top:0;
  left:0;
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  width: var(--card-width);
  height: var(--service-card-height);
  padding: 192px 0px 40px;
  word-break: break-all;
}
#officedesign .card-inner,
#japanc .card-inner{
  padding-top: 144px;
}
.card-content{
  display: flex;
  flex-direction: column;
}
/*-----mobile-----*/
#mobile:hover .cardbar{
  width: 0;
  transition: 1s linear;
}
#mobile .border{
  z-index: 11;
  position: absolute;
  top: 25px;
  left: 25px;

  width: 400px;
  height: 670px;
  border-radius: 60px;
}
#mobile:hover .border{
  animation : borderanime 1s linear 0.6s forwards;
}
@keyframes borderanime{
  0%{
   border: solid 4px #fff;
   clip-path: polygon(50% 50%, 100% 51%, 100% 49%);
  }
  26%{
   clip-path: polygon(50% 50%, 100% 92%, 100% 8%);
  }
  27%{
   clip-path: inset(0 0 0 100%);
  }
  73%{
   clip-path: inset(0 0 0 2%);
  }
  74%{
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 92%, 50% 50%, 0 8%);
  }
  80%{
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 80%, 50% 50%, 0 20%);
  }
  90%{
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 65%, 50% 50%, 0 35%);
  }
  100%{
   border: solid 4px #ffffffbb;
   clip-path: inset(0);
  }
}
#mobile .appicon{
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background-color: transparent;
}
#mobile:hover .appicon{
  animation: appiconanime 1s 1 forwards;
}
#mobile .appicon:nth-child(3){
  top: 100px;
  left: 55px;

  animation-delay: 2s;
}
#mobile .appicon:nth-child(4){
  top: 100px;
  left: 148px;

  animation-delay: 2.2s;
}
#mobile .appicon:nth-child(5){
  top: 100px;
  right: 148px;

  animation-delay: 2.4s;
}
#mobile .appicon:nth-child(6){
  top: 100px;
  right: 55px;

  animation-delay: 2.6s;
}
#mobile .appicon:nth-child(7){
  top: 193px;
  left: 55px;

  animation-delay: 2.1s;
}
#mobile .appicon:nth-child(8){
  top: 193px;
  left: 148px;

  animation-delay: 2.3s;
}
#mobile .appicon:nth-child(9){
  top: 193px;
  right: 148px;

  animation-delay: 2.5s;
}
#mobile .appicon:nth-child(10){
  top: 193px;
  right: 55px;

  animation-delay: 2.7s;
}
#mobile .appicon:nth-child(11){
  top: 286px;
  left: 55px;

  animation-delay: 2.2s;
}
#mobile .appicon:nth-child(12){
  top: 286px;
  left: 148px;

  animation-delay: 2.4s;
}
@keyframes appiconanime{
  0%{
    background-color: #ccc;
    opacity: 0;
  }
  30%{
    opacity: 1;
    transform: scale(1.1, 0.9) translate(0%, 5%);
  }
  50% {
    opacity: 1;
    transform: scale(0.95, 0.95) translate(0%, -10%);
  }
  100%{
    opacity: 0.4;
    transform: scale(1, 1) translate(0%, 0%);
    background-color: #58535e;
  }
}

/*-----ist-----*/
#itsolution{
  --circle-z-index: 12;
  --sun-z-index: 13;
}
#itsolution .card{
  position: relative;
  overflow: hidden;
}
#itsolution .horizon-sun{
  z-index: var(--sun-z-index);
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  margin: 0 auto;
  opacity: 0;

  width: 55px;
  height: 55px;
  border-radius: 50%;

  background-color: #4b86a0;
  transform: rotateZ(0);
}
#itsolution:hover .horizon-sun{
  transition: 0.3s all;
  opacity: 1;
  animation: horizonanime 2s infinite linear alternate;
}
@keyframes horizonanime{
  0%{
    transform: rotate(0deg) scale(1);

    border:groove 2px rgb(75, 134, 160, 0.5);
  }
  20%{
    transform: rotate(72deg) scale(1.05);
  }
  40%{
    transform: rotate(144deg) scale(1);
  }
  50%{
    border:groove 3px rgb(75, 134, 160, 0.5);
  }
  60%{
    transform: rotate(216deg) scale(0.9);
  }
  80%{
    transform: rotate(288deg) scale(1);
  }
  100%{
    transform: rotate(360deg) scale(1.1);

    border:groove 2px rgb(75, 134, 160, 0.5);

    box-shadow: 0 0 60px 3px #122832,
              0 0 45px 3px #408dae,
              0 0 30px 2px #52b5df,
              0 0 30px 5px #377995 inset;
  }
}
#itsolution .circle{
  z-index: var(--circle-z-index);
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  margin: 0 auto;
  opacity: 0;

  width: 75px;
  height: 75px;
  border-radius: 50%;
  
  background: linear-gradient(to right, #377995 10%, var(--card-background-color) 42%);
}
#itsolution:hover .circle{
  transition: 0.3s all;
  opacity: 1;
  animation: semicircleanime 2s infinite linear;
}
@keyframes semicircleanime{
  0%{
    transform: rotate(0deg);
    border:solid 0px rgb(75, 134, 160, 0.5);
  }
  50%{
    border:solid 3px rgb(75, 134, 160, 0.3);
  }
  100%{
    transform: rotate(360deg);
  }
}
#itsolution .wave{
  z-index: var(--sun-z-index);
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  margin: 0 auto;
  opacity: 0;

  width: 55px;
  height: 55px;
  border-radius: 50%;

  border: solid 1px #fff;

  transform: rotateZ(0);
}
#itsolution:hover .wave{
  transition: 0.3s all;
  opacity: 1;
  animation: waveanime 4s infinite ease-out;
}
@keyframes waveanime{
  0%{
    transform: scale(1);
    opacity: 0.4;
  }
  100%{
    transform: scale(7);
    opacity: 0;
  }
}
#itsolution .wave2{
  z-index: var(--sun-z-index);
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  margin: 0 auto;
  opacity: 0;

  width: 55px;
  height: 55px;
  border-radius: 50%;

  border: solid 1px #4b86a0;

  transform: rotateZ(0);
}
#itsolution:hover .wave2{
  transition: 0.3s all;
  opacity: 1;
  animation: waveanime2 1s infinite ease-in alternate;
}
@keyframes waveanime2{
  0%{
    transform: scale(1);
    opacity: 0.4;
  }
  30%{
    border: dotted 2px #4b86a0;
  }
  100%{
    transform: scale(2);
    opacity: 0.2;
  }
}
#itsolution .wave3-wrap{
  z-index: var(--sun-z-index);
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  margin: 0 auto;

  width: 95px;
}
#itsolution .wave3{
  position: relative;
  width: 95px;
  height: 95px;
  border-radius: 50%
}
#itsolution .wave3 .quarter-wave{
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 0;

  border: solid 6px transparent;
  filter: blur(1px);
}
#itsolution .wave3 .quarter-wave:nth-child(1){
  border-top-color: #4b86a0;
}
#itsolution:hover .wave3 .quarter-wave:nth-child(1){
  transition: 0.3s all;
  opacity: 1;
  animation: waveanime3 1.2s infinite linear;
}

#itsolution .wave3 .quarter-wave:nth-child(2){
  border-bottom-color: #4b86a0;
}
#itsolution:hover .wave3 .quarter-wave:nth-child(2){
  transition: 0.3s all;
  opacity: 1;
  animation: waveanime3 1.2s infinite linear alternate-reverse;
}
@keyframes waveanime3{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
/*-----office design-----*/
#officedesign{
  --officedesign-metalcolor: #58535e;
  --officeanime-time: 5s;
}
#officedesign:hover .officecardbar{
  position: relative;
  animation: cardbaranime var(--officeanime-time) 1.2s forwards;
}
@keyframes cardbaranime{
  0%{
    left: 0;
  }
  5%,25%{
    left: calc(276px / -4);
  }
  30%,50%{
    left: calc(276px / -4 * 2);
  }
  55%,75%{
    left: calc(276px / -4 * 3);
  }
  85%,100%{
    left: -276px;
  }
}
#officedesign .spark-wrap{
  position: absolute;
  z-index: 14;
  top: 40%;
  left: 62%;
}
#officedesign:hover .spark-wrap{
  animation: spark-wrapanime var(--officeanime-time) 0.8s;
}
@keyframes spark-wrapanime{
  0%,24%{
    left: 62%;
  }
  25%,49%{
    left: 47%;
  }
  50%,74%{
    left: 32%;
  }
  75%,100%{
    left: 17%;
  }
}
#officedesign .spark{
  position: absolute;
  width: 0px;
  height: 2px;
  filter: blur(1px);

  transform-origin: bottom left;
  background: #e04020;
}
#officedesign .spark:nth-child(1){
  top: 0px;
  left: -7px;
}
#officedesign:hover .spark:nth-child(1){
  animation: sparkanime var(--officeanime-time) 0.8s;
}
@keyframes sparkanime{
  0%,28%,56%,84%{
    opacity: 0;
    width: 0;
    transform: translate(0%,0%) rotate(-75deg);
    transform-origin: bottom left;
  }
  2%,30%,58%,86%{
    opacity: 1;
    width: 13px;
    transform: translate(0%,0%) rotate(-75deg);
    transform-origin: bottom left;
  }
  12%,40%,68%,96%{
    opacity: 1;
    width: 13px;
    transform: translate(30px,-120px) rotate(-75deg);
    transform-origin: top right;
  }
  14%,42%,72%,98%{
    opacity: 0;
    width: 0;
    transform: translate(30px,-120px) rotate(-75deg);
    transform-origin: top right;
  }
  23%,50%,79%,100%{
    opacity: 0;
    transform: translate(0%,0%) rotate(-75deg);
    transform-origin: top right;
  }
}
#officedesign .spark:nth-child(2){
  top:3px;
  left: 6px;
}
#officedesign:hover .spark:nth-child(2){
  animation: sparkanime2 var(--officeanime-time) 0.8s;
}
@keyframes sparkanime2{
  0%,28%,56%,84%{
    opacity: 0;
    width: 0;
    transform: translate(0%,0%) rotate(-45deg);
    transform-origin: bottom left;
  }
  2%,30%,58%,86%{
    opacity: 1;
    width: 17px;
    transform: translate(0%,0%) rotate(-45deg);
    transform-origin: bottom left;
  }
  12%,40%,68%,96%{
    opacity: 1;
    width: 17px;
    transform: translate(80px,-80px) rotate(-45deg);
    transform-origin: top right;
  }
  14%,42%,72%,98%{
    opacity: 0;
    width: 0;
    transform: translate(80px,-80px) rotate(-45deg);
    transform-origin: top right;
  }
  23%,50%,79%,100%{
    opacity: 0;
    width: 0;
    transform: translate(0%,0%) rotate(-45deg);
    transform-origin: top right;
  }
}
#officedesign .spark:nth-child(3){
  top: 10px;
  left: 5px;
}
#officedesign:hover .spark:nth-child(3){
  animation: sparkanime3 var(--officeanime-time) 0.8s;
}
@keyframes sparkanime3{
  0%,28%,56%,84%{
    opacity: 0;
    width: 0;
    transform: translate(0%,0%) rotate(45deg);
    transform-origin: bottom left;
  }
  2%,30%,58%,86%{
    opacity: 1;
    width: 25px;
    transform: translate(0%,0%) rotate(45deg);
    transform-origin: bottom left;
  }
  12%,40%,68%,96%{
    opacity: 1;
    width: 25px;
    transform: translate(80px,80px) rotate(45deg);
    transform-origin: top right;
  }
  14%,42%,72%,98%{
    opacity: 0;
    width: 0;
    transform: translate(80px,80px) rotate(45deg);
    transform-origin: top right;
  }
  23%,50%,79%,100%{
    opacity: 0;
    width: 0;
    transform: translate(0%,0%) rotate(45deg);
    transform-origin: top right;
  }
}
#officedesign .spark:nth-child(4){
  top: 10px;
  left: 0px;
}
#officedesign:hover .spark:nth-child(4){
  animation: sparkanime4 var(--officeanime-time) 0.8s;
}
@keyframes sparkanime4{
  0%,28%,56%,84%{
    opacity: 0;
    width: 0;
    transform: translate(0%,0%) rotate(0deg);
    transform-origin: bottom left;
  }
  2%,30%,58%,86%{
    opacity: 1;
    width: 25px;
    transform: translate(0%,0%) rotate(0deg);
    transform-origin: bottom left;
  }
  12%,40%,68%,96%{
    opacity: 1;
    width: 25px;
    transform: translate(90px,0%) rotate(0deg);
    transform-origin: top right;
  }
  14%,42%,72%,98%{
    opacity: 0;
    width: 0;
    transform: translate(90px,0%) rotate(0deg);
    transform-origin: top right;
  }
  23%,50%,79%,100%{
    opacity: 0;
    width: 0;
    transform: translate(0%,0%) rotate(0deg);
    transform-origin: top right;
  }
}
#officedesign .hammer-wrap{
  position: absolute;
  z-index: 13;
  top: 280px;
  left: 65%;
  opacity: 0;

  width: 56px;
  height: 96px;

  transform: rotate(-18deg);
  transform-origin: center center;
}
#officedesign:hover .hammer-wrap{
  animation: hammeranime var(--officeanime-time) linear forwards;
}
@keyframes hammeranime{
  0%{
    opacity: 1;
    transform: rotate(0);
  }
  9%{
    transform: rotate(30deg);
  }
  16%,45%,72%{
    opacity: 1;
    transform: rotate(-18deg);
  }
  21%,50%,77%{
    opacity: 0;
  }
  26%{
    opacity: 0;
    left: 65%;
  }
  27%{
    opacity: 1;
    left: 50%;
    transform: rotate(0);
  }
  36%{
    transform: rotate(30deg);
  }
  53%{
    opacity: 0;
    left: 50%;
  }
  54%{
    opacity: 1;
    left: 35%;
    transform: rotate(0);
  }
  63%{
    transform: rotate(30deg);
  }
  80%{
    opacity: 0;
    left: 35%;
  }
  81%{
    opacity: 1;
    left: 20%;
    transform: rotate(0);
  }
  90%{
    transform: rotate(30deg);
  }
  99%{
    opacity: 1;
    left: 20%;
    transform: rotate(-18deg);
  }
  100%{
    opacity: 0;
  }
}
#officedesign .hammer{
  position: relative;
}
#officedesign .hammer .metal{
  position: absolute;
  z-index: 12;
  width: 56px;
  height: 35px;
  border-radius: 4px;

  background: var(--officedesign-metalcolor);
}
#officedesign .hammer .handle{
  position: absolute;
  top: -8px;
  left: 22px;
  z-index: 11;
  width: 12px;
  height: 96px;
  border-radius: 2px;

  background: #fbcf8e;
}
/*-----japan culture-----*/
#japanc{
  --circle-radius: 8px;
  --petal-centerradius: 13px;
  --petal-color: #ed514e;
  --stamen-color: #fff;
  --sin18: 0.31;
  --cos18: 0.95;
  --sin306: -0.80;
  --cos306: 0.59;
  --cloud-basement-width: 200px;
  --cloud-animation-time: 2s;
  --cloud-height: 25px;
  --cloud-color: #efefef;
}

/*くも*/
#japanc .cloud{
  position: absolute;
  width: var(--cloud-basement-width);
  height: 200px;

  /*inline-block特有の隙間をなくすため*/
  font-size:0;
}
#japanc .topright,
#japanc .bottomright{
  right: calc(-1 * var(--cloud-basement-width));
}
#japanc .topleft{
  left: calc(-1 * var(--cloud-basement-width));
}
#japanc:hover .topright,
#japanc:hover .bottomright{
  animation: cloudanime-right var(--cloud-animation-time) 1 ease-in-out forwards;
}
#japanc:hover .topleft{
  animation: cloudanime-left var(--cloud-animation-time) 1 ease-in-out forwards;
}

#japanc .cloud-part:nth-child(2n+1){
  display: inline-block;
  height: var(--cloud-height);

  background-color: var(--cloud-color);
  border-radius: 13px;
}
/*雲へこみ*/
#japanc .cloud-part:nth-child(2n){
  /*背景色の半円を左右に移動*/
  display: inline-flex;
  justify-content: space-between;
  align-items: center;

  /*へこみの横幅*/
  width: 50px;
  height: var(--cloud-height);

  background-color: var(--cloud-color);
}
#japanc .cloud-inset{
  display: inline-block;
  width: 12px;
  height: var(--cloud-height);

  background-color: var(--card-background-color);
}
#japanc .cloud-inset:nth-child(1){
  /*雲へこみ左*/
  border-radius: 0 12px 12px 0;
}
#japanc .cloud-inset:nth-child(2){
  /*雲へこみ*/
  border-radius: 12px 0 0 12px;
}

/*右上の雲*/
#japanc .topright{
  top: 40px;
}
#japanc .topright .cloud-part:nth-child(1){
  width: 150px;
  margin-left: 25px;
}
#japanc .topright .cloud-part:nth-child(2){
  margin-left: 50px;
}
#japanc .topright .cloud-part:nth-child(3){
  width: 200px;
}
/*右下の雲*/
#japanc .bottomright{
  z-index: 11;
  top: 265px;
  animation-delay: 0.7s !important;
}
#japanc .bottomright .cloud-part:nth-child(1){
  width: 125px;
  margin-left: 75px;
}
#japanc .bottomright .cloud-part:nth-child(2){
  margin-left: 50px;
}
#japanc .bottomright .cloud-part:nth-child(3){
  width: 175px;
}
#japanc .bottomright .cloud-part:nth-child(4){
  margin-left: 75px;
}
#japanc .bottomright .cloud-part:nth-child(5){
  width: 125px;
  margin-left: 75px;
}
/*左上の雲*/
#japanc .topleft{
  top: 60px;
  animation-delay: 0.4s !important;
}
#japanc .topleft .cloud-part:nth-child(1){
  width: 175px;
  margin-left: 25px;
}
#japanc .topleft .cloud-part:nth-child(2){
  margin-left: 100px;
}
#japanc .topleft .cloud-part:nth-child(3){
  width: 100px;
  margin-left: 100px;
}

@keyframes cloudanime-right{
  0%{
    right: calc(-1 * var(--cloud-basement-width));
  }
  100%{
    right: -30px;
  }
}
@keyframes cloudanime-left{
  0%{
    left: calc(-1 * var(--cloud-basement-width));
  }
  100%{
    left: -30px;
  }
}


/*梅の花*/
#japanc .ume-wrap{
  position: absolute;
  z-index: 12;

  opacity: 0;
}
#japanc:hover .ume-wrap{
  animation: umeanime 7s infinite 3s;
}
#japanc .ume{
  position: relative;

  display: inline-block;
  width: calc(calc(var(--circle-radius) * 2) + 1px);
  height: calc(calc(var(--circle-radius) * 2) + 1px);
  border-radius: 50%;
  background-color: var(--petal-color);

  box-shadow: 0 calc(var(--petal-centerradius) * -1) 0 0 var(--petal-color),
              calc(var(--cos18) * var(--petal-centerradius)) calc(calc(var(--sin18) * var(--petal-centerradius)) * -1) 0 0 var(--petal-color),
              calc(calc(var(--cos18) * var(--petal-centerradius)) * -1) calc(calc(var(--sin18) * var(--petal-centerradius)) * -1) 0 0 var(--petal-color),
              calc(var(--cos306) * var(--petal-centerradius)) calc(calc(var(--sin306) * var(--petal-centerradius)) * -1) 0 0 var(--petal-color),
              calc(calc(var(--cos306) * var(--petal-centerradius)) * -1) calc(calc(var(--sin306) * var(--petal-centerradius)) * -1) 0 0 var(--petal-color);
}
#japanc .stamen{
  position: absolute;
  top: -2px;
  left:0;
  right:0;
  margin: auto;
  display: inline-block;
  width: 2px;
  height: calc(var(--petal-centerradius) - 2px);
  background-color: var(--stamen-color);
  transform-origin: bottom;
}
#japanc .stamen::before{
  content: '';
  position: absolute;
  top: 0;
  left: -1px;

  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--stamen-color);
}
#japanc .stamen:nth-child(2){
  transform: rotate(72deg);
}
#japanc .stamen:nth-child(3){
  transform: rotate(144deg);
}
#japanc .stamen:nth-child(4){
  transform: rotate(216deg);
}
#japanc .stamen:nth-child(5){
  transform: rotate(288deg);
}
/*梅の花の位置*/
#japanc .ume-wrap:nth-child(2){
  top: 30px;
  right: 150px;

}
#japanc .ume-wrap:nth-child(3){
  top: 20px;
  left: 150px;

  animation-delay: 3s;
}
#japanc .ume-wrap:nth-child(4){
  top: 50px;
  right: 200px;

  animation-delay: 2s;
}
#japanc .ume-wrap:nth-child(5){
  top: 100px;
  right: 30px;

  animation-delay: 1.6s;
}
#japanc .ume-wrap:nth-child(6){
  top: 140px;
  left: 0px;

  animation-delay: 2.2s;
}
#japanc .ume-wrap:nth-child(7){
  top: 200px;
  left: 65px;

  animation-delay: 2.8s;
}
@keyframes umeanime{
  0%{
    transform:rotate(0);
  }
  15%{
    opacity: 0.7;
  }
  100%{
    top: 750px;
    transform:rotate(720deg);
  }
}

@media (max-width:1080px){
  .card{
    background-color: #2224269c;
  }
  #mobile:hover .cardbar{
    width: 276px !important;
  }
}

@media (max-width:600px){
  .card{
    background-color: var(--card-background-color);
  }
  .fadeLeft{
    opacity: 1;
  }
  .fadeLeft{
    animation-name: none;
  }
  #mobile .border{
    top: calc(100vw / 18);
    left: calc(100vw / 18);
  
    width: calc(800vw / 9);
    height: 670px;
    border-radius: 60px;
  }
  #mobile .appicon{
    width: calc(200vw / 15);
    height: calc(200vw / 15);
  }
  #mobile .appicon:nth-child(3){
    top: calc(200vw / 9);
    left: calc(100vw / 9);
  }
  #mobile .appicon:nth-child(4){
    top: calc(200vw / 9);
    left: calc(300vw / 9);
  }
  #mobile .appicon:nth-child(5){
    top: calc(200vw / 9);
    right: calc(300vw / 9);
  }
  #mobile .appicon:nth-child(6){
    top: calc(200vw / 9);
    right: calc(100vw / 9);
  }
  #mobile .appicon:nth-child(7){
    top: calc(400vw / 9);
    left: calc(100vw / 9);
  }
  #mobile .appicon:nth-child(8){
    top: calc(400vw / 9);
    left: calc(300vw / 9);
  }
  #mobile .appicon:nth-child(9){
    top: calc(400vw / 9);
    right: calc(300vw / 9);
  }
  #mobile .appicon:nth-child(10){
    top: calc(400vw / 9);
    right: calc(100vw / 9);
  }
  #mobile .appicon:nth-child(11){
    top: calc(600vw / 9);
    left: calc(100vw / 9);
  }
  #mobile .appicon:nth-child(12){
    top: calc(600vw / 9);
    left: calc(300vw / 9);
  }
  #mobile.spanime .cardbar{
    width: 0;
    transition: 1s linear;
  }
  .spanime .border{
    animation: borderanime 1s linear 0.6s forwards;
  }
  .spanime .appicon{
    animation: appiconanime 1s 1 forwards;
  }
  .spanime .horizon-sun{
    opacity: 1 !important;
    animation: horizonanime 2s infinite linear alternate;
  }
  .spanime .circle{
    transition: 0.3s all;
    opacity: 1;
    animation: semicircleanime 2s infinite linear;
  }
  .spanime .wave{
    transition: 0.3s all;
    opacity: 1;
    animation: waveanime 4s infinite ease-out;
  }
  .spanime .wave2{
    transition: 0.3s all;
    opacity: 1;
    animation: waveanime2 1s infinite ease-in alternate;
  }
  .spanime .wave3 .quarter-wave:nth-child(1){
    transition: 0.3s all;
    opacity: 1!important;
    animation: waveanime3 1.2s infinite linear;
  }
  .spanime .wave3 .quarter-wave:nth-child(2){
    transition: 0.3s all;
    opacity: 1!important;
    animation: waveanime3 1.2s infinite linear alternate-reverse;
  }
  .spanime .officecardbar{
    width: 61vw;
    position: relative;
    animation: cardbaranime var(--officeanime-time) infinite 1.2s;
  }
  @keyframes cardbaranime{
    0%{
      left: 0;
    }
    5%,25%{
      left: -16vw;
    }
    30%,50%{
      left: -31vw;
    }
    55%,75%{
      left: -47vw;
    }
    85%,100%{
      left: -66vw;
    }
  }
  .spanime .spark-wrap{
    animation: spark-wrapanime var(--officeanime-time) 0.8s infinite;
  }
  .spanime .spark:nth-child(1){
    animation: sparkanime var(--officeanime-time) infinite 0.8s;
  }
  .spanime .spark:nth-child(2){
    animation: sparkanime2 var(--officeanime-time) infinite 0.8s;
  }
  .spanime .spark:nth-child(3){
    animation: sparkanime3 var(--officeanime-time) infinite 0.8s;
  }
  .spanime .spark:nth-child(4){
    animation: sparkanime4 var(--officeanime-time) infinite 0.8s;
  }
  .spanime .hammer-wrap{
    animation: hammeranime var(--officeanime-time) infinite linear;
  }
  .spanime .ume-wrap{
    animation: umeanime 7s infinite 3s;
  }
  .spanime .topright,
  .spanime .bottomright{
  animation: cloudanime-right var(--cloud-animation-time) 1 ease-in-out forwards;
  }
  .spanime .topleft{
  animation: cloudanime-left var(--cloud-animation-time) 1 ease-in-out forwards;
  }
}
/*-----モーダル-----*/
.noneformodal{
  display: none;
}
.modal-wrap{
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
}
.modal{
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100vw;
  height: 100vh;

  background-color: rgba(0, 0, 0, 0.5);
}

#container {
  margin: 20px;
  width: 400px;
  height: 8px;
  position: relative;
}