@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@900&display=swap');


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■TOPページ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/** ----------------------------------------------------------------------
   メインビジュアル
------------------------------------------------------------------------**/

/***** フレアドのロゴ *****/

line {
    stroke: #2da5e0;
    stroke-width: 1px;
    stroke-dasharray: 400px;
    animation: svg 2s ease-in both ;
}

.logost0 {
    stroke: #2da5e0;
    stroke-width: 0.5px;
    stroke-dasharray: 400px;
    animation: svg 0.8s ease-in both, svg-color 1.5s ease-in both;
    animation-delay: 1.2s, 2s;
}
.logost1 {
    stroke: #2da5e0;
    stroke-width: 0.5px;
    stroke-dasharray: 400px;
    animation: svg 0.8s ease-in both, svg-color 1.5s ease-in both;
    animation-delay: 1.5s, 2s;
}
.logost2 {
    stroke: #2da5e0;
    stroke-width: 0.5px;
    stroke-dasharray: 400px;
    animation: svg 0.8s ease-in both, svg-color 1.8s ease-in both;
    animation-delay: 1.8s, 2s;
}

@keyframes svg {
    0% {
        fill: transparent;
        stroke-dashoffset: 400px;
    }
    100%{
        stroke-dashoffset: 0;
    }
}

@keyframes svg-color {
    0% {
        fill: transparent;
    }
    50% {
        fill: #2da5e0;
    }
    100%{
        fill: #2da5e0;
    }   
}

/***** design For All Smile *****/

.slide-in {
  overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
  display: inline-block;

}

/*左右のアニメーション*/
.leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
	animation-name:slideTextX100;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes slideTextX100 {
  from {
	transform: translateX(-100%); /*要素を左の枠外に移動*/
	opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
	opacity: 1;
  }
}

.slideAnimeRightLeft {
	animation-name:slideTextX-100;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	opacity: 0;
}


@keyframes slideTextX-100 {
  from {
  transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
  transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

/***** スクロールの矢印 *****/
#scrolldown_contents {
	animation: arrowmove 1s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
      0%{bottom:4%;}
      50%{bottom:6%;}
     100%{bottom:4%;}
 }

/*
footerまでスクロールしたら消す
.is-hidden {
	animation-name:fadeOutAnime;
	animation-duration:1.0s;
	animation-fill-mode:forwards;
	opacity:1;
}
*/
/*footerまでスクロールしたら表示*/
.is-show {
	animation-name:scrollUpAnime;
	animation-duration:1.0s;
	animation-fill-mode:forwards;
	opacity:0;
}

@keyframes scrollUpAnime{
  from {
	opacity: 0;
/*	transform: translateX(0px);*/
	right: -100px;
  }

  to {
	opacity: 1;
/*	transform: translateX(30px);*/
  }
}

/** ----------------------------------------------------------------------
   広がる円
------------------------------------------------------------------------**/

div#spread_circle {
    height: 1500px;
    display: grid;
    place-items: center;
	position: relative;
	overflow: hidden;
}

#spread_circle .scale {
    border-radius: 50%;
    display: grid;
    place-items: center;
    top: 0;
    left: 0;
    width: 570px;
    height: 570px;
    background-color: #2EA5E0;
    margin: 0 auto;
	transform-origin:center;/*変化する基点を中心からに設定*/
	z-index: 1;
/*
     animation: fadeOut 0.4s forwards; 
     animation-delay: 1.6s; 
*/
}

#spread_circle h2 {
    font-weight: 600;
    letter-spacing: 0.12em;
    font-size: 50px;
    color: #fff;
    text-align: center;
    font-family: "Campton", sans-serif;
    width: 100%;
	position: absolute;
	z-index: 2;
}

.scrollScale.ready {
	transition: all 1.2s ease-in 0.5s;
/*  transform: scale(1);*/
}

.scrollScale.active {
	  animation: circle-open 1.2s ease-in forwards;
	  animation-delay: 0.8s; /*任意の遅延時間*/
}

/*円が拡大するアニメーション*/
@keyframes circle-open {
  0% {
	  transform: scale(1)
  }

  50% {
		transform: scale(1.2)
  }
	
  80% {
		transform: scale(1.5)
  }
  100% {
    /*全画面*/
    width: 100vw;
    height: 100%;
    border-radius: 0;
  }
}

/** ----------------------------------------------------------------------
   画像の動き
------------------------------------------------------------------------**/

/***** 画像右からふわっと *****/

