@charset "UTF-8";


/********************************************************************
	追加
********************************************************************/
/*margin-bottom　外側の下方向にスペースを空けたい時に使用*/
.m_mb15{margin-bottom: -15px!important;}
.m_mb30{margin-bottom: -30px!important;}
.m_mb45{margin-bottom: -45px!important;}
.m_mb70{margin-bottom: -70px!important;}
.mb5{margin-bottom: 5px!important;}
.mb10{margin-bottom: 10px!important;}
.mb15{margin-bottom: 15px!important;}
.mb20{margin-bottom: 20px!important;}
.mb25{margin-bottom: 25px!important;}
.mb30{margin-bottom: 30px!important;}
.mb35{margin-bottom: 35px!important;}
.mb40{margin-bottom: 40px!important;}
.mb45{margin-bottom: 45px!important;}
.mb50{margin-bottom: 50px!important;}
.mb60{margin-bottom: 60px!important;}
.mb65{margin-bottom: 60px!important;}
.mb70{margin-bottom: 70px!important;}
.mb80{margin-bottom: 80px!important;}
.mb90{margin-bottom: 80px!important;}
.mb100{margin-bottom: 100px!important;}
.mb110{margin-bottom: 110px!important;}
.mb120{margin-bottom: 120px!important;}
.mb130{margin-bottom: 130px!important;}
.mb150{margin-bottom: 150px!important;}
.mb160{margin-bottom: 160px!important;}
.mb180{margin-bottom: 180px!important;}
.mb200{margin-bottom: 200px!important;}

/*margin-top 　外側の上方向にスペースを空けたい時に使用*/
.mt20{margin-top: 20px!important;}
.mt25{margin-top: 25px!important;}
.mt35{margin-top: 35px!important;}
.mt50{margin-top: 50px!important;}
.mt80{margin-top: 80px!important;}

/*margin-right 　外側の右方向にスペースを空けたい時に使用*/
.mr10{margin-right: 10px!important;}
.mr12{margin-right: 12px!important;}
.mr15{margin-right: 15px!important;}
.mr20{margin-right: 20px!important;}
.mr25{margin-right: 25px!important;}

/*margin-left 　外側の右方向にスペースを空けたい時に使用*/
.ml10{margin-left: 10px!important;}
.ml15{margin-left: 15px!important;}
.ml80{margin-left: 80px!important;}

/*padding-top　内側の上方向にスペースを空けたい時に使用*/
.pt10{padding-top: 10px!important;}
.pt20{padding-top: 20px!important;}
.pt30{padding-top: 30px!important;}

/*padding-bottom　内側の下方向にスペースを空けたい時に使用*/
.pb20{padding-bottom: 20px!important;}
.pb30{padding-bottom: 30px!important;}

/*margin マイナス*/
.mb-minus10{margin-bottom: -10px!important;}
.mb-minus15{margin-bottom: -15px!important;}
.mb-minus20{margin-bottom: -20px!important;}
.mb-minus25{margin-bottom: -25px!important;}
.mb-minus30{margin-bottom: -30px!important;}
.mb-minus35{margin-bottom: -35px!important;}
.mb-minus40{margin-bottom: -40px!important;}

/*横幅のサイズ指定*/
.width8{width: 8%!important;}
.width10{width: 10%!important;}
.width15{width: 15%!important;}
.width16{width: 16%!important;}
.width17{width: 17%!important;}
.width18{width: 18%!important;}
.width19{width: 19%!important;}
.width20{width: 20%!important;}
.width21{width: 21%!important;}
.width22{width: 22%!important;}
.width23{width: 23%!important;}
.width24{width: 24%!important;}
.width25{width: 25%!important;}
.width26{width: 26%!important;}
.width27{width: 27%!important;}
.width28{width: 28%!important;}
.width29{width: 29%!important;}
.width30{width: 30%!important;}
.width31{width: 31%!important;}
.width32{width: 32%!important;}
.width33{width: 33%!important;}
.width34{width: 34%!important;}
.width35{width: 35%!important;}
.width36{width: 36%!important;}
.width37{width: 37%!important;}
.width38{width: 38%!important;}
.width39{width: 39%!important;}
.width40{width: 40%!important;}
.width41{width: 41%!important;}
.width42{width: 42%!important;}
.width43{width: 43%!important;}
.width44{width: 44%!important;}
.width45{width: 45%!important;}
.width46{width: 46%!important;}
.width47{width: 47%!important;}
.width48{width: 48%!important;}
.width49{width: 49%!important;}
.width50{width: 50%!important;}
.width51{width: 51%!important;}
.width52{width: 52%!important;}
.width53{width: 53%!important;}
.width54{width: 54%!important;}
.width55{width: 55%!important;}
.width56{width: 56%!important;}
.width57{width: 57%!important;}
.width58{width: 58%!important;}
.width59{width: 59%!important;}
.width60{width: 60%!important;}

