@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
position: fixed;
width: 100%;
height: 100%;
z-index: 999;
text-align:center;
color:#fff;
}

/* Loading画像中央配置　*/
#splash_text {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 999;
	transform: translate(-50%, -50%);
	color: #fff;
	width: 100%;
}

/*IE11対策用バーの線の高さ※対応しなければ削除してください*/
#splash_text svg{
  height: 2px;
}

/*割れる画面のアニメーション*/
.loader_cover {
  width: 100%;
  height: 50%;
  background-color: #333;
  transition: all 1s cubic-bezier(.04, .435, .315, .9);
  transform: scaleY(1);
}
/*上の画面*/
.loader_cover-up {
  transform-origin: center top;
}

/*下の画面*/
.loader_cover-down {
  position: absolute;
  bottom: 0;
  transform-origin: center bottom;
}
/*クラス名がついたらY軸方向に0*/
.coveranime {
  transform: scaleY(0);
}

/*動きのきっかけの起点となるクラス名 はじめは非表示に*/
.fadeInUpTrigger,
.fadeInDownTrigger,
.fadeInUpTriggerOnce{
    opacity:0;
}

/* ふわふわ */
.fuwafuwa {
  opacity: 0;
  position: absolute;
  top:calc(50% - 50px);
  right: 20%;
  animation: floatUp 2s ease-out 2s 1 normal forwards,
             fuwafuwa 2s ease-in-out 4s infinite alternate forwards;
  background: url(http://hauolimakana.shop/wp-content/uploads/f45180e13d8d1c383224814b1f7a8a83.png) no-repeat center center / 150px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 150px;
  height: 150px;
  margin-top: 15px;
}

@keyframes floatUp {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fuwafuwa {
  0%{
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}

.img_anime{
  top:calc(50% - 50px);
  right: 20%;
  animation: floatUp 2s ease-out 2s 1 normal forwards,
             fuwafuwa 1s ease-in-out 4s infinite alternate;
}
/*----------------------------------------------------------
TOPページ - OUR-SERVICES
----------------------------------------------------------*/
.radius-img{
  max-width: 250px !important;
  min-height: 250px !important;
}
/************************************
事業紹介
*************************************/
.works {
  position: relative;
  width: 100%;
  height: 1200px;
  margin: 0 auto;
}

.works div{
  position: absolute;
  width: 250px;
  height: 250px;
  text-align: center;
  line-height: 30px;
  color: white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.works div div{
	height: auto;
	transform: none;
}

.works .item1 { top: 10%; left: 50%; }
.works .item2 { top: 35%; left: 85%; }
.works .item3 { top: 65%; left: 85%; }
.works .item4 { top: 90%; left: 50%; }
.works .item5 { top: 65%; left: 15%; }
.works .item6 { top: 35%; left: 15%; }

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}