@charset "UTF-8";

/********************************************************************
	top用
********************************************************************/
/*背景色*/
#clionesp #top .KV{
	background-color:#b396b1;    
	position: relative;
    z-index: 100;
}

#clionesp #top .introduction{
	background-color:#be9eb9;
	margin: -10px 0 -40px 0;
}

#clionesp #top .volume1{
	position: relative;
    z-index: 100;
}

#clionesp #top .characters{
	background-color:#be9eb9;
	margin: -70px 0 0 0;
}


/********************************************************************
	bottom用-上部
********************************************************************/
/*幅指定（作品紹介）*/
#clionesp #bottom .comic_wrap{
	width: 727px;
	margin: 0 auto;
}

/*グラデーション*/
#clionesp #bottom .gradation1{
	background:url(/auto/images/fix/title/250524_clionesp/pcc/bottom/decoration/smoke.png) no-repeat,
	linear-gradient(180deg, #16171a, #6a4e78,#dda2f3);  
	background-position: 0 top, top;
	padding: 100px 0 0 0;
}

#clionesp #bottom .gradation2{
	padding: 30px 0 0 0;
	background:linear-gradient(180deg, #dda2f3, #fdc2ff,#f2d3ff);  
}

#clionesp #bottom .gradation3{
	padding: 30px 0 0 0;
	background:linear-gradient(180deg, #f2d3ff, #efceff,#eecdff);  
}

#clionesp #bottom .gradation4{
	padding: 30px 0 20px 0;
	background:linear-gradient(180deg, #eecdff, #efceff,#f4ddff);  
}

/********************************************************************
	bottom用-下部　書影一覧
********************************************************************/
#clionesp #bottom .comic_wrap2{
	margin: 0 auto;
	padding: 30px 20px 30px 20px;
	width: 732px;
	background-color: rgba(255, 255, 255,0.6);
    box-shadow: 0 0 8px 4px rgba(255, 255, 255,0.6);
	position: relative;
	overflow: visible;
	z-index: 0;
}

#clionesp #bottom .comic_wrap2::before{
	position: absolute;
	content: "";
	top: -8px;
	bottom: -8px;
	left: -8px;
	right: -8px;
	background:url(/auto/images/fix/title/250524_clionesp/pcc/bottom/decoration/flame1.png) no-repeat, url(/auto/images/fix/title/250524_clionesp/pcc/bottom/decoration/flame2.png) no-repeat, url(/auto/images/fix/title/250524_clionesp/pcc/bottom/decoration/flame3.png) no-repeat, url(/auto/images/fix/title/250524_clionesp/pcc/bottom/decoration/flame4.png) no-repeat;
	background-position: left top, right top, left bottom, right bottom;
	z-index: 10;
}

#clionesp #bottom .comic_wrap2 ul{
	position: relative;
	z-index: 100;
}

/*タイトル*/
#clionesp #bottom .comic_wrap2 h4{
	font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}

#clionesp #bottom .comic_wrap2 h4.title-long a{font-size: 2.2rem;}

#clionesp #bottom .comic_wrap2 h4 a{
	font-size: 2.4rem;
	color: #000;
	text-decoration: none;
	line-height: 1.2;
}

#clionesp #bottom .comic_wrap2 h4 a span.sub-title{font-size: 1.6rem; display: block;}
#clionesp #bottom .comic_wrap2 h4 a span.sub-title02{font-size: 1.2rem;	display: block;}
#clionesp #bottom .comic_wrap2 h4 a span.sub-title03{font-size: 1rem; display: block;}

/*文字の最後が【。】の場合*/
#clionesp #bottom .comic_wrap2 h4 a span.letter-spacing05{letter-spacing: 0.05em;}

#clionesp #bottom .comic_wrap2 h4 a:hove{color: #000;}

/*ジャンル*/
#clionesp #bottom .flex-grow06{
	flex-grow: 6;
}

/*ジャンルの高さを合わせる*/
#clionesp #bottom .comic_wrap2 ul li:nth-child(1) h4,
#clionesp #bottom .comic_wrap2 ul li:nth-child(2) h4{height: 75px;}

/********************************************************************
	スライダー
********************************************************************/
#clionesp #bottom .slider-common{
	margin: 0 auto;
	padding: 20px 20px 5px 20px;
	width: 550px;
	background-color: rgba(255, 255, 255, 0.6); /* 背景色：白・60%透明 */
	box-shadow: 0 0 8px 4px rgba(255, 255, 255,0.6);
	box-sizing: border-box;
}

#clionesp #bottom .slider-common p{
	color: #000;
	font-size: 1rem;
}

/*矢印*/
#clionesp #bottom .prev-arrow{left: -40px;}
#clionesp #bottom .next-arrow{right: -40px;}

#clionesp #bottom .prev-arrow,
#clionesp #bottom .next-arrow {
    display: block;
    width: 50px;
    height: 50px;
    background: #641986;
    border-radius: 50%;
    transition: all .3s ease;
    cursor: pointer;
	position: absolute;
	top: 50%;
	transform: translateY(-50%); /* ← これで上下中央に補正 */
}

#clionesp #bottom .prev-arrow {
    transform: rotate(180deg);
}

#clionesp #bottom .prev-arrow::before,
#clionesp #bottom .next-arrow::before{
    position:absolute;
    content: "";
    width:14px;
    height:14px;
    border-right: 3px solid #FFF;
    border-top: 3px solid #FFF;
    top:0;
    bottom:0;
    left:0;
    right:5px;
    margin:auto;
    transform:rotate(45deg);
}