.fadeSlide{
animation-name:fadeSlideAnime;
animation-duration:1.2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeSlideAnime{
  from {
    opacity: 0;
  transform: translateX(30px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}


/***** 画像下からふわっと *****/

.fadeUp{
	animation-name:fadeInAnime;
	animation-duration:1.2s;
	animation-fill-mode:forwards;
	opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  	transform: translateY(30px);
  }

  to {
    opacity: 1;
  transform: translateY(0px);
  }
}

/***** 画像横からスライドイン *****/

/*各ページのトップの部分*/

.slideIn,.slideIn_rev{
	padding: 0;
	margin: 0;
	transform: translateX(-20%);
	opacity: 0;
	animation: slideInAnime 0.8s ease-out forwards;
}

@keyframes slideInAnime {
  from {
    opacity: 0;
  transform: translateX(-30px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

.slideIn_rev{
	padding: 0;
	margin: 0;
	transform: translateX(100%);
	opacity: 0;
	animation: slideIn_rev_Anime 0.8s ease-out forwards;
	animation-delay: 0.3s;
}

@keyframes slideIn_rev_Anime {
  from {
    opacity: 0;
  transform: translateX(30px);
  }

  to {
    opacity: 0.2;
  transform: translateX(0);
  }
}

/*serviceページ*/

.js_slideIn, .js_slideIn_rev{
	padding: 0;
	margin: 0;
	transform: translateX(-5%);
	opacity: 0;
	animation: About_slideInAnime 0.8s ease-out forwards;
}

@keyframes About_slideInAnime {
  from {
    opacity: 0;
  transform: translateX(-20px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

.js_slideIn_rev{
	animation: About_slideIn_rev_Anime 0.8s ease-out forwards;
}

@keyframes About_slideIn_rev_Anime {
  from {
    opacity: 0;
  transform: translateX(20px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/***** 画像下からスライドイン *****/
.slideUp{
	padding: 0;
	margin: 0;
	transform: translateY(200%);
	opacity: 0;
	animation: slideUp_Anime 1.0s ease-out forwards;
/*	animation-delay: 1s;*/
}

@keyframes slideUp_Anime {
  from {
	opacity: 0;
	transform: translateY(-50px) rotate(90deg);
  }

  to {
	opacity: 1;
	transform: translateY(0) rotate(90deg);
  }
}

/** ----------------------------------------------------------------------
  TOPページ　サービスセクションの画像の下の青丸
------------------------------------------------------------------------**/
#service .right_side .background_img {
	animation: 3s fuwafuwa infinite;
}

@keyframes fuwafuwa {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}


.circle.big1, .circle.big2, .circle.big3{
	animation: wobbling_x 1.2s ease-in-out infinite alternate,
    wobbling_y 1.5s ease-in-out infinite alternate;
}

.circle.middle1, .circle.middle2 {
	animation: wobbling_x 1.1s ease-in-out infinite alternate,
    wobbling_y 1.4s ease-in-out infinite alternate;
}

.circle.small1, .circle.small2{
	animation: wobbling_x 1.0s ease-in-out infinite alternate,
    wobbling_y 1.3s ease-in-out infinite alternate;
}

@keyframes wobbling_x {
  0% {
    margin-left: 8px;
  }

  100% {
    margin-left: 0px;
  }
}

@keyframes wobbling_y {
  0% {
    margin-top: 0px;
  }

  100% {
    margin-top: 8px;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.js_fadeSlideTrigger{
    opacity: 0;
}

/** ----------------------------------------------------------------------
  COMPANYページ　MOVIE
------------------------------------------------------------------------**/


/** ----------------------------------------------------------------------
  テキストの動き
------------------------------------------------------------------------**/
/*aboutセクションのテキストの動き*/

.txt_side_rev.fadeSlide{
animation-name:fadeLeftAnime;
animation-duration:1.2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  	transform: translateX(0);
  }

  to {
    opacity: 1;
  	transform: translateX(30px);
  }
}

/*TOPページ　aboutセクションのテキストの動き*/

.dashtxt_0{
    stroke: #fff; /* 文字色 */
    fill: none; /* 塗りつぶし無し */
    stroke-width: 1.5; /* 文字の太さ */
    stroke-dasharray:  4000; /* 破線の間隔 */
    stroke-dashoffset: 4000; /* 破線の開始位置 */
    animation: DASH 3s ease-in-out alternate 0s forwards; /* アニメーション */
    -webkit-animation: DASH 3s ease-in-out alternate 0s forwards;
}

.dashtxt_1{
    stroke: #fff;
    fill: none;
    stroke-width: 1.5;
    stroke-dasharray:  4000;
    stroke-dashoffset: 4000;
    animation: DASH 2s ease-in-out alternate 0s forwards;
    animation-delay: 0.3s;
    -webkit-animation: DASH 2s ease-in-out alternate 0s forwards;
    -webkit-animation-delay: 0.3s;
}

.dashtxt_2{
    stroke: #fff;
    fill: none;
    stroke-width: 1.5;
    stroke-dasharray:  4000;
    stroke-dashoffset: 4000;
    animation: DASH 3s ease-in-out alternate 0s forwards;
    animation-delay: 0.6s;
    -webkit-animation: DASH 3s ease-in-out alternate 0s forwards;
    -webkit-animation-delay: 0.6s;
}

.dashtxt_3{
    stroke: #fff;
    fill: none;
    stroke-width: 1.5;
    stroke-dasharray:  4000;
    stroke-dashoffset: 4000;
    animation: DASH 3s ease-in-out alternate 0s forwards;
    animation-delay: 0.9s;
    -webkit-animation: DASH 3s ease-in-out alternate 0s forwards;
    -webkit-animation-delay: 0.9s;
}

@keyframes DASH {
    0% {
        stroke-dashoffset: 4000;
        }
    100% {
        stroke-dashoffset: 0;
        }
    }

@-webkit-keyframes DASH {
    0% {
        stroke-dashoffset: 4000;
    }
    100% {
        stroke-dashoffset: 0;
      }
    }


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ABOUTページ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*==================================================
テキストがじんわりと出現
===================================*/

.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;
  }
}
 
.js_blurTrigger{
    opacity: 0;
}


/** ----------------------------------------------------------------------
   999px以下
------------------------------------------------------------------------**/
@media screen and (max-width:999px){
	
	/* 999px以下の時はアニメーションを停止したまま表示させる　*/
	.js_fadeSlideTrigger{
		opacity: 1;
	}
	
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ABOUTページ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
	
}