.width65{width: 65%!important;}
.width70{width: 70%!important;}
.width80{width: 80%!important;}
.width81{width: 81%!important;}
.width82{width: 82%!important;}
.width83{width: 83%!important;}
.width84{width: 84%!important;}
.width85{width: 85%!important;}
.width88{width: 88%!important;}
.width90{width: 90%!important;}
.width100{width: 100%!important;}

/*text　テキストの揃え方指定　親要素に入れること*/
.text-left{text-align: left!important;}/*左揃え*/
.text-right{text-align: right!important;}/*右揃え*/
.text-center{text-align: center!important;}/*中央ぞろえ*/

/*img　画像の揃え方　クラス名のみ親要素に入れること(margin_○○ img　←imgは不要)*/
.margin-right img{margin: 0 0 0 auto!important;}
.margin-left img{margin: auto 0 0 0!important;}

/*possition　基準となる位置を決める　親要素に入れること*/
.position-relative{position: relative;}/*従来の位置*/
.position-absolute{position: absolute;}/*親の左上が基準*/

/*flex　横並びに使用　親要素に入れる 子要素はwidthで横幅を決めておくこと*/
.flex{display: flex;}

/*flex使用時のコンテンツの配置　flexと同じく親要素に入れること*/
.justify-sb{justify-content: space-between;}/*左右にわける*/
.justify-sa{justify-content: space-around;}/* 各アイテムを均等に配置し各アイテムの両側に半分の大きさの間隔を置く */
.justify-left{justify-content: left;}/*左配置*/
.justify-flex-end{justify-content: flex-end;}/*要素の終わり*/
.justify-se{justify-content: space-evenly;}/* 各アイテムを均等に配置し各アイテムの周りに同じ大きさの間隔を置く */
.justify-center{justify-content: center;}/*真ん中*/

.items-center{align-items: center;}/*子要素を上下中央で揃える*/
.flex-wrap{flex-wrap: wrap;}/*コンテンツを折り返す*/
.flex-end{align-items: flex-end;}/*下揃え*/
.row-reverse{flex-direction: row-reverse;}/*順番入れ替え*/

.flex-shrink{flex-shrink: 0;}/*要素を折り返しさせない*/
.flex-grow{flex-grow:1;}/*高さを揃える※親要素にflex-direction:columnを入れること*/
.flex-direction{flex-direction:column;}/*上から下に垂直方向に並べる*/
.margin-top-auto{margin-top: auto;}/*親要素にflexとflex-direction:column;で下揃え*/

.font-weight{font-weight: bold!important;}

/*aos用*/
.overflow-hidden{overflow: hidden;}

/********************************************************************
	共通
********************************************************************/
#debulove{
	margin: 0 auto;
	padding: 0 0 0 0;
	max-width: 770px;
	background: #fcec3c;
	text-align: center;
}

#debulove .wrap-all{
	margin: 0 auto;
	max-width: 710px;
	box-sizing: border-box;
}

	#debulove .wrap01{padding: 20px 0 100px 0;}
	#debulove .wrap02{padding: 30px 0 0 0;}

#debulove p{
	text-align: center;
	color: #1a1a1a;
	font-size: 1.4em;
}

#debulove img{
	max-width: 100%;
	height: auto;
	margin: 0 auto;
    display: block;
}

