/*---------------------------------------------------
.contents
---------------------------------------------------*/


.contents-block.sm-narrow{
	max-width		: 66.666666%;
	margin-left		: auto;
	margin-right		: auto;
}



.contents-block.slik_box {
	padding			: 6rem;
}


/*---------------------------------------------------
.contents-header
---------------------------------------------------*/
.contents-header{
	padding-top		: 4rem;
	padding-bottom		: 3rem;
	text-align		: center;
}

.contents-header h2{
	font-size		: 3rem;
	color			: #5fbf5b;
	margin-bottom		: 1rem;
}

.contents-header .sub-title{
	background-color	: #5fbf5b;
	color			: #fff;
	letter-spacing		: 0.2rem;
	padding			: 0.05rem 2rem;
	display			: inline-block;
	position		: relative;
	border-radius		: 4rem;
}

.contents-header img {

	max-width		: 300px;

}


/*---------------------------------------------------
#contents-nav
---------------------------------------------------*/
#contents-nav{
	padding-bottom		: 1rem;
	padding-right		: 1rem;
	padding-left		: 1rem;
}

.c_nav-items{
	text-align		: center;
}

.c_nav-items a{
	padding			: 0.5rem 2rem;
	margin-bottom		: 1rem;
	background		: #fbdb31;
	border-radius		: 4rem;
	display			: block;
}

/*---------------------------------------------------
.more
---------------------------------------------------*/
.second .more{
	padding			: 0.5rem 4rem;
	margin-bottom		: 1rem;
	background		: #fbdb31;
	border-radius		: 4rem;
	display			: inline-block;
	font-size		: 1.5rem;
	letter-spacing		: 0.2rem;
}


/*---------------------------------------------------
.list
---------------------------------------------------*/

.list-inner {
	border-radius		: 4px;
	overflow		: hidden;
	margin			: 0.5rem 0;
	position		: relative;
}

#backnumber .list-inner {
	border			: 1px solid #3b4041;
	padding			: 2rem;
}

#backnumber .box-title{
	position		: absolute;
	top			: -1rem;
	left			: 2rem;
	padding			: 0 1.5rem;
	font-weight		: bold;
	font-size		: 1.6rem;
	background		: #fffcf5;
	z-index			: 2;
	
}

/*---------------------------------------------------
.title
---------------------------------------------------*/

.title h2{
	font-size		: 3rem;
	color			: #3b4041;	
}


.title.no-border::before {
	border			: none;
}

.second .title {
	color			: #3b4041;
}

.second .title.third {
	margin-top		: 2rem;
}



.title.iron span{
	font-size		: 2.4rem;
	letter-spacing		: 0.5rem;
	font-weight		: 500;
	position		: relative;
	padding-right		: 70px;
	padding-left		: 70px;
	margin-right		: 2rem;	
	margin-left		: 2rem;
	color			: #7f4c30;
	line-height		: 1.4;
}

.title.iron span:before,
.title.iron span:after{
	content			: "";
	width			: 36px;
	height			: 36px;
	position		: absolute;
	top			: 50%;
	-webkit-transform	: translateY(-50%);
	transform		: translateY(-50%);
	background-image	: url('/images/common/iron.png');
	background-repeat	: no-repeat;
	background-size		: contain;
	
}

.title.iron span:after{
	left			: 15px;
}

.title.iron span:before{
	right			: 15px;
}

.title.iron span img{
	max-height		: 32px;
	display			: inline-block;
	vertical-align		: middle;
	margin-top		:-5px;
}

/*---------------------------------------------------
.chara-box
---------------------------------------------------*/
.chara-box{
	background		: #a8cd51;
	border-radius		: 4px;
	overflow		: hidden;
	position		: relative;
	color			: #fff;
}


.chara-box.turfy_papa{
	background		: #79d1f5;
}

.chara-box.turfy_mama{
	background		: #ff9900;
}

.chara-box.ponita{
	background		: #fa99bd;
}

.chara-box.hellokitty{
	background		: #e40011;
}

.chara-name{
	padding			: 2rem 0;
}

.chara-name img{
	max-width		: 172px;
	display			: block;
}

