@charset "UTF-8";
/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

Animation CSS

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

Variables CSS

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

SVG CSS

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
/**
 * SVG画像をアイコンに使いたい的ないろいろ
 *
 *  [Html] SVG塗りつぶしの色をBackground-Imageとして扱うときに変更する
 * https://code.i-harness.com/ja/q/cbfa3c
 */
/* Variables
-------------------------------------------- */
/* Loading
-------------------------------------------- */
.loading {
  position: fixed;
  top: 50%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%);
  transition: opacity 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  background: #FFF url(/shr/img/common/loading.gif) no-repeat center center/50px auto; }
  .loading.finish {
    opacity: 0;
    pointer-events: none; }

.result_loading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  z-index: 10;
  border-radius: 10px;
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transition: opacity 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  background: #FFF url(/shr/img/common/loading.gif) no-repeat center center/50px auto; }
  .result_loading.hide {
    opacity: 0;
    pointer-events: none; }

/* アニメーション用
-------------------------------------------- */
/* ------------------------------------
【オプション】
data-na-offset="画面下からのpx数で指定"
data-na-delay="ミリ秒で指定"
------------------------------------ */
.na-slide-cover {
  position: relative; }

.na-slide-cover::before,
.na-slide-cover::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 50%;
  z-index: 3;
  background: #FFF;
  transition: width 0.5s cubic-bezier(0.77, 0, 0.175, 1); }

.na-slide-cover::after {
  top: 49.5%;
  height: 50.5%;
  transition: width 1.5s 0.2s cubic-bezier(0.77, 0, 0.175, 1); }

.na-slide-cover.up::before,
.na-slide-cover.up::after,
.na-slide-cover.down::before,
.na-slide-cover.down::after {
  top: 0;
  left: 0;
  right: auto;
  width: 50%;
  height: 100%;
  transition: height 0.5s cubic-bezier(0.77, 0, 0.175, 1); }

.na-slide-cover.up::after,
.na-slide-cover.down::after {
  top: 0;
  left: 0;
  right: auto;
  width: 50%;
  height: 100%;
  transition: height 0.5s 0.2s cubic-bezier(0.77, 0, 0.175, 1); }

.na-slide-cover.up::after,
.na-slide-cover.down::after {
  left: 50%; }

.na-slide-cover.down::before,
.na-slide-cover.down::after {
  top: auto;
  bottom: 0; }

.na-slide-cover.gray::before,
.na-slide-cover.gray::after {
  background: #F5F5F5; }

.na-slide-cover.dark::before,
.na-slide-cover.dark::after {
  background: #333; }

.na-slide-cover.red::before,
.na-slide-cover.red::after {
  background: #80212e; }

.na-slide-cover.single::before {
  height: 100%; }

.na-slide-cover.single::after {
  display: none; }

.na-slide-cover.na-anim-init::before,
.na-slide-cover.na-anim-init::after {
  width: 0; }

.na-slide-cover.up.na-anim-init::before,
.na-slide-cover.up.na-anim-init::after,
.na-slide-cover.down.na-anim-init::before,
.na-slide-cover.down.na-anim-init::after {
  width: 50%;
  height: 0; }

.na-slide-cover.downfull::before {
  top: auto;
  bottom: 0;
  left: 0;
  right: auto;
  width: 100%;
  height: 100%;
  transition: height 0.8s cubic-bezier(0.77, 0, 0.175, 1); }

.na-slide-cover.downfull.na-anim-init::before {
  width: 100%;
  height: 0; }

.na-slide-cover.downfull::after {
  display: none; }

.na-fade-in {
  opacity: 0;
  transition: opacity .8s; }

.na-fade-in.na-anim-init {
  opacity: 1; }

.na-lift-up {
  opacity: 0;
  transform: translateY(50px);
  transition: transform .6s ease-in-out, opacity .8s ease-in-out; }

.na-lift-up.na-anim-init {
  opacity: 1;
  transform: translateY(0); }

.na-lift-down {
  opacity: 0;
  transform: translateY(-50px);
  transition: transform .6s ease-in-out, opacity .8s ease-in-out; }

.na-lift-down.na-anim-init {
  opacity: 1;
  transform: translateY(0); }

.na-scale-in {
  opacity: 0;
  transform: scale(0);
  transition: transform 0.6s cubic-bezier(0.5, 0, 0.3, 1.2), opacity 0.6s ease-in-out; }

.na-scale-in.na-anim-init {
  opacity: 1;
  transform: scale(1); }

.na-txt-cover {
  display: inline-block;
  position: relative;
  color: transparent;
  transition: color 0s .2s; }

.na-txt-cover.na-anim-init {
  color: #000; }

.na-txt-cover::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: #BBB;
  transform: scaleX(1);
  transform-origin: left top; }

.na-txt-cover.white::before {
  background: #FFF; }

.na-txt-cover.black::before {
  background: #000; }

.na-txt-cover.gray::before {
  background: #F0F0F0; }

.na-txt-cover.na-anim-init::before {
  animation: txt_cover cubic-bezier(0.77, 0, 0.175, 1) 1s forwards; }

.na-cont-cover {
  display: inline-block;
  position: relative; }
  .na-cont-cover::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100.5%;
    height: 100.5%;
    z-index: 2;
    background: #eee;
    transform-origin: right top;
    transform: scaleX(1);
    transition: transform cubic-bezier(0.65, 0, 0.2, 1) 0.5s 0.5s; }
  .na-cont-cover.white::before {
    background: #FFF; }
  .na-cont-cover.na-anim-init::before {
    transform: scaleX(0); }

.na-img-cover-01 {
  position: relative;
  overflow: hidden;
  opacity: 0; }
  .na-img-cover-01.na-anim-init {
    opacity: 1; }
    .na-img-cover-01.na-anim-init::before {
      transform: rotate(-210deg) scaleY(0); }
  .na-img-cover-01::before {
    content: "";
    display: block;
    width: 160%;
    height: 160%;
    position: absolute;
    top: 80%;
    left: 160%;
    background: #f6f6f6;
    z-index: 3;
    transform-origin: top left;
    transform: rotate(-210deg) scaleY(1);
    transition: transform cubic-bezier(0.65, 0, 0.2, 1) 1s; }

@keyframes txt_cover {
  0% {
    transform: scaleX(1);
    transform-origin: right top; }
  100% {
    transform: scaleX(0);
    transform-origin: right top; } }