#debulove .img_width100 img{width: 100%;}
#debulove .img_auto img{width: auto!important;}

#debulove .big-font{font-size: 2.2rem!important;}
#debulove .small-font{font-size: 1.2rem!important;}

/*色*/
#debulove .orange{color: #ff6000;}
#debulove .red{color: #e50014;}
#debulove .blue{color: #0142ae;}
#debulove .green{color: #00a1be;}
#debulove .pink{color: #ff3ab3;}

/*太字*/
#debulove .bold{font-weight: bold;}

/*リスト*/
#debulove ul{
	color: #1a1a1a;
	text-align: left;
	list-style: none;
}
#debulove ul li{
	font-size: 1.6em;
	color: #1a1a1a;
}

#debulove .border-radius{
	background: #fff;
	border: 1px solid #000;
    -moz-border-radius: 10px; /* Firefox */
    -webkit-border-radius: 10px; /* Safari and Chrome */
    border-radius: 10px;
    behavior: url(border-radius.htc); /* IE */
}

#debulove p, #debulove ul li, #debulove a, #debulove h2, #debulove h3,  #debulove h4{
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO"!important;}

/********************************************************************
	リンク
********************************************************************/
#debulove a:hover{
	text-decoration: none;
	opacity: 0.7;
}

#debulove .koisowa-link{
	text-align: center;
	background: #fd3cb1;
	border: 2px solid #000;
	border-radius: 60px;
	-webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	box-shadow: 6px 6px #fff;
	box-sizing: border-box;
}

	#debulove .koisowa-link a{
		padding: 0px 10px 10px 10px;
		font-size: 3.5em;
   		color: #fff;
    	font-weight: bold;
		display: block;
		position: relative;
	}

	#debulove .koisowa-link a span{font-size: 2.5rem;}

#debulove .koisowa-link a::after{
	width: 30px;
	height: 30px;
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 0;
	bottom: 0;
	right: 18px;
	margin: auto;
	content: "";
	vertical-align: middle;
}

#debulove #anime .anime-link p a{
	color: #1a1a1a;
	border-bottom: 1px solid;
}

/********************************************************************
	見出し
********************************************************************/
#debulove h1 img{border: none!important;}

#debulove h2{
	position: absolute;
	left: 0;
	right: 0;
	top: -50px;
}

/********************************************************************
	共通box
********************************************************************/
#debulove .bg-box{
	padding: 20px 20px 20px 20px;
	max-width: 710px;
	width: 100%;
	background-color: #fff;
	box-sizing: border-box;
}

#debulove #campaign .bg-box{
	background-image: url(/auto/images/fix/250718_debulove/pcc/volumes_bg.png);
	background-repeat: no-repeat;
	background-position: right bottom;
}

/********************************************************************
	背景
********************************************************************/
#debulove .bg01{
	background: url(/auto/images/fix/250718_debulove/pcc/bg01.png) repeat-y;
	background-size: 100%;
}

#debulove .bg02{
	padding: 0 0 55px 0;
	background: url(/auto/images/fix/250718_debulove/pcc/bg02.png) repeat-y;
	background-size: 100%;;
}

/********************************************************************
	top
********************************************************************/
#debulove p.can-time{
	padding: 5px 5px 5px 5px;
	font-size: 1.8rem;
	letter-spacing: 0.3rem;
	color: #fff;
	background: #fc3cb1;
}

/********************************************************************
	キャンペーン
********************************************************************/
#debulove .bg-box .books img{
	margin: 0 auto 0 0;
	width: 267px;
	height: auto;
	border: 1px solid #000;
}

#debulove .logo{padding: 25px 0 0 0;}

#debulove .volumes10_can{
	position: relative;
	right: -156px;
	bottom: -71px;
}

#debulove .volumes10_can + div.bg-box .logo {
	padding: 55px 0 0 0!important;
}

#debulove .kakioroshi_font{font-size: 1.8em;}

/*巻*/
#debulove p.volumes40,#debulove p.volumes01,#debulove p.volumes01_tokuso{
	font-size: 5.5em;
	font-weight: bold;
}

