img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
}
html,body {height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}
body{
  font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.8;letter-spacing: 1px;
}
a {
  text-decoration: none;
  transition-duration: 0.3s;
  cursor: pointer;
}
a:hover {
}

.fadeIn{animation-name:fadeInAnime;animation-duration:2s;animation-fill-mode:forwards;opacity:0;}
@keyframes fadeInAnime{from {opacity: 0;}to {opacity: 1;}}
.fadeUp{animation-name:fadeUpAnime;animation-duration:1.0s;animation-fill-mode:forwards;opacity:0;}
@keyframes fadeUpAnime{from {opacity: 0;transform: translateY(100px);}to {opacity: 1;transform: translateY(0);}}
.fadeDown{animation-name:fadeDownAnime;animation-duration:1.0s;animation-fill-mode:forwards;opacity:0;}
@keyframes fadeDownAnime{from {opacity: 0;transform: translateY(-100px);}to {opacity: 1;transform: translateY(0);}}
.fadeLeft{animation-name:fadeLeftAnime;animation-duration:1.0s;animation-fill-mode:forwards;opacity:0;}
@keyframes fadeLeftAnime{from {opacity: 0;transform: translateX(-100px);}to {opacity: 1;transform: translateX(0);}}
.fadeRight{animation-name:fadeRightAnime;animation-duration:1.0s;animation-fill-mode:forwards;opacity:0;}
@keyframes fadeRightAnime{from {opacity: 0;transform: translateX(100px);}to {opacity: 1;transform: translateX(0);}}
.fadeInTrigger,.fadeUpTrigger,.fadeDownTrigger,.fadeLeftTrigger,.fadeRightTrigger{opacity: 0;}
.zoomIn{animation-name:zoomInAnime;animation-duration:0.5s;animation-fill-mode:forwards;}
@keyframes zoomInAnime{from {transform: scale(0.6);opacity: 0;}to {transform: scale(1);opacity: 1;}}
.zoomOut{animation-name:zoomOutAnime;animation-duration:0.5s;animation-fill-mode:forwards;}
@keyframes zoomOutAnime{from {transform: scale(1.2);opacity: 0;}to {transform:scale(1);opacity: 1;}}
.zoomInTrigger,.zoomOutTrigger{opacity: 0;}
.blur{animation-name:blurAnime;animation-duration:1s;animation-fill-mode:forwards;}
@keyframes blurAnime{from {filter: blur(10px);transform: scale(1.02);opacity: 0;}to {filter: blur(0);transform: scale(1);opacity: 1;}}
.blur,.blurTrigger{opacity: 0;}
.smooth{animation-name:smoothAnime;animation-duration:1s;animation-fill-mode:forwards;transform-origin: left;opacity:0;}
@keyframes smoothAnime{from {transform: translate3d(0, 100%, 0) skewY(12deg);opacity:0;}to {transform: translate3d(0, 0, 0) skewY(0);opacity:1;}}
.smoothTrigger{opacity: 0;}
.lineTrigger{position: relative;opacity:0;}
.lineTrigger.lineanime{animation-name:lineAnimeBase;animation-duration:1s;animation-fill-mode:forwards;}
@keyframes lineAnimeBase{from {opacity:0;}to {opacity:1;  }}
.lineTrigger::before,.lineTrigger::after{position: absolute;content:"";width:0;height:1px;background:#333;}
.line2::before,.line2::after{position: absolute;content:"";width: 1px;height:0;background:#333;}
.lineTrigger::before {top:0;left:0;}
.lineTrigger.lineanime::before {animation: lineAnime .5s linear 0s forwards;}
.line2::before{ top:0;right:0;}
.lineTrigger.lineanime .line2::before {animation: lineAnime2 .5s linear .5s forwards;}
.lineTrigger::after { bottom:0;right:0;}
.lineTrigger.lineanime::after {animation: lineAnime .5s linear 1s forwards;}
.line2::after{ bottom:0;left:0;}
.lineTrigger.lineanime .line2::after {animation: lineAnime2 .5s linear 1.5s forwards;}
@keyframes lineAnime {0% {width:0%;}100%{width:100%;}}
@keyframes lineAnime2 {0% {height:0%;}100%{height:100%;}}
.lineTrigger.lineanime .lineinappear{animation: lineInnerAnime .5s linear 1.5s forwards;opacity: 0;}
@keyframes lineInnerAnime{0% {opacity:0;}100% {opacity:1;}}
.bgextend{animation-name:bgextendAnimeBase;animation-duration:1s;animation-fill-mode:forwards;position: relative;overflow: hidden;opacity:0;}
@keyframes bgextendAnimeBase{from {opacity:0;}to {opacity:1;  }}
.bgappear{animation-name:bgextendAnimeSecond;animation-duration:1s;animation-delay: 0.6s;animation-fill-mode:forwards;opacity: 0;}
@keyframes bgextendAnimeSecond{0% {opacity: 0;}100% {opacity: 1;}}
.bgLRextend::before{animation-name:bgLRextendAnime;animation-duration:1s;animation-fill-mode:forwards;content: "";position: absolute;width: 100%;height: 100%;background-color: #666;}
@keyframes bgLRextendAnime{0% {transform-origin:left;transform:scaleX(0);}50% {transform-origin:left;transform:scaleX(1);}50.001% {transform-origin:right;}100% {transform-origin:right;transform:scaleX(0);}}
.bgRLextend::before{animation-name:bgRLextendAnime;animation-duration:1s;animation-fill-mode:forwards;content: "";position: absolute;width: 100%;height: 100%;background-color: #666;}
@keyframes bgRLextendAnime{0% {transform-origin:right;transform:scaleX(0);}50% {transform-origin:right;transform:scaleX(1);}50.001% {transform-origin:left;}100% {transform-origin:left;transform:scaleX(0);}}
.bgDUextend::before{animation-name:bgDUextendAnime;animation-duration:1s;animation-fill-mode:forwards;content: "";position: absolute;width: 100%;height: 100%;background-color: #666;}
@keyframes bgDUextendAnime{0% {transform-origin:bottom;transform:scaleY(0);}50% {transform-origin:bottom;transform:scaleY(1);}50.001% {transform-origin:top;}100% {transform-origin:top;transform:scaleY(0);}}
.bgUDextend::before{animation-name:bgUDextendAnime;animation-duration:1s;animation-fill-mode:forwards;content: "";position: absolute;width: 100%;height: 100%;background-color: #666;}
@keyframes bgUDextendAnime{0% {transform-origin:top;transform:scaleY(0);}50% {transform-origin:top;transform:scaleY(1);}50.001% {transform-origin:bottom;}100% {transform-origin:bottom;transform:scaleY(0);}}
.bgappearTrigger,.bgUDextendTrigger,.bgDUextendTrigger,.bgRLextendTrigger,.bgLRextendTrigger{opacity: 0;}
.count2{animation-iteration-count: 2;}
.countinfinite{animation-iteration-count: infinite;}
.delay-time05{animation-delay: 0.5s;}
.delay-time1{animation-delay: 1s;}
.delay-time15{animation-delay: 1.5s;}
.delay-time2{animation-delay: 2s;}
.delay-time25{animation-delay: 2.5s;}
.change-time05{animation-duration: 0.5s;}
.change-time1{animation-duration: 1s;}
.change-time15{animation-duration: 1.5s;}
.change-time2{animation-duration: 2s;}
.change-time25{animation-duration: 2.5s;}
.change-time30{animation-duration: 3.0s;}
.change-time35{animation-duration: 3.5s;}
.change-time40{animation-duration: 4.0s;}
.change-time45{animation-duration: 4.5s;}

.mask_wrap{
  display: table;
  overflow: hidden;
}
.mask-wrap .mask{
  display: table;
  position: relative;
  margin-bottom: .25em;
  left: -100%;
  overflow: hidden;
}
.mask-wrap .mask-bg{
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #827c87;
}
.pagetop {
  position: fixed;
  right: 20px;
  bottom: 20px;

  height: 50px;
  width: 50px;
  z-index: 1;
}

.pagetop a {
  position: relative;

  background: rgba(0, 0, 0, 0.5);
  display: block;
  height: 100%;
  width: 100%;
}

.pagetop a::after {
  position: absolute;
  top: 50%;
  left: 50%;

  border-right: solid 1px #fff;
  border-top: solid 1px #fff;
  content: '';
  display: block;
  height: 14px;
  margin: -2px 0 0 -7px;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  width: 14px;
}