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

/*
#####################################################################

	目次【INDEX】
	
#####################################################################

■アニメーション【.animation】

　＿キーフレーム【.keyframes】

　＿トランスレート【.translate】

　＿フェード【.fade】

　＿ズーム【.zoom】

　＿グラデーション【.gradient】

　＿スピードオプション【.anm_speed】

　＿ディレイオプション【.anm_delay】

　＿原点オプション【.anm_origin】

　＿エフェクト【.effect】

　＿ドローSVG【.drawsvg】

　＿アニメーションの連鎖【.animation_chain】



*/



/*
#####################################################################

	アニメーション【.animation】
	
#####################################################################
*/

.anmation_container{}
.animation_box,
.animation_box::after,
.animation_box::before{ 
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
}

.animation_box{
	/*アニメ高速化指定*/
	-webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/* ****************************************************
  キーフレーム【.keyframes】
***************************************************** */


/**********背景カラー【.keyframes_bg-color】*********************/

/*ブラック（全体）【.keyframes_bg-black-full】*/
@-webkit-keyframes keyframes_bg-black { 0% { background-color: #FFF; } 100% { background-color: #1a1a1a;} }
@keyframes keyframes_bg-black { 0% { background-color: #FFF; } 100% { background-color: #1a1a1a;} }
.anmation_container.active .keyframes_bg-black { -webkit-animation-name: keyframes_bg-black; animation-name: keyframes_bg-black; }


/**********実行後のスタイル維持【.keyframes_mode】*********************/
.animation_box.keyframes_forwards{ -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; }


/**********実行方向【.keyframes_direction】*********************/

/*逆順で実行*/
.animation_box.keyframes_reverse{ -webkit-animation-direction:reverse; animation-direction:reverse; }
/*繰り返し回数が奇数の場合は標準、偶数の場合は逆順*/
.animation_box.keyframes_alternate{ -webkit-animation-direction:alternate; animation-direction:alternate; }
/*繰り返し回数が奇数の場合は逆順、偶数の場合は標準*/
.animation_box.keyframes_alternate-reverse{ -webkit-animation-direction:alternate-reverse; animation-direction:alternate-reverse; }


/**********ループ回数【.keyframes_count】*********************/

/*ループ*/
.animation_box.keyframes_count-loop { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }
/*ループ回数*/
.animation_box.keyframes_count-02 { -webkit-animation-iteration-count: 2; animation-iteration-count: 2; }
.animation_box.keyframes_count-03 { -webkit-animation-iteration-count: 3; animation-iteration-count: 3; }
.animation_box.keyframes_count-04 { -webkit-animation-iteration-count: 4; animation-iteration-count: 4; }
.animation_box.keyframes_count-05 { -webkit-animation-iteration-count: 5; animation-iteration-count: 5; }



/* ****************************************************
  トランスレート【.translate】
***************************************************** */

/*上方向に移動 */
.anmation_container.active .translate-top-out{ -ms-transition: translateY(-20px); -webkit-transform: translateY(-20px); transform: translateY(-20px); }
/*下方向に移動 */
.anmation_container.active .translate-bottom-out{ -ms-transform: translateY(20px); -webkit-transform: translateY(20px); transform: translateY(20px); }
/*左方向に移動 */
.anmation_container.active .translate-left-out{ -ms-transform: translateX(-20px); -webkit-transform: translateX(-20px); transform: translateX(-20px); }
/*右方向に移動 */
.anmation_container.active .translate-right-out{ -ms-transform: translateX(20px); -webkit-transform: translateX(20px); transform: translateX(20px); }


/*上方向から定位置に移動 */
.anmation_container .translate-top-in{ -ms-transition: translateY(-20px); -webkit-transform: translateY(-20px); transform: translateY(-20px); }
/*下方向から定位置に移動 */
.anmation_container .translate-bottom-in{ -ms-transform: translateY(20px); -webkit-transform: translateY(20px); transform: translateY(20px); }
/*左方向から定位置に移動 */
.anmation_container .translate-left-in{ -ms-transform: translateX(-20px); -webkit-transform: translateX(-20px); transform: translateX(-20px); }
/*右方向から定位置に移動 */
.anmation_container .translate-right-in{ -ms-transform: translateX(20px); -webkit-transform: translateX(20px); transform: translateX(20px); }


/*移動距離（xs） */
.anmation_container .translate-top-in-xs{ -ms-transition: translateY(-10px); -webkit-transform: translateY(-10px); transform: translateY(-10px); }
.anmation_container .translate-bottom-in-xs{ -ms-transform: translateY(10px); -webkit-transform: translateY(10px); transform: translateY(10px); }
.anmation_container .translate-left-in-xs{ -ms-transform: translateX(-10px); -webkit-transform: translateX(-10px); transform: translateX(-10px); }
.anmation_container .translate-right-in-xs{ -ms-transform: translateX(10px); -webkit-transform: translateX(10px); transform: translateX(10px); }
.anmation_container.active .translate-top-out-xs{ -ms-transition: translateY(-10px); -webkit-transform: translateY(-10px); transform: translateY(-10px); }
.anmation_container.active .translate-bottom-out-xs{ -ms-transition: translateY(10px); -webkit-transform: translateY(10px); transform: translateY(10px); }
.anmation_container.active .translate-left-out-xs{ -ms-transform: translateX(-10px); -webkit-transform: translateX(-10px); transform: translateX(-10px); }
.anmation_container.active .translate-right-out-xs{ -ms-transform: translateX(10px); -webkit-transform: translateX(10px); transform: translateX(10px); }

/*移動距離（S） */
.anmation_container .translate-top-in-s{ -ms-transition: translateY(-20px); -webkit-transform: translateY(-20px); transform: translateY(-20px); }
.anmation_container .translate-bottom-in-s{ -ms-transform: translateY(20px); -webkit-transform: translateY(20px); transform: translateY(20px); }
.anmation_container .translate-left-in-s{ -ms-transform: translateX(-20px); -webkit-transform: translateX(-20px); transform: translateX(-20px); }
.anmation_container .translate-right-in-s{ -ms-transform: translateX(20px); -webkit-transform: translateX(20px); transform: translateX(20px); }
.anmation_container.active .translate-top-out-s{ -ms-transition: translateY(-20px); -webkit-transform: translateY(-20px); transform: translateY(-20px); }
.anmation_container.active .translate-bottom-out-s{ -ms-transition: translateY(20px); -webkit-transform: translateY(20px); transform: translateY(20px); }
.anmation_container.active .translate-left-out-s{ -ms-transform: translateX(-20px); -webkit-transform: translateX(-20px); transform: translateX(-20px); }
.anmation_container.active .translate-right-out-s{ -ms-transform: translateX(20px); -webkit-transform: translateX(20px); transform: translateX(20px); }

/*移動距離（M） */
.anmation_container .translate-top-in-m{ -ms-transition: translateY(-30px); -webkit-transform: translateY(-30px); transform: translateY(-30px); }
.anmation_container .translate-bottom-in-m{ -ms-transform: translateY(30px); -webkit-transform: translateY(30px); transform: translateY(30px); }
.anmation_container .translate-left-in-m{ -ms-transform: translateX(-30px); -webkit-transform: translateX(-30px); transform: translateX(-30px); }
.anmation_container .translate-right-in-m{ -ms-transform: translateX(30px); -webkit-transform: translateX(30px); transform: translateX(30px); }
.anmation_container.active .translate-top-out-m{ -ms-transition: translateY(-30px); -webkit-transform: translateY(-30px); transform: translateY(-30px); }
.anmation_container.active .translate-bottom-out-m{ -ms-transition: translateY(30px); -webkit-transform: translateY(30px); transform: translateY(30px); }
.anmation_container.active .translate-left-out-m{ -ms-transform: translateX(-30px); -webkit-transform: translateX(-30px); transform: translateX(-30px); }
.anmation_container.active .translate-right-out-m{ -ms-transform: translateX(30px); -webkit-transform: translateX(30px); transform: translateX(30px); }

/*移動距離（L） */
.anmation_container .translate-top-in-l{ -ms-transition: translateY(-40px); -webkit-transform: translateY(-40px); transform: translateY(-40px); }
.anmation_container .translate-bottom-in-l{ -ms-transform: translateY(40px); -webkit-transform: translateY(40px); transform: translateY(40px); }
.anmation_container .translate-left-in-l{ -ms-transform: translateX(-40px); -webkit-transform: translateX(-40px); transform: translateX(-40px); }
.anmation_container .translate-right-in-l{ -ms-transform: translateX(40px); -webkit-transform: translateX(40px); transform: translateX(40px); }
.anmation_container.active .translate-top-out-l{ -ms-transition: translateY(-40px); -webkit-transform: translateY(-40px); transform: translateY(-40px); }
.anmation_container.active .translate-bottom-out-l{ -ms-transition: translateY(40px); -webkit-transform: translateY(40px); transform: translateY(40px); }
.anmation_container.active .translate-left-out-l{ -ms-transform: translateX(-40px); -webkit-transform: translateX(-40px); transform: translateX(-40px); }
.anmation_container.active .translate-right-out-l{ -ms-transform: translateX(40px); -webkit-transform: translateX(40px); transform: translateX(40px); }

/*リセット*/
.anmation_container.active .translate-top-in,
.anmation_container.active .translate-bottom-in,
.anmation_container.active .translate-top-in-xs,
.anmation_container.active .translate-bottom-in-xs,
.anmation_container.active .translate-top-in-s,
.anmation_container.active .translate-bottom-in-s,
.anmation_container.active .translate-top-in-m,
.anmation_container.active .translate-bottom-in-m,
.anmation_container.active .translate-top-in-l,
.anmation_container.active .translate-bottom-in-l
{ -ms-transition: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); }
.anmation_container.active .translate-left-in,
.anmation_container.active .translate-right-in,
.anmation_container.active .translate-left-in-xs,
.anmation_container.active .translate-right-in-xs,
.anmation_container.active .translate-left-in-s,
.anmation_container.active .translate-right-in-s,
.anmation_container.active .translate-left-in-m,
.anmation_container.active .translate-right-in-m,
.anmation_container.active .translate-left-in-l,
.anmation_container.active .translate-right-in-l
{ -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); }

/* ****************************************************
  フェード【.fade】
***************************************************** */

.anmation_container .fade-in{
	filter: alpha(opacity=0);
	-moz-opacity:0;
	opacity:0;
}
.anmation_container.active .fade-in{
	filter: alpha(opacity=100);
	-moz-opacity:1.0;
	opacity:1.0;
}


.anmation_container .fade-out{
	filter: alpha(opacity=100);
	-moz-opacity:1.0;
	opacity:1.0;
}
.anmation_container.active .fade-out{
	filter: alpha(opacity=0);
	-moz-opacity:0;
	opacity:0;
}

/* ****************************************************
  ＿ズーム【.zoom】
***************************************************** */

/*拡大 */
.anmation_container.active .zoom-out-s{ -ms-transform: scale(1.05); -webkit-transform: scale(1.05); transform: scale(1.05); }
.anmation_container.active .zoom-out-m{ -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); }
.anmation_container.active .zoom-out-l{ -ms-transform: scale(1.15); -webkit-transform: scale(1.15); transform: scale(1.15); }
.anmation_container.active .zoom-out-xl{ -ms-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); }
/*縮小 */
.anmation_container.active .zoom-in-s{ -ms-transform: scale(0.95); -webkit-transform: scale(0.95); transform: scale(0.95); }
.anmation_container.active .zoom-in-m{ -ms-transform: scale(0.9); -webkit-transform: scale(0.9); transform: scale(0.9); }
.anmation_container.active .zoom-in-l{ -ms-transform: scale(0.85); -webkit-transform: scale(0.85); transform: scale(0.85); }
.anmation_container.active .zoom-in-xl{ -ms-transform: scale(0.8); -webkit-transform: scale(0.8); transform: scale(0.8); }

/* ****************************************************
  グラデーション【.gradient】
***************************************************** */

.anmation_container .gradient_black {
	background: linear-gradient(90deg, #FFF 0%, #1a1a1a 100%) repeat scroll 0 0 / 1000% 100%;
}

.anmation_container.active .gradient_black {
	background: linear-gradient(90deg, #FFF 0%, #1a1a1a 100%) repeat scroll 0 0 / 100% 100%;
}


/* ****************************************************
  スピードオプション【.anm_speed】
***************************************************** */

.anm_speed-s,
.anm_speed-s::after,
.anm_speed-s::before {
	-webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s;
	-webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; -o-animation-duration: 0.5s; animation-duration: 0.5s;/*keyframes用*/
}
.anm_speed-m,
.anm_speed-m::after,
.anm_speed-m::before {
	-webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; -o-transition-duration: 0.4s; transition-duration: 0.4s;
	-webkit-animation-duration: 1.0s; -moz-animation-duration: 1.0s; -o-animation-duration: 1.0s; animation-duration: 1.0s;/*keyframes用*/
}
.anm_speed-l,
.anm_speed-l::after,
.anm_speed-l::before {
	-webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; -o-transition-duration: 0.6s; transition-duration: 0.6s;
	-webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; -o-animation-duration: 1.5s; animation-duration: 1.5s;/*keyframes用*/
}
.anm_speed-xl,
.anm_speed-xl::after,
.anm_speed-xl::before{
	-webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s;
	-webkit-animation-duration: 2.0s; -moz-animation-duration: 2.0s; -o-animation-duration: 2.0s; animation-duration: 2.0s;/*keyframes用*/
}

.anm_speed2-s,
.anm_speed2-s::after,
.anm_speed2-s::before {
	-webkit-transition-duration: 1.0s; -moz-transition-duration: 1.0s; -o-transition-duration: 1.0s; transition-duration: 1.0s;
	-webkit-animation-duration: 4.0s; -moz-animation-duration: 4.0s; -o-animation-duration: 4.0s; animation-duration: 4.0s;/*keyframes用*/
}
.anm_speed2-m,
.anm_speed2-m::after,
.anm_speed2-m::before {
	-webkit-transition-duration: 1.5s; -moz-transition-duration: 1.5s; -o-transition-duration: 1.5s; transition-duration: 1.5s;
	-webkit-animation-duration: 6.0s; -moz-animation-duration: 6.0s; -o-animation-duration: 6.0s; animation-duration: 6.0s;/*keyframes用*/
}
.anm_speed2-l,
.anm_speed2-l::after,
.anm_speed2-l::before {
	-webkit-transition-duration: 2.0s; -moz-transition-duration: 2.0s; -o-transition-duration: 2.0s; transition-duration: 2.0s;
	-webkit-animation-duration: 8.0s; -moz-animation-duration: 8.0s; -o-animation-duration: 8.0s; animation-duration: 8.0s;/*keyframes用*/
}
.anm_speed2-xl,
.anm_speed2-xl::after,
.anm_speed2-xl::before{
	-webkit-transition-duration: 2.5s; -moz-transition-duration: 2.5s; -o-transition-duration: 2.5s; transition-duration: 2.5s;
	-webkit-animation-duration: 10s; -moz-animation-duration: 10s; -o-animation-duration: 10s; animation-duration: 10s;/*keyframes用*/
}

/* ****************************************************
  ディレイオプション【.anm_delay】
***************************************************** */

.anm_delay-s,
.anm_delay-s path { -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s;}
.anm_delay-m { -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s;}
.anm_delay-l { -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s;}
.anm_delay-xl{ -webkit-transition-delay: 0.7s; -moz-transition-delay: 0.7s; -o-transition-delay: 0.7s; transition-delay: 0.7s;}

.anm_delay2-s{ -webkit-transition-delay: 1.0s; -moz-transition-delay: 1.0s; -o-transition-delay: 1.0s; transition-delay: 1.0s;}
.anm_delay2-m{ -webkit-transition-delay: 1.5s; -moz-transition-delay: 1.5s; -o-transition-delay: 1.5s; transition-delay: 1.5s;}
.anm_delay2-l{ -webkit-transition-delay: 2.0s; -moz-transition-delay: 2.0s; -o-transition-delay: 2.0s; transition-delay: 2.0s;}
.anm_delay2-xl{ -webkit-transition-delay: 2.5s; -moz-transition-delay: 2.5s; -o-transition-delay: 2.5s; transition-delay: 2.5s;}


/* ****************************************************
  原点オプション【.anm_origin】
***************************************************** */

/*左上 */
.anm_origin-lt{ -moz-transform-origin:left top; -webkit-transform-origin:left top; -o-transform-origin:left top; -ms-transform-origin:left top; }
/*左下 */
.anm_origin-lb{ -moz-transform-origin:left bottom; -webkit-transform-origin:left bottom; -o-transform-origin:left bottom; -ms-transform-origin:left bottom; }
/*右上 */
.anm_origin-rt{ -moz-transform-origin:right top; -webkit-transform-origin:right top; -o-transform-origin:right top; -ms-transform-origin:right top; }
/*右下 */
.anm_origin-rb{ -moz-transform-origin:right bottom; -webkit-transform-origin:right bottom; -o-transform-origin:right bottom; -ms-transform-origin:right bottom; }


/* ****************************************************
  エフェクト【.effect】
***************************************************** */

/*基本設定*/
.effect_container{ display :block;}

.effect_wrp{ line-height: normal;}
.effect_box,.effect_wrp,effect_container{ overflow:hidden;  position: relative;}
.effect_wrp::after{ content: "";  display:block; position:absolute;width:100%; height:100%; top:0; left:0;}
.effect_box,.effect_wrp::after{
	/*アニメ高速化指定*/
	-webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/*オプション*/
.efc-inline .effect_container{ display:inline-block !important;}/*テキスト用*/

/***************** ボックス背景に色を出現させてから要素を表示 ******************/
.efc-bgColour .effect_container{ display : inline-block;}
.efc-bgColour .effect_container{ display :block;}
.efc-bgColour .effect_box{overflow:hidden; opacity:0; background-color:transparent;}


/*オプション*/
.efc-bgColour .effect_wrp::after{ background-color:#1a1a1a;}/*デフォルト*/
.efc-bgColour.e_bg-white .effect_wrp::after{ background-color:#FFFFFF;}
.efc-bgColour.e_bg-black .effect_wrp::after{ background-color:#1a1a1a;}
.efc-bgColour.e_bg-gray .effect_wrp::after{ background-color:#dcdcdc;}


.efc-bgColour.active .effect_wrp::after{
	-webkit-animation: efc-bgColour01 1.2s ease 0s; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards;/*実行後のスタイルの維持*/
	animation: efc-bgColour01 1.2s ease 0s; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards;/*実行後のスタイルの維持*/
}
.efc-bgColour.active .effect_box{
	-webkit-animation: efc-bgColour02 1.2s ease 0s; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards;/*実行後のスタイルの維持*/
	animation: efc-bgColour02 1.2s ease 0s; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards;/*実行後のスタイルの維持*/
}

@-webkit-keyframes efc-bgColour01 { 0% { width:0;} 60% { width:100%;} 61% { left:0%;} 100% { left:100%;} }
@-webkit-keyframes efc-bgColour02 { 0% {opacity:0;} 60% { opacity:0;} 61% { opacity:1;} 100% {opacity:1;}}
@keyframes efc-bgColour01 { 0% { width:0;} 60% { width:100%;} 61% { left:0%;} 100% { left:100%;} }
@keyframes efc-bgColour02 { 0% {opacity:0;} 60% { opacity:0;} 61% { opacity:1;} 100% {opacity:1;}}


/* ****************************************************
  ドローSVG【.drawsvg】
***************************************************** */

.drawsvg{ display:block;}
.drawsvg g{ fill: rgba(0,0,0,0);  /* fill: none; の代わり */ }
.drawsvg path{ stroke:#1a1a1a; stroke-width:1; }

.drawsvg.active g{ fill:#1a1a1a; }
.drawsvg.active path{ stroke-width:0; }

/*SVG個別設定（都度追加）*/
.svg_box01,.svg_box01 svg{ width:201px; height:116px;}
.svg_box02,.svg_box02 svg{ width:207px; height:105px;}
.svg_box03,.svg_box03 svg{ width:198px; height:50px;}

/* ****************************************************
  アニメーションの連鎖【.animation_chain】
***************************************************** */

.animation_chain path.hoge{
	display:none;
}