#debulove p.volumes40 span, #debulove p.volumes01 span, #debulove p.volumes01_tokuso span {font-size: 80%;}

	#debulove .volumes40{
		position: relative;
		right: -96px;
		bottom: -25px;
	}

	#debulove .volumes01{
		position: relative;
		right: -118px;
		bottom: -10px;
	}

	#debulove .volumes01_tokuso{
		position: relative;
		right: -118px;
		bottom: -10px;
	}

/********************************************************************
	アニメ化情報-共通＆通常
********************************************************************/
#debulove #anime .bg-box{padding: 50px 20px 60px 20px;}

#debulove #anime .anime-copyright{
	font-size: 1.2rem;
}

#debulove #anime p{
	font-size: 1.8rem;
}

#debulove #anime p small{font-size: 1.3rem;}

#debulove #anime h3 {
    padding: 0 14px 0 14px;
    font-size: 2.5em;
    border-bottom: 2px dashed #fd3cb1;
    display: inline-block;
}

#debulove #anime h4{
	font-size: 1.8rem;
	font-weight: normal;
}

/********************************************************************
	アニメ化情報-あらすじ
********************************************************************/
#debulove #anime .synopsis p{
	border-bottom: 1px solid #696969;	
}

/********************************************************************
	アニメ化情報-キャラクター紹介
********************************************************************/
#debulove #anime .character h4 {
	color: #fff;
	background: #fd3cb1;
	border-radius: 25px;
	font-size: 2.6rem;
	font-weight: bold;
	letter-spacing: 0.5rem;
}

#debulove #anime .height-adjustment{
	margin: 0 0 45px 0;
	position: relative;
	top: -45px;
}

/********************************************************************
	アニメ化情報-キャストコメント
********************************************************************/
#debulove #anime .cast-comment h4{
	font-size: 2.6rem;
	color: #fd3cb1;
	font-weight: bold;
}

#debulove #anime .cast-comment p{
	font-size: 1.3rem;
	line-height: 1.8;
	text-align: left;
}

#debulove #anime .cast-comment .other-comment p{
	text-align: center;
	font-size: 1.8rem;
	font-weight: bold;
}

#debulove #anime .cast-comment .other-comment p.font-big{font-size: 2.4rem;}

/********************************************************************
	youtube
********************************************************************/
#debulove .youtube-ratio{
	margin: 0 auto;
	padding-top: 56.25%;
	width: 100%;
	position: relative;
}

#debulove .youtube-ratio iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/********************************************************************
	テーマソング
********************************************************************/
#debulove #anime .theme-song p.decided{
	font-size: 2.4rem!important;
	font-weight: bold;
}

	#debulove #anime .theme-song p.decided span{font-size: 3.4rem;}

#debulove #anime .theme-song p.ending-theme{
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 2;
}

#debulove #anime .theme-song h4{
	padding: 5px 30px 5px 30px;
	font-size: 2.8rem;
	background: #81fff1;
	display: inline-block;
	font-weight: bold;
}

#debulove #anime .theme-song h4 + p {
	font-size: 1.8rem;
	line-height: 2;
}

/********************************************************************
	コマサム
********************************************************************/
#debulove .coma-font p{
	padding: 0 10px 0 10px;
	font-size: 3.2em;
	font-weight: bold;
	letter-spacing: 0.1em;
	background: linear-gradient(transparent 75%, white 0%);
	display: inline-block;
}

	#debulove .coma-font p span.small{font-size: 70%;}

/*コマサム*/
#debulove .title-chiramise{
	position: relative;
    bottom: -32px;
}

/********************************************************************
	ままかり先生お祝いイラスト
********************************************************************/
#debulove #celebration-illustration p{
	font-size: 1.3em;
	line-height: 2em;
}

/********************************************************************
	アニメキャラクターデザイン
********************************************************************/
#debulove #character-design p small{
	font-size: 1rem;
}

/********************************************************************
	アニメPv
********************************************************************/
#debulove #anime-pv .title-anime-pv{
	position: relative;
    bottom: -32px;
}

#debulove #anime-pv .title-anime-pv + .bg-box {
    padding: 80px 20px 80px 20px!important;
}