@charset "utf-8";
/* CSS Document */




/* ==========================================================================
   home-p
   ========================================================================== */

/*
===== top =====
*/

#body{
    margin: 0px;
    min-height: 100vh;
}

#home-bk{
	background:url(../image/haikei.png) center no-repeat;
        z-index: 0;
        position: relative;
        width: 100%;
        box-sizing: border-box;
        background-size:contain;
        background-color: #faf6dc;
}
#img::before{
  content: '';
  display: block;
  padding-top: 50%;
}

.wrap_original {
overflow: hidden;
}


#scroll{
  display: inline-block;
  margin: 0px 0px 0px 0px;
  position: relative;
  padding-top: 0px;
}

#scroll::before {
  animation: scroll 10.5s infinite;
  border: solid #000;
  z-index: 5;
  border-width: 0 0 0 0;
  background: url(../image/199_bell.gif) no-repeat center center / 9vw auto;
  content: "";
  display: block;
  margin: auto;
  position: absolute;
  top: 0;
  transform: rotate(-5deg);
  width: 16vw;
  height: 16vw;
}


#home-jbk{
          width: 1vw;
          z-index: 9;
          position: absolute;
          display: inline-block;
}
@media screen and (max-width: 478px) {
#home-jbk{
          width: 0.7vw;
          z-index: 9;
          position: absolute;
          display: inline-block;
}
}

#home-jbk img{
          width: 10vw;
          height: auto;
          z-index: 9;
          margin: 2.5vw 0vw 0vw 77vw;
          position: absolute;
          display: inline-block;
          list-style: none;
}

@media screen and (max-width: 388px) {
#home-jbk{
          width: 0.7vw;
          z-index: 9;
          position: absolute;
          display: inline-block;
}

#home-jbk img{
          width: 13vw;
          height: auto;
          z-index: 9;
          margin: 4.5vw 0vw 0vw 79vw;
          position: absolute;
          display: inline-block;
          list-style: none;
}
}

@media all and (-ms-high-contrast: none) {
  #home-bkh {
   background: url(../image/199_bell.gif) no-repeat center center/ 9vw auto;
   width: 157vw;
   height: 30vw;
   position: absolute;
   display: inline-block;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   z-index: 8;
  }
}

 @keyframes scroll{
  0% {
    transform: rotate(-2deg) translate(80vw, 11vw);
  }
  70% {
    transform: rotate(-8deg) translate(42vw,12vw);
  }
  0%, 70%, 100% {
    opacity: 0;
  }
  0% {
    opacity: 0;
  }

 }

 
@media screen and (min-width: 418px) {
 @keyframes scroll{
  0% {
    transform: rotate(-2deg) translate(74vw, 11vw);
  }
  70% {
    transform: rotate(-8deg) translate(40vw,12vw);
  }
  0%, 70%, 100% {
    opacity: 0;
  }
  0% {
    opacity: 1;
  }

 }

}

@media screen and (max-width: 418px) {

 @keyframes scroll{
  0% {
    transform: rotate(-2deg) translate(74vw, 12.5vw);
  }
  70% {
    transform: rotate(-8deg) translate(40vw, 13.5vw);
  }
  0%, 70%, 100% {
    opacity: 0;
  }
  0% {
    opacity: 1;
  }
 }
 }

@media screen and (min-width: 418px) {
 @keyframes scroll{
  0% {
    transform: rotate(-2deg) translate(74vw, 11vw);
  }
  70% {
    transform: rotate(-8deg) translate(40vw,12vw);
  }
  0%, 70%, 100% {
    opacity: 0;
  }
  0% {
    opacity: 1;
  }

 }

}

@media screen and (max-width: 385px) {

 @keyframes scroll{
  0% {
    transform: rotate(-2deg) translate(74vw, 13.8vw);
  }
  70% {
    transform: rotate(-8deg) translate(40vw, 14.8vw);
  }
  0%, 70%, 100% {
    opacity: 0;
  }
  0% {
    opacity: 1;
  }
 }
 }



@keyframes home-bkg {
  0% {
    transform:translate(0, 0) rotate(-0deg);
  }
  55% {
    transform:translate(2px, 5px) rotate(5.5deg);
  }
  100% {
    transform:translate(-1px, -5px) rotate(-5.5deg);
  }
}

@media screen and (max-width: 355px) {

 @keyframes scroll{
  0% {
    transform: rotate(-2deg) translate(74vw, 14.7vw);
  }
  70% {
    transform: rotate(-8deg) translate(40vw, 15.7vw);
  }
  0%, 70%, 100% {
    opacity: 0;
  }
  0% {
    opacity: 1;
  }
 }
 }



@keyframes home-bkg {
  0% {
    transform:translate(0, 0) rotate(-0deg);
  }
  55% {
    transform:translate(2px, 5px) rotate(5.5deg);
  }
  100% {
    transform:translate(-1px, -5px) rotate(-5.5deg);
  }
}

@media screen and (max-width: 323px) {

 @keyframes scroll{
  0% {
    transform: rotate(-2deg) translate(74vw, 14.9vw);
  }
  70% {
    transform: rotate(-8deg) translate(40vw, 15.9vw);
  }
  0%, 70%, 100% {
    opacity: 0;
  }
  0% {
    opacity: 1;
  }
 }
 }



@keyframes home-bkg {
  0% {
    transform:translate(0, 0) rotate(-0deg);
  }
  55% {
    transform:translate(2px, 5px) rotate(5.5deg);
  }
  100% {
    transform:translate(-1px, -5px) rotate(-5.5deg);
  }
}

@keyframes home-bkgr {
  0% {
    transform:translate(0, 0) rotate(-0deg);
  }
  55% {
    transform:translate(-1px, -5px) rotate(-5.5deg);
  }
  100% {
    transform:translate(5px, 2px) rotate(5.5deg);
  }
}

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


