@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);
}