.chara-image img{
	max-width		: 152px;
	margin			: 0 auto;
	display			: block;
}

.family-detail{
	padding			: 0;
	margin			: 0;
	padding-top		: 2rem;
	padding-bottom		: 2rem;
	border-top		: 3px dotted #fff;
	list-style		: none;
}

.chara-box p{
	padding			: 0 1rem;
	padding-bottom		: 2rem;
}

.chara-box-inner{
	padding			: 1rem;
}

.family-detail li{
	padding			: 0;
	margin			: 0;
	padding			: 0.25rem 1rem;
}

.family-detail li .family-detail-cat{
	padding-left		: 3rem;
}


.family-detail li .family-detail-cat:after{
	content			: "\f005";
	font-family		: "Font Awesome 5 Free";
	position		: absolute;
	font-weight		: bold;
	top			: 1.25rem;
	left			: 0.5rem;
	font-size		: 1.75rem;
	color			: #fbdb31;
	-webkit-transform	: translateY(-50%);
	transform		: translateY(-50%);
	-moz-osx-font-smoothing	: grayscale;
	-webkit-font-smoothing	: antialiased;
	display			: inline-block;
	font-style		: normal;
	font-variant		: normal;
	text-rendering		: auto;
	line-height		: 1;

}

#races .grid-item .card .card-body p {
	min-height		: 13rem;
}


@media (max-width:576.98px) {
	#races .grid-item .card .card-body p {
	min-height		: 14rem;
	}
}

#races .grid-item .card .card-body h3 {
	min-height		: 6rem;
	padding-top		: 1rem;
	position		: relative;
}

#races .grid-item .card .card-body h3.small {
    font-size: 1.3rem;
}

#races .grid-item .card .card-body h3 span {
	position		: absolute;
	display			: inline-block;
	top			: 50%;
	left			: 0;
	-webkit-transform	: translateY(-50%);
	transform		: translateY(-50%);	
}




/*---------------------------------------------------
.new
---------------------------------------------------*/
.new:before {
	position		: absolute;
	content			: "";
	width			: 100px;
	height			: 100px;
	top			: -50px;
	left			: -50px;
	background		: #fe4249;
	-webkit-transform	: rotate(-45deg);
	transform		: rotate(-45deg);
	box-shadow		: 0 2px 1px rgba(0,0,0,.1);
  }
.new span{
	position		: absolute;
	font-family		: 'Quicksand', sans-serif;
	font-weight		: bold;
	text-align		: center;
	top			: 14px;
	left			: 4px;
	font-size		: 1.6rem;
	letter-spacing		: 0.1rem;
	color			: #fff;
	-webkit-transform	: rotate(-45deg);
	transform		: rotate(-45deg);
}



/*---------------------------------------------------
.download-list
.wallpaper-list
---------------------------------------------------*/
.wallpaper-list,
.download-list{
	position		: relative;

}

.wallpaper-list .list-items,
.download-list .list-items{
	padding			: 0px 5px;
}

.wallpaper-list  .list-inner,
.download-list .list-inner{
	border-radius		: 4px;
	margin			: 0;
}

.list-inner{
	border-radius		: 4px;
	overflow		: hidden;
	display			: block;
	position		: relative;
}

.slick-prev::before, .slick-next::before{
	color			: #495057;
	font-size		: 4rem;

}

.slick-prev, .slick-next {
	z-index			: 4;
	font-size		: 0;
	line-height		: 0;
	position		: absolute;
	top			: 50%;
	display			: block;
	width			: 40px;
	height			: 40px;
	padding			: 0;
	-webkit-transform	: translate(0, -50%);
	-ms-transform		: translate(0, -50%);
	transform		: translate(0, -50%);
	cursor			: pointer;
	color			: transparent;
	border			: none;
	outline			: none;
	background		:transparent;
}

.slick-prev {
	left			: -45px;
}

.slick-next {
	right			: -45px;
}

.resultBox {
	display			: none;
}

.rouletteBtn{
	margin 			: 2rem	auto;
	max-width		: 300px;
	background		: #fbdb31;
	font-weight		: bold;
	padding			: 0.75rem  2.5rem;
	border-radius	: 4px;
	text-align		: center;
}