#bk{
          display: flex;
          list-style: none;
          justify-content:flex-end;
          margin: 43% -5% 0% 0%;
   }
#home-bk1{
	  float: left;
          list-style: none;
          z-index: 1;
          position: relative;
}
#home-bk1 img{
          width: 21vw;
          height: auto;
}

#home-bk2{
          z-index: 2;
          float: left;
          list-style: none;
          position: relative;
}
#home-bk2 img{
          width: 21vw;
          height: auto;
          margin: -6px 0 0 0;
}
#home-bk3{
          z-index: 3;
          float: left;
          list-style: none;
          position: relative;
}
#home-bk3 img{
          width: 21vw;
          height: auto;
          margin: 8px 0 0 0;
}
#home-bk4{
          z-index: 4;
          float: left;
          list-style: none;
          position: relative;
}
#home-bk4 img{
          width: 21vw;
          height: auto;
          margin: -13px 0 0 0;
}




#home-bk1:hover,
#home-bk1:focus,
#home-bk1:active{
	  float: left;
          z-index: 1;
          list-style: none;
          position: relative;
          animation: home-bkg 1s infinite ease-in-out .8s alternate;
          display: inline-block;
          transition: 0.2s ease-in-out;
}
 
@keyframes home-bkg {
  0% {
    transform:translate(0, 0) rotate(-0deg);
  }
  55% {
    transform:translate(2px, 5px) rotate(5.5deg);
  }
  100% {
    transform:translate(-1px, -5px) rotate(-5.5deg);
  }
}


#home-bk2:hover,
#home-bk2:focus,
#home-bk2:active{
          z-index: 2;
          float: left;
          list-style: none;
          margin: -6px 0 0 0;
          position: relative;
          animation: home-bkgr 1s infinite ease-in-out .8s alternate;
          display: inline-block;
          transition: 0.2s ease-in-out;
}
@keyframes home-bkgr {
  0% {
    transform:translate(0, 0) rotate(-0deg);
  }
  55% {
    transform:translate(-1px, -5px) rotate(-5.5deg);
  }
  100% {
    transform:translate(5px, 2px) rotate(5.5deg);
  }
}
#home-bk3:hover,
#home-bk3:focus,
#home-bk3:active{
          z-index: 3;
          float: left;
          list-style: none;
          margin: 8px 0 0 0;
          position: relative;
          animation: home-bkg 1s infinite ease-in-out .8s alternate;
          display: inline-block;
          transition: 0.2s ease-in-out;
}

#home-bk4:hover,
#home-bk4:focus,
#home-bk4:active{
          z-index: 4;
          float: left;
          list-style: none;
          margin: -13px 0 0 0;
          position: relative;
          animation: home-bkgr 1s infinite ease-in-out .8s alternate;
          display: inline-block;
          transition: 0.2s ease-in-out;
}

}
@media screen and (max-width: 377px) {

#bk{
          display: flex;
          list-style: none;
          justify-content:flex-end;
          margin: 55% 0% 0% 0%;
   }
#home-bk1{
	  float: left;
          list-style: none;
          z-index: 1;
          position: relative;
}
#home-bk1 img{
          width: 21vw;
          height: auto;
}

#home-bk2{
          z-index: 2;
          float: left;
          list-style: none;
          position: relative;
}
#home-bk2 img{
          width: 21vw;
          height: auto;
          margin: -6px 0 0 0;
}
#home-bk3{
          z-index: 3;
          float: left;
          list-style: none;
          position: relative;
}
#home-bk3 img{
          width: 21vw;
          height: auto;
          margin: 8px 0 0 0;
}
#home-bk4{
          z-index: 4;
          float: left;
          list-style: none;
          position: relative;
}
#home-bk4 img{
          width: 21vw;
          height: auto;
          margin: -13px 0 0 0;
}
#home-bk1:hover,
#home-bk1:focus,
#home-bk1:active{
	  float: left;
          z-index: 1;
          list-style: none;
          position: relative;
          animation: home-bkg 1s infinite ease-in-out .2s alternate;
          display: inline-block;
          transition: 0.5s ease-in-out;
}
 
@keyframes home-bkg {
  0% {
    transform:translate(0, 0) rotate(-0deg);
  }
  55% {
    transform:translate(2px, 5px) rotate(5.5deg);
  }
  100% {
    transform:translate(-1px, -5px) rotate(-5.5deg);
  }
}

#home-bk2:hover,
#home-bk2:focus,
#home-bk2:active{
          z-index: 4;
          float: left;
          list-style: none;
          margin: -13px 0 0 0;
          position: relative;
          animation: home-bkgr 1s infinite ease-in-out .2s alternate;
          display: inline-block;
          transition: 0.5s ease-in-out;
}

@keyframes home-bkgr {
  0% {
    transform:translate(0, 0) rotate(-0deg);
  }
  55% {
    transform:translate(-1px, -5px) rotate(-5.5deg);
  }
  100% {
    transform:translate(5px, 2px) rotate(5.5deg);
  }
}

#home-bk3:hover,
#home-bk3:focus,
#home-bk3:active{
	  float: left;
          z-index: 1;
          list-style: none;
          position: relative;
          animation: home-bkg 1s infinite ease-in-out .2s alternate;
          display: inline-block;
          transition: 0.5s ease-in-out;
}
#home-bk4:hover,
#home-bk4:focus,
#home-bk4:active{
          z-index: 4;
          float: left;
          list-style: none;
          margin: -13px 0 0 0;
          position: relative;
          animation: home-bkgr 1s infinite ease-in-out .2s alternate;
          display: inline-block;
          transition: 0.5s ease-in-out;
}