@charset "UTF-8";
/* 文字コードセット */

/* reset　
---------------------------------------------------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, /*sup,*/ var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
html{
	overflow-y: scroll;
	scroll-behavior: smooth;
}
body {
	line-height:1;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
	display:block;
}

nav ul {
	list-style:none;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}

a {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}

mark {
	background-color:#ff9;
	color:#000;
	font-style:italic;
	font-weight:bold;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom:1px dotted #000;
	cursor:help;
}

table {
	border-collapse:collapse;
}

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #ddd;
    margin:0;
    padding:0;
	margin-bottom:20px
}

input, select {
	vertical-align:middle;
}


/* 全体構造
---------------------------------------------------- */
a:hover,input[type="submit"]:hover,input[type="button"]:hover{opacity:0.6;filter: alpha(opacity=60);}

body{
	font-size:90%;
	line-height:175%;
	font-family:"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", "ＭＳ Ｐゴシック", Meiryo, sans-serif;
	letter-spacing:0.1em;
	color:#333;
}



/* link
---------------------------------------------------- */
a:link,a:visited{color:#666;text-decoration:underline;}
a:hover,a:active{color:#666;text-decoration:none;}


/* header
---------------------------------------------------- */
header{
	width:1000px;
	margin:0px auto;
	height:101px;
	margin-top:15px;
}
header div{
	display:inline-block;
	color:#643d0f;
	text-align:center;
	line-height:1.0em;
	font-size:10px;
}
header div a{ display:block; margin-bottom:5px;}
header h1{
	text-align:center;
	margin-left: 64px;
}


/* common
---------------------------------------------------- */
img{border:0;vertical-align:top;}
h2,h3,h4,h5,h6{clear:both;}
iframe{ vertical-align:top}

.clear{clear:both;}

.f-left{float:left;}
.f-right{float:right;}
.center-block{ margin:0px auto; display:block}
.center-height{ display:table;}
.center-height_inr{ display:table-cell; vertical-align:middle}

.img100{ width:100%; height:auto;}
.img_circle{ border-radius:50%}
.img_round{ border-radius:15px}

.box{
	border:4px double #b2b0aa;
	padding:24px;
}
.box2{
	background-color:#643d0f;
	padding:15px 20px;
	color:#fff;
}
.ul_star{
	list-style:none
}
.ul_star li:before{ content:" \f006";font-family: FontAwesome; font-weight:normal; margin-right:7px;}

.ul-float{
	list-style:none;
}
.ul-float li{
	float:left;
	width:275px;
	background-color:#d2edf9;
	padding:5px 0px;
	text-align:center;
	margin:0px 10px 10px 0px
}
.ul-float2 li{
	margin-left:20px;
	float:left;
	width:16.66%;
}

/* テキスト関係 */
.tal{text-align:left !important}
.tac{text-align:center;}
.tar{text-align:right;}
.fsi{ font-style:italic}
.fs70{ font-size:70%; line-height:1.6em}
.fs80{ font-size:80%; line-height:1.6em}
.fs90{ font-size:90%; line-height:1.6em}
.fs100{ font-size:100%}
.fs120{ font-size:120%}
.fs130{ font-size:130%}
.fs140{ font-size:140%}
.fs150{ font-size:150%}
.fs160{ font-size:160%}
.fs170{ font-size:170%}
.fs180{ font-size:180%}
.fs190{ font-size:190%}
.fs200{ font-size:200%}
.fs220{ font-size:220%}
.fs350{ font-size:350%}
.lsn{ list-style:none;}
.lhn{ line-height:normal}
.fwn{ font-weight:normal}
.block{ display:block}
.indent{ text-indent:-1em; margin-left:1em}
.red{color:#c73036}
.brown{ color:#643d0f}

/* サイズ指定 */
.w435{ width:435px}
.w470{ width:470px}
.w500{ width:500px}
.w535{ width:535px}

.mb5{ margin-bottom:5px}
.mb10{ margin-bottom:10px}
.mb15{ margin-bottom:15px}
.mb20{ margin-bottom:20px}
.mb25{ margin-bottom:25px}
.mb30{ margin-bottom:30px}
.mb40{ margin-bottom:40px}
.mb50{ margin-bottom:50px}
.mb60{ margin-bottom:60px}
.mb80{ margin-bottom:80px}
.mt30{ margin-top:30px}
.ml20{ margin-left:20px}
.ml30{ margin-left:30px}
.mr10{ margin-right:10px}
.mr30{ margin-right:30px}
.pl30{ padding-left:30px;}
.pl40{padding-left: 40px;}
.pl50{ padding-left:50px;}
.pr30{ padding-right:30px;}
.mt50{ margin-top:50px}
.mt170{ margin-top:170px}
.mt200{ margin-top:200px}

@media print {
}



/* Androidブラウザフォントバグ対策 文字を大きくしたくない場合 */
#main h3,
#main h4,
#main h5,
#main h6,
#main p,
#main dt,
#main dl{
    max-height: 999999px;
}


/*aリンク無効*/
.disable{ cursor:default;}
.fs16{font-size: 15px;}
.fwb{font-weight:bold;}


:target {
	scroll-margin-top: 2rem;
}



/*----------------------------*/
/*--SNS--*/
@media screen and (min-width:985px){
  .ul-sns{width:950px; margin:0 auto;}
}
.ul-sns li{list-style-type:none; margin-left:5px;}

.mt10{margin-top:10px;}

.ranking-main{
  background:#999;
}
.text-top{
	font-weight:bold;
	text-align:center;
	margin:15px 0;
	font-size:1rem;
}

/*上部タブ*/
.tab{
	position:relative;
}
.tabletest{
	width:950px;
	margin:0 auto;
	overflow-x: scroll !important;
	overflow:scroll-x;
}
.tabletest td{
	width:90px;
	margin-right:5px;
}

.tabletest td img:hover{
  opacity: 0.6;
  transition-duration: 0.3s;
}

.tabletest .active{
	border-top:6px solid #fb0;
	box-sizing:border-box;
}

.sidescrollL{
	color:#fff;
	font-weight:bold;
	font-size:1.3rem;
	line-height:80px;
	position:absolute;
	z-index:1000;
	top:10px;
	left:0;
	background:rgba(0,0,0,0.2);
}
.sidescrollR{
	color:#fff;
	font-weight:bold;
	font-size:1.3rem;
	line-height:80px;
	position:absolute;
	z-index:1000;
	top:10px;
	right:0;
	background:rgba(0,0,0,0.2);
}
@media screen and (min-width: 950px) {
	.sidescrollL, .sidescrollR{
	display:none;
	}
}
/* iphoneSE時のタブ */
@media screen and (max-width: 321px) {
	.tabletest img{width:60px; height:auto;}
}


/*----------------------------*/
/*ランキング1-50位*/

.ranking-l .btn {
    padding: 0;
}

.ranking-l a:hover {
    color: #fff;
    opacity: 1;
}

.ranking-l a {
    display: block;
    height: 100%;
    width: 100%;
	padding: 1em;
}


@media screen and (min-width: 641px) {
	.ranking-l{
		width:80%;
		margin:0 auto;
	}
}

@media screen and (min-width: 577px) {
	.title123{position:relative;display: flex;align-items: center;}
	.title123 h3{
		position:relative;
		top:10%;
	}
}
@media screen and (max-width: 576px) {
	.rank123 img{width:70px;height:auto;}
	.title123{position:relative;}
	.title123 h3{text-align:center;position:relative;}
}
.rank123{
		text-align:center;
}
.rank {
    background: #338a41;
    text-align:center;
    position:relative;
}
.rank p{
    color: #fff;
    font-size: 1.8rem;
    line-height: 2.8rem;
    font-weight: bold;

}
.rank p span{
		font-size:60%;
}
.title h3{
    font-size: 1.8rem;
    line-height: 2.6rem;
    font-weight: bold;
}
.summary{
		font-size:1.1rem;
		line-height:1.5rem;
}
.hr{margin:50px 0 50px 0}


@media screen and (min-width: 641px) {
.hr{margin:50px 0 80px 0}
}

/*----------------------------*/
/*ランキング50位以降*/
.ranking-s li{
  list-style-type: none;
	padding:8px;
}

.ranking-s li .btn {
    overflow: hidden;
    padding: 0;
}

.ranking-s a {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.3em;
    font-size: 0.8em;
}

.ranking-s a:hover{
	color: #fff;
	opacity: 1;
}

.rank-s{
	margin-top:10px;
	line-height:1rem;
}
.ranking-s h3{
  font-size:12px;
  font-weight:bold;
  word-break: break-all;
  height: 2.4em;
  overflow: hidden;
  padding: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.2;
}
.ranking-s img {
    width: 100%;
    aspect-ratio: 7/10;
    object-fit: contain;
    background: #f1f1f1;
}

@media screen and (max-width: 576px) {
  .ranking-s h5{height: 2.7rem;}
}
.ranking-s h6{
  font-size: 0.7em;
  letter-spacing:0;
  white-space:pre-wrap;
}

/* キーワード・ジャンル・ キャラランキング*/
.table-bordered.table-striped.text-center.col-12 td a {
    font-size: clamp(1rem,2vw,22px);
}

/* pc */
@media screen and (min-width: 961px) {
}
 
/* tablet  */
@media only screen and (min-width: 641px) and (max-width: 960px) {
}
 
/* smartPhone */
@media screen and (max-width: 640px) {
}

/*もっと見るボタン*/
.readmorestyle{
	margin:10px 0;
	background:#f33;
}
.readmorestyle a{
	color:#fff;
	font-size:1.3rem;
	font-weight:bold;
	line-height:2.5rem;
	text-decoration: none;
}

.hide-text, .hide-text01, .hide-text02, .hide-text03, .hide-text04, .hide-text05, .hide-text06, .hide-text07, .hide-text08, .hide-text09{
    display: none;
}

/*キーワードランキング*/
.keyword table{
	letter-spacing:0rem;
}
.keyword table, .keyword th{
	border:none;
}


@media screen and (min-width: 641px){
	.keyword th, .keyword td {
    padding: 0.5rem;
	}
	.space{
		line-height:1em;
	}
	.cell02{
		width:60px;
	}
}
@media screen and (min-width: 375px) and (max-width: 640px){
	.keyword th, .keyword td {
    padding: 0.4rem;
	}
	.space{
		line-height:2em;
	}
	.cell02{
		width:60px;
	}
}

/* smartPhone */
@media screen and (max-width: 374px) {
	.keyword th, .keyword td {
    padding: 0.1rem;
	}
	.space{
		line-height:1em;
	}
}

/*ランキングアンカーリンクナビ*/
.ranking_link {
    width: 100%;
    max-width: 1000px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
    overflow-x: auto;
    margin: 3% auto;
}

.ranking_link a {
    display: flex;
    background: #ffab14;
    padding: 0.5em;
    text-decoration: none;
    color: #fff;
    flex: 1 1 auto;
    min-width: fit-content;
    justify-content: center;
	box-sizing: border-box;
}

.ranking_link a:not(:last-of-type){
	border-right: 1px solid #fff;
}

.ranking_link.js_content_adult a{
	background: #f33;
}

.ranking_link.ranking_link_word {
    flex-wrap: wrap;
    padding: 1%;
    justify-content: flex-start;
	position: relative;
	z-index: 0;
}

.ranking_link.ranking_link_word a {
    margin: 0.5%;
    width: 19%;
    flex: 0 0 auto;
	border-right:none
}


/* 対象タイトル切り替え */

.target_toggle_wrap {
    max-width: 950px;
    width: 100%;
    margin: auto;
    padding: 0.5em 1em;
}

#target_toggle_btn{
	display: none;
}

.toggle_btn{
	display: flex;
	width: fit-content;
	border:3px solid #000;
	background-color: #000;
	position: relative;
	color: #fff;	
	cursor: pointer;
	transition: all 0.5s;
	margin-left: auto;
}

.toggle_btn_allage,.toggle_btn_adult{
	display: block;
	width: 5em;
}

.toggle_btn::after{
	content: "表示中";
	display: block;
	width: 50%;
	height: 100%;
	top: 0;
	left: 50%;
	background-color: #fff;
	position: absolute;
	transition: all 0.5s;
	color: #000;
}

#target_toggle_btn:checked ~ .toggle_btn{
	background-color: #f33;
	border:3px solid #f33;
}

#target_toggle_btn:checked ~ .toggle_btn::after{
	left:0;
	color: #f33;
}

.js_content_close{
	display: none;
}