.resultImg,
.resultList{
	padding			: 1rem;
}

.resultList{
	list-style		: none;
}

.areaItaLv3{
	max-width		: 800px;
	margin			: 0 auto;
}
.imgRace{
	border-radius		: 7px;
	overflow		: hidden;
	display			: block;
}


.question-icon{
	border-radius		: 2px;
	background		:#fbdb31;
	padding			: 0.5rem 1rem;
	color			:#6b3f3f;
}
.match-img{
	text-align		: center;
}

.match-img img{
	max-width		:600px;
}

/*---------------------------------------------------
news
---------------------------------------------------*/
.news-update_date{
	text-align		: right;
}

.youtube{
	border-radius		: 4px;
	overflow		: hidden;
	display			: inherit;
	display			: block;
	max-height		: 415px;
}

.lead{
	text-align		: center;
	font-weight		: 600;
	font-size		: 1.5rem;
}


/*---------------------------------------------------
prof
---------------------------------------------------*/

@media (min-width: 992px) {
	.set-top img{
		margin-top	: -9rem;
	}
}

#races .card-body{
		display		: none;
}

#races .grid-item{
		cursor		: pointer;
}
.race-gotoch-chara{
	text-align		: center;
	padding-top		: 2.5rem;
	padding-bottom	: 2.5rem;
}
.race-gotoch-chara .race-gotoch-chara-image{
	max-width		: 300px;
	margin			: 0 auto;
	position		: relative;
	overflow		: hidden;
	border-radius		: 4px;
}

.race-gotoch-chara .chara-text{
	padding-top		: 1.5rem;
}

.race-gotoch-chara .chara-text h3{
	font-size			: 2.4rem;
	padding-bottom		: 1.5rem;
}

.modal-wall .prev,
.modal-wall .next{
	position		: absolute;
	display			: inline-block;
	top				: 50%;
	-webkit-transform	: translateY(-50%);
	transform		: translateY(-50%);
	cursor			: pointer;
	opacity			: .75;
	color			: #495057;
	z-index			: 3;
}
.modal-wall .prev{
	left			: 0.5rem;
}
.modal-wall .next{
	right			: 0.5rem;
}

.modal-wall .prev .fas,
.modal-wall .next .fas{
	font-size		: 3.5rem;
}

.modal-wall .prev:hover,
.modal-wall .next:hover {
	opacity			: 1;
}

/*---------------------------------------------------
news-article
---------------------------------------------------*/
.news-article a{
	display			: inline-block;
}

.news-article a:hover{
	text-decoration		: underline;
}

hr {
	border-top		:2px solid #eee6de;
}
/*---------------------------------------------------
quiz
---------------------------------------------------*/
#quiz{
	padding-top		: 2rem;
}
#quiz .badge{
	border			: 1px solid #f2f2f2; 
	display			: inline-block;
	padding			: 0.5rem 2rem;
	border-radius		: 4px;
	width			: 100px;
	color			: #fff;
	margin-bottom		: 2rem;
	text-align		: center;
}
#quiz .badge.question{
	background		: #2aaf32;
}

#quiz .list-inner{
	padding			: 1rem;
}

.question_title{
	border-bottom		: 4px dotted #ddd;
	padding-bottom		: 2rem;
	margin-bottom		: 2rem;
}
.question_title h2{
	color 			: #2aaf32;
	line-height		: 1.65;
}
#quiz .answer-list{
	font-size		: 1.5rem;
	margin-bottom		: 2rem;
}

#quiz .answer-list a{
	padding			: 1.5rem;
	padding-left		: 6rem;
	position		: relative;
	display			: block;
	margin-bottom		: 1rem;
	border			: 1px solid #f2f2f2; 
	background		: #f6e58b;
	border-radius		: 4px;
	font-weight		: bold;
	overflow		: hidden;

}

#quiz .answer-list a:after{
	position		: absolute;
	top			: 1.25rem;
	left			: 1.5rem;
	font-size		: 2rem;
	color			: #6b3f3f;
	font-family		: 'Varela Round', 'Kosugi Maru','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3',"メイリオ", Meiryo,"ＭＳ Ｐゴシック", "MS PGothic";
}

