@charset "UTF-8";

/*-------------------------------------------------------------
reset.css
リセット関係・clearfixなど

top.css
トップページのレイアウトを記載したcss

sub.css
下層ページのレイアウトを記載したcss

common.css,common_sb.css
共通のレイアウトを記載したcss

single-hoge.css
投稿記事のレイアウトを記載したcss
---------------------------------------------------------------
/* カラー
--beige-color: #EDE9DE;
--brown-color: #DDD8D4;
--wht-color: #fff;
--blk-color: #000;
--gry-color: #757575;
--drk-gry-color: #4e4848;
/* ------------------------------------------------------------ */
/* 全デバイス/画面サイズに共通 かつ
　　479：スマートフォン縦：基本・レイアウト指定 */
/* ------------------------------------------------------------ */
.firstview {
  width: 100vw;
}



.loading svg.logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  overflow: visible;
}

.loading svg.logo path {
  fill: transparent;
  stroke: #d64c3d;
  stroke-width: 2px;

  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;

  animation:
    draw 3.0s ease forwards 1.0s,
    fillLogo 0.5s ease forwards 4.0s;
}

.loading .sub-logo {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: auto;

  opacity: 0;
  animation: fadeInSubtitle 0.5s ease forwards 4.0s;
}

@keyframes draw {
  from {
    stroke-dashoffset: 1000;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fillLogo {
  from {
    fill: transparent;
  }

  to {
    fill: #d64c3d;
  }
}

@keyframes fadeInSubtitle {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media screen and (max-width: 767px) {
  .loading .logo-wrap {
    width: 189px !important;
    height: 260px !important;
  }
}