@charset "utf-8";
/* Page animation ============================================================================



====================================================================================== *


















/* Section animation ============================================================================



====================================================================================== */
























/* Parts(SET) animation ============================================================================



====================================================================================== */
/* section article etc ================================
ドロップダウンナビゲーション（https://coco-factory.jp/ugokuweb/move01/5-1-1/）
==================================================== */
/* Key Class「 dropdown 」 */
nav.dropdown{
  background:#333;
  color:#fff;
  text-align: center;
}
nav.dropdown ul{
  list-style: none;
  display: flex;
  justify-content: center;
}
nav.dropdown ul ul{
  display: block;
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav.dropdown ul li{
  position: relative;
}

/*ナビゲーションのリンク設定*/
nav.dropdown ul li a{
  display: block;
  text-decoration: none;
  color: #999;
  padding:20px 35px;
  transition:all .3s;
}
nav.dropdown ul li li a{
  padding:10px 35px;
}
nav.dropdown ul li a:hover{
  color:#fff;
}

/*2階層目を持つliの矢印の設定*/
nav.dropdown ul li.has-child::before{
  content:'';
  position: absolute;
  left:15px;
  top:25px;
  width:6px;
  height:6px;
  border-top: 2px solid #999;
  border-right:2px solid #999;
  transform: rotate(135deg);
}

/*3階層目を持つliの矢印の設定*/
nav.dropdown ul ul li.has-child::before{
  content:'';
  position: absolute;
  left:6px;
  top:17px;
  width:6px;
  height:6px;
  border-top: 2px solid #fff;
  border-right:2px solid #fff;
  transform: rotate(45deg);
}

/*下の階層を持っているulの指定*/
nav.dropdown li.has-child ul{
  /*絶対配置で位置を指定*/
  position: absolute;
  left:0;
  top:62px;
  z-index: 4;
  /*形状を指定*/
  background:#28BFE7;
  width:180px;
  /*はじめは非表示*/
  visibility: hidden;
  opacity: 0;
  /*アニメーション設定*/
  transition: all .3s;
}

/*hoverしたら表示*/
nav.dropdown li.has-child:hover > ul,
nav.dropdown li.has-child ul li:hover > ul,
nav.dropdown li.has-child:active > ul,
nav.dropdown li.has-child ul li:active > ul{
  visibility: visible;
  opacity: 1;
}

/*ナビゲーションaタグの形状*/
nav.dropdown li.has-child ul li a{
  color: #fff;
  border-bottom:solid 1px rgba(255,255,255,0.6);
}
nav.dropdown li.has-child ul li:last-child a{
  border-bottom:none;
}
nav.dropdown li.has-child ul li a:hover,
nav.dropdown li.has-child ul li a:active{
  background:#3577CA;
}

/*3階層目の位置*/
nav.dropdown li.has-child ul ul{
  top:0;
  left:182px;
  background:#66ADF5;
}
nav.dropdown li.has-child ul ul li a:hover,
nav.dropdown li.has-child ul ul li a:active{
  background:#448ED3;
}

/*==768px以下の形状*/
@media screen and (max-width:768px){
  nav.dropdown{
    padding: 0;
  }
  nav.dropdown ul{
    display: block;
  }
  nav.dropdown li.has-child ul,
  nav.dropdown.dropdown li.has-child ul ul{
    position: relative;
    left:0;
    top:0;
    width:100%;
    visibility:visible;/*JSで制御するため一旦表示*/
    opacity:1;/*JSで制御するため一旦表示*/
    display: none;/*JSのslidetoggleで表示させるため非表示に*/
    transition:none;/*JSで制御するためCSSのアニメーションを切る*/
  }
  nav.dropdown ul li a{
    border-bottom:1px solid #ccc;
  }
  nav.dropdown ul li.has-child::before{
    left:20px;
  }
  nav.dropdown ul ul li.has-child::before{
    transform: rotate(135deg);
    left:20px;
  }

  nav.dropdown ul li.has-child.active::before{
    transform: rotate(-45deg);
  }
}



/* section article etc ================================
線から塗り　左 → 右（https://coco-factory.jp/ugokuweb/move01/7-1-23/）
==================================================== */
.partsAnima_bl1 {
	display: inline-block;
	padding: 10px 30px;
	color: #333;
	border: 1px solid #ccc;
	text-decoration: none;
	outline: none;
	overflow: hidden;
	position: relative;
}
.partsAnima_bl1.is-focus {
	color: #ccc;
	border-color: transparent;
	transition-delay: .6s;
}
.partsAnima_bl1 span{
	display: block;
	z-index: 2;
}

/*== 線から塗に変化（左から右） */
.partsAnima_bl1 span::before,
.partsAnima_bl1 span::after {
	position: absolute;
	content: "";
	width: 0;
	height: 1px;
	background: #333;
	transition: all .3s;
}

.partsAnima_bl1 span::before {
	left:0;
	top:0;
}
.partsAnima_bl1 span::after {
	left:0;
	bottom:0;
}
.partsAnima_bl1.is-focus span::before,
.partsAnima_bl1.is-focus span::after {
	width: 100%;
}
.partsAnima_bl1::before{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: -1;
	height: 100%;
	width: 0;
	background: #333;
	transition: all .3s;
}
.partsAnima_bl1.is-focus::before{
	width: 100%;
	transition-delay: .4s;
}



/* section article etc ================================
random「showUP」アニメーション（https://coco-factory.jp/ugokuweb/move02/4-13/）
==================================================== */
.randomSU .box {
	opacity: 0;
}
.randomSU_act {
	animation-name: randomSU_act;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes randomSU_act {
  0% { transform: translateY(5px); opacity: 0;}
  100% { transform: translateY(0px); opacity: 1;}
}



/* Parts(単体) animation ============================================================================



====================================================================================== */
/* section article etc ================================
show アニメーション（）
==================================================== */
.showNormal {opacity: 0;}
.showNormal.showAct {
  animation-name: showNormal_act;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes showNormal_act {
  0% { opacity: 0;}
  100% { opacity: 1;}
}

.showUP {opacity: 0;}
.showUP.showAct {
  animation-name: showUP_act;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes showUP_act {
  0% { transform: translateY(3px); opacity: 0;}
  100% { transform: translateY(0px); opacity: 1;}
}

.showDOWN {opacity: 0;}
.showDOWN.showAct {
  animation-name: showDOWN_act;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes showDOWN_act {
  0% { transform: translateY(-3px); opacity: 0;}
  100% { transform: translateY(0px); opacity: 1;}
}

.showLR {opacity: 0;}
.showLR.showAct {
  animation-name: showLR_act;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes showLR_act {
  0% { transform: translateX(-3px); opacity: 0;}
  100% { transform: translateX(0px); opacity: 1;}
}

.showRL {opacity: 0;}
.showRL.showAct {
  animation-name: showRL_act;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes showRL_act {
  0% { transform: translateX(3px); opacity: 0;}
  100% { transform: translateX(0px); opacity: 1;}
}



/* section article etc ================================
スクロールダウン_サークルDOWN アニメーション（https://coco-factory.jp/ugokuweb/move01/9-1-2/）
ex.
<div class="scrollDown_s"><span>Scroll</span></div>
==================================================== */
.scrollDown_s {/* 位置 */
  position:absolute;
  bottom:10px;
  left:50%;
}
.scrollDown_s span {/* Scrollテキストの描写 */
    position: absolute;
    left: 7.5px;
    bottom: 15px;
    color: #eee;
    font-size: 0.7rem;
    letter-spacing: 0.35em;
    -ms-writing-mode: tb-rl;/* 縦書き設定 */
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}
.scrollDown_s:before {/* サークル描写 */
	position: absolute;
	content: "";
	bottom: 0;
	left: -4px;
	width: 10px;
	height: 10px;/* 形状 */
	border-radius: 50%;
	background: #ccc;
	animation:
		circlemove 2.5s ease-in-out infinite,
		cirlemovehide 2.5s ease-out infinite;/* アニメーション指定 1+2 */
	z-index: 1;
}
@keyframes circlemove {/* アニメーション 1 */
  0%{bottom:70px;}
  100%{bottom:-5px;}
}
@keyframes cirlemovehide {/* アニメーション 2 */
  0%{opacity:0}
  50%{opacity:1;}
  80%{opacity:0.9;}
  100%{opacity:0;}
}
.scrollDown_s:after {/* 線描写 */
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 2px;/* 形状 */
    height: 75px;
    background: #eee;
}



/* section article etc ================================
skewBtn アニメーション（）
ex.
<a href="#" class="skewBtn"><span> 流れる背景 </span></a>
==================================================== */
.skewBtn {
  overflow: hidden;
  display: inline-block;
  border: 1px solid #777;
  padding: 10px 30px;
  text-align: center;
  transition: ease .2s;
  position: relative;
}
.skewBtn:hover {
  border: 1px solid #005bb9;
}
.skewBtn span {
  color: #333;
  position: relative;
  z-index: 3;
}
.skewBtn:hover span {
  color: #fff;
}
.skewBtn::before {
  position: absolute;
  content: "";
  top: 0;
  left: -130%;
  width:120%;
  height: 100%;
  background: #075AA5;
  transform: skewX(-25deg);
}
.skewBtn:hover::before {
  animation: skewBtn_act .5s forwards;
}
@keyframes skewBtn_act {
  100% { left:-10%;}
}

/* section article etc ================================
imgZoomIn アニメーション（）
ex.
<div class="zoomIn">
<span class="mask"><img src="https://picsum.photos/id/1041/1200/640" alt="" width="320" height="200" style="border: 1px solid #777;"></span>
</div>
==================================================== */
.zoomIn img{
	transform: scale(1);
	transition: .3s ease-in-out;
	width: -webkit-fill-available;
	width: -moz-available;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.zoomIn:hover img,
.zoomIn a:hover img{
	transform: scale(1.2);
}
.zoomIn .mask{
	display: block;
	line-height: 0;
	overflow: hidden;
}



/* text animation ============================================================================

テキストアニメーション

====================================================================================== */
/* section article etc ================================
txt_showUpアニメーション（）
==================================================== */
.txt_hideShowUp{/* トリガー */
}
.txt_hideShowUp.showAct {
  animation: txt_hideShowUpAnime 0.75s linear;
  transform: translateY(0%);/* 初期位置 */
}
@keyframes txt_hideShowUpAnime {
  0% { transform: translateY(100%);}
  100% { transform: translateY(0%);}
}



/* section article etc ================================
flowingアニメーション（https://codepen.io/yochans/pen/MWgoGwo）
==================================================== */
/* .txt_flowing_wrap{
  width:100%;
  overflow: hidden;
} */
.txt_flowing{/* トリガー */
  animation: flowingAnime 10s linear infinite;
  transform: translateX(100%);/* 初期位置 */
}
@keyframes flowingAnime {
  100% { transform: translateX(-100%);}
}



/* section article etc ================================
BlurShowアニメーション（https://coco-factory.jp/ugokuweb/move02/8-9/）
==================================================== */
/* ↓ Trigger Class ↓ */
.txt_blur {
	opacity: 0;
}
.blur {
	animation-name: blurAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}
@keyframes blurAnime{
	0% { filter: blur(10px); opacity: 0;}
	100% { filter: blur(0); opacity: 1;}
}



/* section article etc ================================
Mixテキストアニメーション（）
==================================================== */
.txt_Anime_Mix {
  opacity: 0;
}
.t_mixA {
  animation-name: txt_Anime_Mix;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}
@keyframes txt_Anime_Mix{
	0% {filter: blur(10px);	transform: translateY(3px) skewX(350deg);	opacity: 0;}
	100% {filter: blur(0); transform: translateY(0px) skewX(350deg); opacity: 1;}
}



/* section article etc ================================
txt_typingアニメーション（https://coco-factory.jp/ugokuweb/move02/8-10/）
==================================================== */
.txt_typing span {
  display: none;
}
.txt_typing::after {
  content: "|";
  animation: typinganime .8s ease infinite;
}
@keyframes typinganime{
  from{opacity:0}
  to{opacity:1}
}



/* section article etc ================================
glowアニメーション（https://coco-factory.jp/ugokuweb/move02/8-17/）
==================================================== */
.txt_glow span{opacity: 0;}

/*アニメーションで透過を0から1に変化させtext-shadowをつける*/
.txt_glow.glow span{ animation:glow_anime_on 1s ease-out forwards; }

@keyframes glow_anime_on{
  0% { opacity:0; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
  50% { opacity:1;text-shadow: 0 0 10px #fff,0 0 15px #fff; }
  100% { opacity:1; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
}



/* section article etc ================================
アンダーライン アニメーション（）
==================================================== */
/* LR */
.txt_underYLR {position: relative; padding: 0.3em;}
.txt_underYLR span {position: absolute; content: ""; bottom: 0; left: 0;
    width: 100%; height: 25%;
    background: #075AA5AA;
	z-index: -1; border-radius: 10px;
	transform: translateX(-100%);
}
.txt_underStripeLR {position: relative; padding: 0.3em;}
.txt_underStripeLR span {position: absolute; content: ""; bottom: 0; left: 0;
  width: 100%; height: 7px;
  background: repeating-linear-gradient(-45deg, skyblue, skyblue 2px, white 2px, white 4px);
  transform: translateX(-100%);
}
.txt_underXLR {position: relative; border-bottom: 2px solid #ffc778;}
.txt_underXLR span {position: absolute; content: ""; display: block;
  bottom: -2px; left: 0; border-bottom: 2px solid skyblue;
  width: 50%;
  transform: translateX(-100%);
}
.txt_underYLR.showAct span,
.txt_underStripeLR.showAct span,
.txt_underXLR.showAct span {
  animation-name: underLR_act;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes underLR_act {
  from {transform: translateX(-100%);}
  to {transform: translateX(0px);}
}

/* RL */
.txt_underYRL {position: relative; padding: 0.3em;}
.txt_underYRL span {position: absolute; content: ""; bottom: 0; left: 0;
    width: 100%; height: 25%;
    background: #075AA5AA;
	z-index: -1; border-radius: 10px;
	transform: translateX(+100%);
}
.txt_underStripeRL {position: relative; padding: 0.3em;}
.txt_underStripeRL span {position: absolute; content: ""; bottom: 0; left: 0;
  width: 100%; height: 7px;
  background: repeating-linear-gradient(-45deg, skyblue, skyblue 2px, white 2px, white 4px);
  transform: translateX(+100%);
}
.txt_underXRL {position: relative; border-bottom: 2px solid #ffc778;}
.txt_underXRL span {position: absolute; content: ""; display: block;
  bottom: -2px; left: 0; border-bottom: 2px solid skyblue;
  width: 50%;
  transform: translateX(+100%);
}
.txt_underYRL.showAct span,
.txt_underStripeRL.showAct span,
.txt_underXRL.showAct span {
  animation-name: underRL_act;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes underRL_act {
  from {transform: translateX(+100%);}
  to {transform: translateX(0px);}
}