@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 .float {
	width: 770px;
	margin: 0 auto;
}

#clionesp .floating {
	position: fixed;
	left: auto;
	bottom: 0;
	display: none;
	z-index: 300;
}

#clionesp .floating a {
	display: block;
	padding: 8px;
	text-decoration: none;
}

#clionesp .floating a:hover {
	opacity: 1;
}

/********************************************************************
	top用
********************************************************************/
/*背景色*/
#clionesp #top h1{ 
	position: relative;
    z-index: 100;
}

#clionesp #top .grand-finale {
	padding: 100px 0 50px 0;
    margin: -80px 0 0 0;
    background:
        url("/sol/auto/images/fix/feature/260425_usotsukihime/pcc/top/final-book-cover-bg.png") no-repeat top 63% center,
        linear-gradient(to bottom, #424352, #7a6c81);
    background-size: auto;
}

#clionesp #top .grand-finale .grand-finale__wrap{
	margin: 0 auto;
	width: 635px;
}

#clionesp #top .campaign-period{
	font-size: 2.14rem;
	color: #fff;
	font-family: "Hiragino Mincho ProN", "游明朝", "Yu Mincho", "Noto Serif JP", "MS PMincho", serif;
}

/********************************************************************
	ストーリー
********************************************************************/
#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(/sol/auto/images/fix/feature/260425_usotsukihime/pcc/story/bg01-top.png) no-repeat, url(/sol/auto/images/fix/feature/260425_usotsukihime/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(/sol/auto/images/fix/feature/260425_usotsukihime/pcc/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(/sol/auto/images/fix/feature/260425_usotsukihime/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(/sol/auto/images/fix/feature/260425_usotsukihime/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;
}

/********************************************************************
	書影紹介
********************************************************************/
#clionesp #comic .comic_wrap{
	width: 727px;
	margin: 0 auto;
}

/*グラデーション*/
#clionesp #comic .gradation1{	background:url(/sol/auto/images/fix/feature/260425_usotsukihime/pcc/comic/smoke.png) no-repeat,
	linear-gradient(180deg, #16171a 0%, #6a4e78 10%, #dda2f3 20%, #eeccff 30%); 
	background-position: 0 top, top;
	padding: 100px 0 30px 0;
}

/********************************************************************
	その他対象作品はこちら
********************************************************************/
#clionesp #other-works{
	background: #eeccff;
}

#clionesp #other-works .other-works__wrap{
	padding: 35px 0 100px 0;
	margin: 0 auto;
	width: 710px;
}

#clionesp #other-works .img-glow {
    box-shadow:0 0 15px rgba(6, 0, 1, 0.35);
}

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