@charset "UTF-8";
/*

Author: FUMIHIKO OKAMURA / Seiren Graphico
Author URI: https://seiren-graphico.hutarino.com/studio/
Description:このテーマはhutarino 様用 EC サイト 特注テンプレートです。コード及び文章や画像などサイト内コンテンツ無断で複製、使用していた場合は法的措置を取らせていただきます。
Unauthorized copying and replication of the contents of this site, text and images are strictly prohibited.
Несанкционированное воспроизведение запрещено.
禁止私自转载、加工
禁止私自轉載、加工
무단 복제 금지.

Tested up to: 5.5.1
Requires PHP: 5.6


*/
/*--------------------------------------------------------------
>>> myfunctions style:
----------------------------------------------------------------
オリジナルのlibraly(SRG tomi v.02)をコピペしてカスタマイズ使用
追加したい場合はoriginalをチェック

/*--------------------------------------------------------------
>>> my css animations style:
----------------------------------------------------------------*/
/* hover で動かすとマウスアウトするとすぐに初期状態に戻る
（これは、animation-play-state プロパティを設定することで回避できる）
ループの設定可能
:hover などのきっかけがなくても実行可能
発火はjQueryで制御可能
*/

/*--------------------------------------------------------------
>>> トップへ戻るボタン
----------------------------------------------------------------*/
#page-top {
  position: fixed;
  bottom: 25px;
  left: 20px;
  font-size: 1em;
  cursor: pointer;
  z-index: 981;
}

#page-top a {
  background: #e62f8b;
  text-decoration: none;
  color: #fff;
  width: 70px;
  height: 70px;
  padding: 10px 0;
  text-align: center;
  display: block;
  border-radius: 50%;
}
#page-top a:hover {
  text-decoration: none;
  background: #999;
}

.fade_off {
  opacity: 0;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
}

.fade_on {
  opacity: 0.7;
  transform: translateY(20px);
  transition: all 1s;
}

/*--------------------------------------------------------------
>>> my scroll animete css with js
----------------------------------------------------------------*/
.fade_in {
  opacity: 0;
}

.fade_in_anime {
  opacity: 1;
}

.scroll {
  transition: 0.5s;
  /* width: 100%;
  margin: 0 auto;
  padding: 0; */
}

.scroll-be {
  transition: 0.5s;
  margin: 0 0 30px;
}

.scroll li {
  list-style: none;
  transition: 0.5s;
  margin: 0 0 30px;
}

.scroll img {
  width: 100%;
  margin: 0 0 5px 0;
}

.scroll figcaption {
  text-align: center;
}

.scroll .fade_in {
  opacity: 0;
}

.scroll .fade_in_anime {
  opacity: 1;
  transition: all 2300ms;
}

.scroll .up {
  transform: translate(0, 30px);
  -webkit-transform: translate(0, 30px);
  opacity: 0;
}

.scroll .up_anime {
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  opacity: 1;
}

.scroll .down {
  transform: translate(0, -30px);
  -webkit-transform: translate(0, -30px);
  opacity: 0;
}

.scroll .down_anime {
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  opacity: 1;
}

.scroll .side {
  transform: translate(50px, 0);
  -webkit-transform: translate(50px, 0);
  opacity: 0;
}

.scroll .side_anime {
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  opacity: 1;
}

.scroll .bigger {
  transform: scale(1.1, 1.1) rotate(0.001deg);
  -webkit-transform: scale(1.1, 1.1) rotate(0.001deg);

  /* opacity: 0.2; */
}

.scroll .bigger_anime {
  transform: translate(0, 0) rotate(0.001deg);
  -webkit-transform: translate(0, 0) rotate(0.001deg);

  /* opacity: 1; */
}

.scroll .up {
  transform: translate(0, 60px);
  -webkit-transform: translate(0, 60px);
  opacity: 0;
  transition-timing-function: ease;
  transition: all 2300ms;
}

.scroll .up_anime {
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  opacity: 1;
  transition-timing-function: ease;
  transition: all 2300ms;
}

.scroll .side {
  transform: translate(60px, 0);
  -webkit-transform: translate(60px, 0);
  opacity: 0;
  transition-timing-function: ease;
  transition: all 2300ms;
}

.scroll .side_anime {
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  opacity: 1;
  transition-timing-function: ease;
  transition: all 2300ms;
}