#quiz .answer-list a:before{
	content			: "";
	position		: absolute;
	top			: 0;
	left			: 0rem;
	width			: 4.5rem;
	height			: 100%;
	background		: #fbdb31;
}

#quiz .answer-list a:nth-child(1):after{
	content			: "A";
}

#quiz .answer-list a:nth-child(2):after{
	content			: "B";
}

#quiz .answer-list a:nth-child(3):after{
	content			: "C";
}
#quiz .turfy-icon{
	text-align		: right;
	padding			: 3rem 0;
}

#quiz .turfy-icon img{
	max-width		:144px;
}

#quiz .answer-list a:hover {
	opacity			: 0.75;
}

#quiz.mistake .turfy-icon{
	text-align		: center;
}

#quiz.mistake .turfy-icon img{
	max-width		:317px;
}


#quiz .btn{
	display			: inline-block;
	padding			: 0.75rem 2.5rem;
	display			: inline-block;
	border-radius		: 4px;
	margin			: 1rem auto;
	font-weight		: normal;
	background		: #2aaf32;
}

#quiz.collect .list-inner .question_title{
	border 			:none;
}

#quiz.clear .list-inner .question_title{
	color			:#fc6371;
	font-size		: 2rem;
	border-color		: #fc6371;
	padding-bottom		: 0rem;
	margin-bottom		: 0rem;
}


#quiz.clear .list-inner .question_title h3{
	font-size		: 2rem;
}

#quiz.clear img{
	padding			: 2rem 1rem;
}
#quiz .detail .badge{
	background		: #6b3f3f;
}

#quiz .detail h3{
	color			: #6b3f3f;
	line-height		: 1.65;
}

#quiz .detail h3 a {
	display: inline;
	border-bottom: 2px #6b3f3f solid;
	padding-bottom: 3px;
	line-height: 1;
}

#quiz .question_title.answer h2{
	color			: #E23C34;
}

#quiz .clear-img{
	text-align		: center;
	padding-bottom		: 2rem;
}

#quiz .clear-img img{
	max-width		: 400px;
}

/*---------------------------------------------------
comic
---------------------------------------------------*/
.bkNum-inner {
  display: flex;
  flex-wrap: wrap;
}

.box26 {
  width			: calc((100% / 3) - 2rem);
	position		: relative;
	margin			: 0.75rem;
	padding			: 1rem;
	border			: solid 1px rgba(68,68,68,0.3);
	border-radius		: 8px;
  background   : #fff ;
  overflow    : hidden;
}

.box26:hover {
}

@media screen and (max-width: 992px) { 
  .contents-block.md-narrow.bkNum {
    max-width  : 95%;
  }
	.box26{
		width			: calc((100% / 2) - 1.5rem);
	}
}

@media screen and (max-width: 576px) { 
	.box26{
		width			: 100%;
    margin-bottom: 1rem;
	}
}

.box26 .box-title {
	position			: absolute;
	display				: inline-block;
	top				: -10px;
	left				: 10px;
	padding				: 0 9px;
	line-height			: 1;
	font-size			: 16px;
	background			: #fffcf5;
	font-weight			: bold;
	letter-spacing			: 0.1rem;
}

.box26 .box-body{
  padding: 0px 0.5rem;
  padding-bottom: 0.5rem;
}

.box26 .box-thumb{
	width				: 100px;
	height				: 100px;
	float				: right;
}

.box26 .box-body:after{
	content				: "";
	display				: block;
	clear				: both;	
}

.box26 .story-num{
	padding-bottom			: 0.5rem;
}

.box26 .box-text p {
  font-weight: bold;
}

.box26 .new-badge,
.box26 .textNum{
  border-radius   : 4rem;
	font-size		    : 1.2rem;
	letter-spacing	:0.1rem;
}

.box26 .textNum{
  display: inline-block;
  width: 6em;
  padding: 0;
  background: #fbdb31;
  text-align: center;
}

.box26 .new-badge {
  
  display: inline-block;
  width: 4.5em;
  padding: 0;
  margin-left: 0.25rem;
  background: #fe4249;
  text-align: center;
  color: #fff;
}

.box26 .new-badge:before {
  display: none;
}

.box26.hidden{
	display: none;
}