@charset "UTF-8";

/********************************************************************
	追加共通
********************************************************************/
.align-self-flex-end{align-self: flex-end;}/*下揃え　親要素がflex*/

/********************************************************************
	アニメーション
********************************************************************/
/*htmlにはclass名【blurTrigger】のみ入れる*/
#clionesp .blur{
  animation-name:blurAnime;
  animation-duration:1.8s;
  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;
  }
}
 
.blurTrigger{
    opacity: 0;
}

/********************************************************************
	ストーリー
********************************************************************/
#clionesp #story .koma01{
	margin: 0 0 -30px 0;
	position: relative;
	top: -30px;
	z-index: 100;
}

#clionesp #story .text01-01{
	position: absolute;
	top: 0;
	right: 0;
}

#clionesp #story .text01-02{
	position: absolute;
	bottom: 14px;
	left: 0;
}

#clionesp #story .koma02{
	margin: 0 0 -48px 0;
	padding: 95px 0 40px 0;
	background: url(/auto/images/fix/title/250524_clionesp/pcc/story/bg01-top.png) no-repeat, url(/auto/images/fix/title/250524_clionesp/pcc/story/bg01-bottom.png) no-repeat, linear-gradient(180deg, #c1bce1, #c9acd8);
	background-size: 100%;
	background-position: 0 30px, bottom, top;
	position: relative;
	top: -48px;
	z-index: 90;
}

#clionesp #story .text02-01{
	position: absolute;
	top: 0;
	right: 25px;
}

#clionesp #story .text02-02{
	position: absolute;
	bottom: -40px;
	left: 15px;
}

#clionesp #story .koma03-koma04{
	margin: 0 0 -7px 0;
	background: linear-gradient(180deg, #c9acd8, #d198cd);
	position: relative;
	top: -7px;
}

#clionesp #story .koma03{position: relative; z-index: 10;}

#clionesp #story .koma04{padding: 45px 0 0 0;}

#clionesp #story .text03{
	position: absolute;
	top: -22px;
	left: 27px;
	z-index: 0;
}

#clionesp #story .text04{margin: 0 0 -8px 0;}

#clionesp #story .koma05{
	padding: 2px 0 0 0;
	background: linear-gradient(180deg, #d198cd, #d28dc6);
}

#clionesp #story .koma06-koma07{
	background: linear-gradient(180deg, #d28dc6, #a77db1);
}

#clionesp #story .text07{
	position: absolute;
	top: -20px;
	right: 3px;
}

#clionesp #story .koma08-koma09{
	background: linear-gradient(180deg, #a77db1, #786c90);
}

#clionesp #story .koma08{
	background: url(/auto/images/fix/title/250524_clionesp/pcc/story/bg02.png) center bottom no-repeat;
}

#clionesp #story .text09{
	position: relative;
	left: 20px;
}

#clionesp #story .koma10-koma11{
	background: linear-gradient(180deg, #786c90 0%, #5e5d75 58%, #000 86%, #dbffa2 93%);
}

#clionesp #story .koma12-koma14{
	padding: 20px 0 40px 0;
	background: linear-gradient(180deg, #dbffa2 30%, #fff88e 60%, #dbffa2 100%);	
}

#clionesp #story .koma15{
	margin: 0 0 -20px 0;
	position: relative;
	top: -20px;
	z-index: 100;
}

#clionesp #story .text12-01{
	position: absolute;
	bottom: 340px;
	right: 20px;
	z-index: 105;
}

#clionesp #story .text12-02{
	position: absolute;
	bottom: 35px;
	left: 7px;
	z-index: 105;
}

#clionesp #story .koma16-koma17{
	margin: 0 0 -30px 0;
	padding: 46px 0 16px 0;
	background: linear-gradient(180deg, #f6cdf4, #ebcfff 50%, #ffd3fb, #9281a1 100%);
	position: relative;
	top: -30px;
}

#clionesp #story .koma18-koma21{
	background: #0f0d16;
}

#clionesp #story .koma18-koma21-bg-top{
	padding: 0 0 105px 0;
	background: url(/auto/images/fix/title/250524_clionesp/pcc/story/bg03-top.png) left 0 top -108px no-repeat;
}
#clionesp #story .text14{
	margin: 0 0 -80px 0;
	position: relative;
	top: -65px;
}

#clionesp #story .text15{
	margin: 0 0 -23px 0;
	position: relative;
	top: -23px;
}

#clionesp #story .koma18-koma21-bg-bottom{
	padding: 0 0 10px 0;
	margin: 0 0 -80px 0;
	position: relative;
	top: -80px;
	background: url(/auto/images/fix/title/250524_clionesp/pcc/story/bg03-bottom.png) left bottom no-repeat;
}

#clionesp #story .text16{
	position: absolute;
	bottom: 0;
	right: 0;
}

#clionesp #story .koma18-koma21-bg-bottom p{
	color: #fff;
	font-size: 1.2rem;
}

/********************************************************************
	上部クーポンarea非表示
********************************************************************/
.contents_right .couponArea2022{display: none;}