@charset "UTF-8";

/* reset */
html, body {
	height: 100%;
	min-height: 100%;
}
body{
	margin:0;
}
div,p,ul,li,dl,dt,dd,form {
	margin:0;
	padding:0;
}
h1,h2,h3,h4,h5,h6 {
	margin:0;
	padding:0;
	font-size:1rem;
	font-weight:normal;
}
li{
	list-style:none;
}
/* common */
body{
	font-size:0.9rem;
	line-height:1.8rem;
	background: #fff;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
a{
	color: #069;
	text-decoration:none;
}
@media(max-width: 767px){
	.pc {
		display: none;
	}
}
@media(min-width: 768px){
	.sp {
		display: none;
	}
}
.more a {
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	top:0;
	left:0;
	text-indent:150%;
	opacity:0;
	background:#FFF;
	overflow:hidden;
	white-space:nowrap;
}
.more a:hover{
	opacity:0.4;
}
.mb10 {
	margin-bottom: 10px;
}
.mb20 {
	margin-bottom: 20px;
}
.mt10 {
	margin-top: 10px;
}
.mt20 {
	margin-top: 20px;
}
.txt-center {
	text-align: center;
}
.font-s {
	font-size: .7rem;
}
p.font-s {
	line-height: 1.5;
}
#breadcrumb {
	padding: 0 10px;
	margin-bottom: 10px;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	white-space: nowrap;
}
#breadcrumb li{
	display:inline;
}
#breadcrumb li:before{
	content: ">";
	padding-right: 5px;
	color: #aaa;
}
#breadcrumb li:first-child:before{
	content:"";
}
#breadcrumb li img {
    vertical-align: text-bottom;
}
#breadcrumb i{
	font-size: .9rem;
	position: relative;
	top: .2rem;
}
@media(max-width:767px){
	#breadcrumb {
		font-size: .6rem;
	}
	#breadcrumb ul {
		overflow: hidden;
		word-break : break-all;
		text-overflow: ellipsis;
	}
	#breadcrumb li{
		padding-right: 0;
	}
	#channel #breadcrumb li {
	    width: calc(100% - 120px);
	}
}
@media(min-width:768px){
	#breadcrumb {
		font-size: .7rem;
	}
	#breadcrumb li{
		padding-right: 5px;
	}
}

/* blog */
#blog article > h1 {
	font-size: 1.2rem;
}
#blog-article>p{
	background: #FFF;
	border-bottom: 1px solid #ddd;
	padding: 4px 8px;
	margin-bottom: 20px;
}
#blog-article>p a::after{
	background:#D00;
	border-radius:3px;
	content: "NEW";
	color:#FFF;
	display:inline-block;
	font-size:.6rem;
	line-height:100%;
	margin-left:6px;
	padding:3px;
}
@media(max-width:767px){
	#blog-article>p{
		margin-top: 0;
		font-size: .7rem;
		line-height: 1.6;
		padding: 8px;
	}
}



/* ad */
article .ad{
	background: #FFF;
/*	box-shadow:rgb(100, 100, 100) 0px 0px 5px -1px;*/
/*	padding: 25px 0;*/
	text-align: center;
	margin: 0 auto;
	min-height: 250px;
}
article>.ad{
    border: none;
    box-shadow: none;
    background: none;
	line-height: 0;
}
/*#channel .ad,*/
#signup .ad{
	box-shadow:none;
	background:none;
	text-align:center;
}
/*
#channel section .ad{
	padding-bottom: 0;
	margin: auto;
}
*/
#channel article .ad {
	margin-bottom: 20px;
}
@media(min-width:768px){
	.ad.ad-header,
	.ad.ad-list-top,
	.ad.ad-list-inner,
	.ad.ad-list-bottom,
	.ad.ad-ranking-top,
	.ad.ad-ranking-inner,
	.ad.ad-ranking-bottom,
	.ad.ad-blog-top,
	.ad.ad-blog-inner,
	.ad.ad-blog-bottom {
		padding: 20px 0;
	}
	.ad-ydn-overlay {
		display: none;
	}
	.ad.imobile.ad-ranking-bottom {
		display: none;
	}
	.ad.ad-news-infeed {
		margin: 0 20px;
	}
}
@media(max-width:767px){
	.ad.ad-list-bottom,
	.ad.ad-ranking-bottom,
	.ad.ad-blog-top {
		padding-bottom: 20px;
	}
	.ad-ydn-overlay {
		position: fixed;
		z-index: 1000;
		bottom: 0;
		left: 0;
		width: 100%;
   		background: #fff;
    	border-top: 1px solid #ccc;
	}
	.ad.imobile.ad-ranking-bottom {
		padding: 20px 0 0 0;
		margin-bottom: -35px;
	}
	.ad.ad-news-infeed {
		margin: 0 10px;
	}
	.ad.ad-ranking-top,
	.ad.ad-channel-tab-bottom,
	.ad.ad-blog-top,
	.ad.ad-ranking-top,
	.ad.ad-channel-tab-bottom,
	.ad.ad-blog-top {
		min-height: 78vw;
	}
}
body > div > article {
	min-height: 78vh;
	padding-top: 53px;
}

@media(max-width:767px){
	article .col2 div:first-child {
		margin-bottom: 20px;
	}
}
@media(min-width:768px){
	article .col2{
		display: table;
		margin: auto;
	}
	article .col2 div{
		display: table-cell;
		vertical-align:top;
		text-align: center;
		width: 49%;
	}
	article .col2 div:first-child{
		padding-right: 2%;
	}

	article .ad .col2 .adsbygoogle{
		width:336px;
		height:280px;
	}
}
#page section .ad{
    border:none;
    box-shadow:none;
    background:none;
    padding:20px 0 0 0;
}

img{
	max-width:100%;
	height: auto;
}
#header {
	position: relative;
	background: #b71c1c;
	color: #fff;
	box-shadow:rgb(100, 100, 100) 0px 0px 5px -1px;
	transition: .5s;
	z-index: 250;

	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}
@media print {
	#header {
		position: static;
	}
}

#header h1 {
	font-family: 'Oswald', sans-serif;
}
#header h1 a {
	color: #FFF;
	font-weight: normal;
}
#menu-trigger {
	position: absolute;
	left: 7px;
	top: 0;
	cursor: pointer;
	line-height: 0;
	text-align: center;
	transition: ease .5s;
	transform: translateX(0);
}
#menu-trigger i {
	font-size: 40px;
}
#menu-trigger span {
	font-size: 10px;
	display: block;
}

/* search */
#hnav .signup,
#hnav .mypage,
#search-trigger {
	position: absolute;
	z-index: 300;
	cursor: pointer;
	top: 6px;
}
#hnav .signup,
#hnav .mypage {
	right: 55px;
}
#hnav .signup {
	display: none;
}
#hnav .mypage {
	display: none;
	top: 9px;
	line-height: 11px;
}
#search-trigger {
	right: 15px;
}
#hnav a {
	color: #fff;
}
#hnav i {
	font-size: 30px;
}
#hnav p {
	line-height: 9px;
	text-align: center;
}
#hnav button {
	color: #fff;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	border: none;
	border-radius: 0;
	font: inherit;
	outline: none;
}
#hnav p span {
	display: block;
	font-size: .6rem;
}
#hnav .mypage img {
	width: 26px;
	border-radius: 50%;
}
#header-search {
	display: none;
	background: #f0f0f0;
	position: relative;
	box-shadow:rgb(100, 100, 100) 0px 0px 5px -1px;
}
#header-search form {
	display: flex;
	justify-content: center;
}
#header-search form input[type="text"],
#header-search form input[type="submit"] {
	border:1px solid #999;
	-webkit-appearance: none;
	height:24px;
	font-size:14px;
	line-height:14px;
	padding:0 5px;
}
#header-search form .radio {
	color: #000;
	padding-left: 1em;
}
#header-search form .radio label {
	display: inline-block;
}
#header-search form .radio input {
	vertical-align: text-top;
}
#header-search form input,
#header-search form i {
	margin:0;
}
#header-search form i {
	font-size: 1.8rem;
	position: relative;
	top: 0;
	left: -2px;
}
#header-search form input[type="text"] {
	border-radius:3px 0 0 3px;
	width: auto;
}
#header-search form input[type="submit"] {
	background:#DDD;
	border-radius:0 3px 3px 0;
	width:50px;
	border-left:0;
	height:26px;
	color:#555;
}
#header-search form i {
	color: #666;
	font-size: 1.4rem;
	position:relative;
	top: 3px;
	left: -2px;
}
@media(max-width:969px){
	#header h1 {
		margin-left: 50px;
		white-space: nowrap;
		position:static;
		padding: 12px 3% 3px 3%;
	}
	#header h1 a img {
		height: 29px;
		width: auto;
	}
	#header-search {
		padding: 10px;
	}
	#header-search form i {
		display: none;
	}
	#header-search form input[type="text"] {
		width: 44vw;
	}
	#header-search form input[type="submit"] {
		width: 41px;
	}
	#header-search form .radio {
		font-size: .75rem;
	}
}
@media(min-width:970px){
	#header {
		margin-bottom:5px;
	}
	#header h1 {
		text-align: center;
		font-size: 1.1rem;
		padding: 10px 8px 4px 8px;
	}
	#header h1 a img {
		height: 32px;
	}
	#menu-trigger.drawer-active {
		transform: translateX(300px);
		transition: .5s;
	}
	#header-search {
		padding: 15px;
	}
	#header-search form input[type="text"] {
		width: 50%;
	}
}
/* drawer menu */
#drawer-overlay {
	z-index: 300;
    left: 0;
    visibility: hidden;
    width: 100%;
	height: 100%;
	top: 0;
	position: fixed;
    background-color: rgba(0,0,0,.2);
}
#drawer-overlay.drawer-active {
	visibility: visible;
}
#drawer-overlay #gnav {
	background: #000;
	position: fixed;
	top: 0;
	left: 0;
	width: 300px;
	height: 100%;
	transform: translateX(-300px);
	transition: ease .5s;
	z-index: 200;
	overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
#drawer-overlay #gnav::-webkit-scrollbar {
	display: none;
}
#drawer-overlay.drawer-active #gnav {
	display: block;
	transform: translateX(0);
	transition: ease .5s;
}
#gnav > ul {
	margin-bottom: 100px;
}
#gnav li {
	border-bottom: 1px solid #333;
	background: #111;
}
#gnav li i {
	color: #555;
	font-size: 1.1rem;
	position: relative;
	top: 3px;
    margin-right: .2rem;
}
#gnav li a {
	color: #fff;
	display: block;
}
#gnav li li {
	font-size: .8rem;
	line-height: 1.4;
	background: #222;
}
#gnav li li a {
	padding: 8px 10px;
	margin-left: .5rem;
}

#gnav li ul li:last-child {
	border-bottom: 0;
}
#gnav li img {
	vertical-align: middle;
}
#gnav .gnav-user {
	display: flex;
	justify-content: space-between;
	padding: 10px;
}
#gnav .gnav-user p {
	flex-basis: 49%;
}
#gnav .gnav-user p a,
#gnav .signout p a {
	display: block;
    background: #fff;
    border-radius: 5px;
    color: #000;
    line-height: 1;
	text-align: center;
	border-bottom: 2px solid #555;
}
#gnav .gnav-user p:first-child a {
	background: #c00;
	color: #fff;
	border-bottom: 2px solid #b71c1c;
}
#gnav.signin-active .signout,
#gnav.signin-active .mypage {
	display: block;
}
#gnav.signin-active .gnav-user {
	display: none;
}
#gnav .signout {
	padding: 10px;
	display: none;
}
#gnav .signout p a {
	padding: 8px;
	background: #999;
}
#gnav .mypage {
	display: none;
}
#gnav li.new a:after {
	content: "NEW";
	display: inline-block;
    color: #222;
    background-color: #ff0;
    border-radius: 2px;
    line-height: 1;
    padding: 2px;
    margin-left: 4px;
    font-size: 10px;
}
@media(max-width:480px){
	#gnav li a {
		padding: 6px 10px;
	}
	#gnav .gnav-user p a {
		padding: 10px;
	}
	#gnav li li {
		font-size: .7rem;
	}
	#gnav li li ul {
		display: flex;
	}
	#gnav li li li:first-child a {
		margin-left: 1rem;
	}
}
@media(min-width:481px) {
	#gnav li li li:first-child {
		border-top: 1px solid #333;
	}
	#gnav li li li a {
		margin-left: 1rem;
	}
}
@media(min-width:481px) and (max-width:969px){
	#gnav li a {
		padding: 8px 10px;
	}
	#gnav li li {
		font-size: .7rem;
	}
}
@media(min-width:969px){
	#gnav li a {
		padding: 12px 10px;
	}

}

/* footer */
footer {
	background: #333;
	text-align: center;
	margin-top: 2em;
	padding: 2em 1.5em 1em 1.5em;
	font-size: .75rem;
}
footer #pagetop {
	position: fixed;
	bottom: 10px;
	right: 15px;
	font-size: 77%;
	z-index:30;
}
footer #pagetop a {
	text-decoration: none;
	color: #666;
	text-align: center;
	display: block;
	border-radius: 5px;
	background:#FFF;
	line-height:1rem;
	box-shadow:rgb(100, 100, 100) 0px 0px 5px -1px;
}
footer #pagetop a:hover{
	-moz-opacity:0.85;
	opacity:0.85;
	filter:alpha(opacity=85);
}
footer p {
	margin-bottom: .5em;
}	
footer a {
	color: #fff;
	margin: 0 .7em;
	display: inline-block;
}
footer #footer-logo {
	margin: 15px 0 5px 0;
}

/* icon */
.material-icons {
	text-align: baseline;
	visibility: hidden;
	max-width: 1em;
}
.wf-active .material-icons {
	visibility: visible;
}
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* index */
section.ranking header h1 {
	font-size: 1.2rem;
	font-weight: 800;
	margin-bottom: .7em;
	line-height: 1.3;
	padding-left: 7px;
	border-left: 7px solid #b71c1c;
}
section.ranking header > p {
	font-size: .8rem;
	padding:0 15px 15px 15px;
	line-height: 1.5;
}
section.ranking nav.mode ul {
	display:table;
	width:100%;
}
section.ranking nav.mode li {
	display:table-cell;
	width:33.3%;
	font-size:0.8rem;
	background:#CCC;
/*	border:1px solid #DDD;*/
    border-right:1px solid #F0F0F0;
}
section.ranking nav.mode ul:nth-child(2) li{
    border-top:1px solid #F0F0F0;
}
section.ranking nav.mode ul li:last-child{
    border-right:0;
}
section.ranking nav.mode li.selected{
	background: #b71c1c;
}
section.ranking nav.mode li a {
	display:block;
	color:#FFF;
	position:relative;
	padding:2px 15px 2px 32px;
	white-space:nowrap;
}
section.ranking nav.mode li a i {
	position:absolute;
	left:5px;
	bottom:1px;
	width:24px;
}
section.ranking nav.mode li a:hover{
	background:#f44336;
}
section.ranking nav.date ul,
#trend nav.date ul {
	display: table;
	width: 100%;
	margin-bottom: 15px;
}
section.ranking nav.date li,
#trend nav.date li {
	display:table-cell;
}
section.ranking nav.date li.prev,
#trend nav.date li.prev {
	text-align:left;
}
section.ranking nav.date li.next,
#trend nav.date li.next {
	text-align:right;
}
section.ranking nav.date li a,
#trend nav.date li a {
	border-radius:5px;
	background:#CCC;
	color:#FFF;
	font-size: .8rem;
	display:inline-block;
	line-height: 1;
	padding: 8px 15px;
}
section.ranking nav.date li a:hover,
#trend nav.date li a:hover {
	background:#f44336;
}
section.ranking nav.date li.prev a::before,
#trend nav.date li.prev a::before {
	content:"<";
	padding-right:5px;
}
section.ranking nav.date li.next a::after,
#trend nav.date li.next a::after {
	content:">";
	padding-left:5px;
}
@media(max-width: 767px) {
	section.ranking nav.date li.prev,
	#trend nav.date li.prev {
		padding-left: 10px;
	}
	section.ranking nav.date li.next,
	#trend nav.date li.next {
		padding-right: 10px;
	}
}
section.ranking .notice {
	padding: 10px;
	font-size: .7rem;
	color: #555;
	line-height: 1.3;
}
section.remarkable h2 {
	font-weight: bold;
	margin-bottom: .5em;
}
section.remarkable ul.channel_list {
	border: 2px solid #b71c1c;
}
#index section.related {
	margin: 30px 0;
}
#index section.related h1 {
	line-height: 1.4;
	padding: 8px 15px;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
}
section.news .btn {
	background: #eee;
	border-bottom: 1px solid #e0e0e0;
	text-align: center;
	padding: 12px 0;
}
section.news .btn a {
    padding: 10px 15%;
    background: #666;
    color: #fff;
    line-height: 1;
    display: inline-block;
		text-decoration: none;
}

@media(min-width: 481px) {
	section.remarkable {
		margin: 50px 0;
	}
}
nav#next a{
	display:block;
	text-align:center;
/*	box-shadow:rgb(100, 100, 100) 0px 0px 5px -1px;*/
	background: #b71c1c;
	color:#FFF;
	padding:10px;
	border-radius:0 0 5px 5px;
}
nav#next a:hover{
	background:#F33;
}
/* pager */
nav.pager ul{
	display:table;
	width:100%;
/*	box-shadow:rgb(100, 100, 100) 0px 0px 5px -1px;*/
/*	border-radius:0 0 5px 5px;*/
}
nav.pager li{
	display:table-cell;
	border-right:1px solid #FFF;
}
nav.pager li:last-child{
	border-right:0;
}
nav.pager li a{
	display:block;
	text-align:center;
	background:#CCC;
	color:#FFF;
	padding:10px;

}
nav.pager li.selected a,
nav.pager li a:hover{
	background: #b71c1c;
}
@media(max-width: 480px){
	nav.pager li:not(.selected):not(.prev):not(.next):not(.sp) {
		display: none;
	}
}
nav#next #loading{
	display:none;
	text-align:center;
	padding:10px;
}

/* page */
#page article section{
	box-shadow:rgb(100, 100, 100) 0px 0px 6px -1px;
	margin-bottom:50px;
	padding:40px;
	border-radius:5px;
	background:#FFF;
}
#page article>h1,
#page article section h1{
	font-size:1.1rem;
	font-weight:bold;
	margin-bottom:15px;
}

#page form .notice{
    color:#D00;
    font-size:.75rem;
}

/* tag */
#tag ul.tag_list:after{
	display:block;
	content:"";
	clear:both;
}
#tag ul.tag_list li {
	float:left;
	margin: 0 15px 15px 0;
}
#tag ul.tag_list li a {
	background: #f8f8f8;
	display: inline-block;
	color: #333;
	border: 1px solid #DDD;
	border-radius: 4px;
	padding:0 5px;
	font-size: .85rem;
}
@media(min-width: 1145px){
	body>div>header nav li br {
		display:none;
	}
	body>div>header nav li.new a::after {
	    content: "NEW";
	    background: #d00;
	    border-radius: 3px;
	    display: inline-block;
	    padding: 3px;
	    line-height: 1;
	    font-size: 10px;
	    margin-left: 4px;
	}
	body.col1 #main {
		width: 100%;
	}
	body.col1 #right {
		display: none;
	}
	body.col1 article,
	body.col1 > aside {
		width: 970px;
	}
	#channel section.info li{
		width: 23%;
		padding: 4% 1%;
	}
}
@media(min-width: 1346px){
	article {
		width: 1346px;
		margin: auto;
	}
	body>aside {
		width: 1346px;
		margin: auto;
	}
	body>aside .related {
		text-align:center;
		width: 1346px;
		margin: 20px auto;
	}
}
@media(min-width: 1145px) and (max-width: 1345px){
	article {
		width: calc(100% - 80px);
		margin: auto;
	}
	body>aside {
		width: calc(100% - 80px);
		margin: auto;
	}
	body>aside .related {
		text-align:center;
		width: calc(100% - 80px);
		margin: 20px auto;
	}
}
@media(min-width: 970px) and (max-width: 1144px){
	article {
		width: 970px;
		margin: auto;
	}
	body>div>header nav li br{
		display:none;
	}
	body>div>header nav li.new a::after {
	    content: "NEW";
	    background: #d00;
	    border-radius: 3px;
	    display: inline-block;
	    padding: 3px;
	    line-height: 1;
	    font-size: 10px;
	    margin-left: 4px;
	}
	body>aside {
		width: 970px;
		margin: auto;
	}
	body>aside .related{
		text-align:center;
		width: 970px;
		margin: 20px auto;
	}
	#channel section.info li{
		width: 23%;
		padding: 4% 1%;
	}
}
@media(max-width:969px){
	#tag #main > h1,
	#tag #main > p {
		text-align: center;
		padding: 0 3%;
		margin-bottom: 15px;
	}
	#tag .tag_list {
		padding: 0 3%;
	}
}

@media(min-width:768px){
    ul.channel_list li{
    	width: 50%;
    	border-top:1px solid #DDD;
    /*	box-shadow:rgb(74, 74, 74) 0px 0px 7px -1px;*/
    	background:#FFF;
    	position:relative;
        float: left;
    }
    ul.channel_list li:nth-child(2n+1){
        clear:both;
    }
}
@media(min-width: 481px) and (max-width: 969px) {
	#channel section.info li{
		width:46%;
		padding:4% 2%;
	}
	#channel section.info li:nth-child(2n+1){
		clear:both;
	}
}
@media(min-width: 375px) and (max-width: 480px) {
	#channel section.info li{
		width: 48%;
		padding: 4% 1%;
	}
	#channel section.info li:nth-child(2n+1){
		clear:both;
	}
	#channel section.info li h2{
		font-size: .8rem;
	}
	#channel section.info li p{
		font-weight:bold;
		font-size: .8rem;
	}
	#channel section.info li p:last-child{
		font-weight: normal;
	}

	#channel section.info li p span{
		font-size: .9rem;
	}
}
@media(max-width: 374px) {
	#channel section.info ul{
		display:block;
		width:auto;
		border-bottom:none;
	}
	#channel section.info li{
		width:auto;
		display:block;
		float:none;
		padding:20px 0;
		border-bottom:1px solid #DDD;
	}
}
#channel section.description .description {
	word-break: break-all;
}
@media(min-width: 768px) {
	#channel section.description input,
	#channel section.description label {
		display: none;
	}
}
@media(max-width:767px){
	#channel section.description .description {
		position: relative;
	}
	#channel section.description .expand {
		max-height: 300px;
		overflow: hidden;
		position: relative;
		transition: .5s;
	}
	#channel section.description .expand::before {/*グラデーション部分*/
    	content: "";
	    position: absolute;
	    width: 100%;
	    height: 50%;
	    bottom: 0;
	    background-image: linear-gradient(rgba(255, 255, 255, 0), #ffffff);
	    pointer-events: none;
	    transition: 1s;
	}
	#channel section.description input {/*input要素は隠しておく*/
  		visibility: hidden;
	} 
	#channel section.description label {/*ボタン部分のスタイル*/
		position: absolute;
		left: 50%;
    	transform: translateX(-50%);

		bottom: -1em;
		display: block;
		font-size: .9em;
		padding: .20em 10px;
		background: #aaa;
		box-shadow:-5px 0 white;
		color: white;
		z-index: 100;
		cursor: pointer;
		text-transform: uppercase;
	}		 
	#channel section.description label:before {/*閉じている際のボタンのテキスト*/
		content: "続きを読む";
	}	 
	#channel section.description input:checked + label:before {/*開いているときは:checked状態なので、その際はボタンテキストを変える*/
		content: "閉じる"
	}	 
	#channel section.description input[type=checkbox]:checked ~ .expand {
		max-height: none;
		padding-bottom: 2em;
	}	 
	#channel section.description input[type=checkbox]:checked ~ .expand:before {
		opacity: 0
	}
}

@media(max-width:969px){
	section.ranking li .thumbnail{
		width:60px;
	}
	ul.channel_list li aside{
		display: block;
		font-size: .7rem;
	}
}

/* signup */
#contact article section,
#present-entry article section,
#regist article section{
	box-shadow:rgb(100, 100, 100) 0px 0px 6px -1px;
	margin-bottom:50px;
	padding:40px;
	border-radius:5px;
	background:#FFF;
}

#signup #main > h1{
	font-weight: bold;
	margin: 20px 10px;
}
#signup article #main section {
	padding: 5%;
	border: 1px solid #ccc;
	border-radius: 5px;
	margin-bottom: 3em;
}
#signup #main section h1 {
	font-size:1.1rem;
	font-weight:bold;
	margin-bottom:15px;
}
#signup #main section p {
	margin-bottom:20px;
}
#signup #main section p:last-child {
	margin-bottom:0;
}
#signup #main section li {
	list-style-type:square;
	list-style-position:outside;
	margin-left:15px;
}
#signup #main section ul {
	margin-bottom:30px;
}
#signup #main section form {
	margin: 0 30px 30px 30px;
	text-align: center;
}
#signup #main section form input[type="submit"] {
	min-width:50%;
	height: 50px;
	padding: 20px;
	font-size:120%;
	margin:auto;
	display:block;
	line-height: 0;
}
#signup #main .social-area>h2,
#signup #main .social-area>p {
	padding:0 20px;
	text-align:center;
	margin:auto;
}

#signup #main .comment {
	font-size: .7rem;
	line-height: 1.5;
}
#signup section.recommend {
	word-break:break-all;
}
#signup section.recommend form{
	text-align:center;
}
#signup section.recommend form input[type="submit"]{
	min-width:0;
	height:auto;
	font-size:120%;
	margin:auto;
	display:inline;
	background: #b71c1c;
	color: #fff;
	border-radius: 6px;

}
#signup #main section.recommend .notice{
	color:#D00;
}

#signup form .google-signin {
    display: inline-block;
    width: 215.5px;
    height: 46px;
    background-size: cover;
    background-repeat: no-repeat;
    margin: auto;
}
#signup form .google-signin:hover {
    background-image: url(/common/img/btn_google_signin_focus.png);
}
#signup form .google-signin:active {
    background-image: url(/common/img/btn_google_signin_pressed.png);
}
#signup form .google-signin:hover #google-signin-btn {
	opacity: 0;
}

@media(max-width:767px){
	#signup #main {
		padding: 0 10px;
	}
	#signup #main section {
		font-size: .8rem;
		line-height: 1.7;
	}
	#signup #main section form input[type="submit"] {
		height: 40px;
	}
	#signup #main section.recommend form input[type="text"]{
		width: 100%;
		padding: 10px;
		margin-bottom: 5px;
	}
	#signup #main section.recommend form input[type="submit"]{
		padding: 10px;
	}
}
@media(min-width:768px){
	#signup #main section{
		box-shadow:none;
		border:1px solid #DDD;
		margin-bottom: 30px;
	}
	#signup #main section.recommend form input[type="text"]{
		width:40%;
		padding: 10px;
		margin-bottom: 10px;
	}
	#signup #main section.recommend form input[type="submit"]{
		padding: 20px;
	}
}

/* contact
-------------------------------------------------------*/
#contact article {
	max-width: 700px;
}
#contact article section {
	padding: 5%;
}
#contact article>h1{
	font-size:1.1rem;
	font-weight:bold;
	margin-bottom:15px;
}
#contact article section p{
	margin-bottom: 20px;
}
#contact article section p:last-child{
	margin-bottom:0;
}
#contact article section li{
	list-style-type:square;
	list-style-position:outside;
	margin-left:15px;
}
#contact article section form input[type="submit"]{
	margin:auto;
	display:block;
}
#contact .company {
	margin-bottom: 30px;
	line-height: 1.5;
	border: 4px solid #EEE;
	padding: 3% 5%;
	font-size: .75rem;
}
#contact .company > p.logo {
	margin-bottom: 0;
}
#contact .company > p img {
	width: 120px;
	height: auto;
}


#contact dl {
	margin-bottom: 3%;
}
#contact dt {
	font-size: 1rem;
	font-weight:bold;
	text-align: left;
}
#contact dt span {
	font-size:.7rem;
	font-weight:normal;
	margin-left:4px;
}
#contact dt.ttl {
	font-size: 1.1rem;
	padding-top: 25px;
	margin-bottom: 15px;
	border-bottom: 2px solid #666;
}
#contact dd {
	margin-bottom:15px;
	text-align: left;
}
#contact article input[type="text"],
#contact article input[type="password"],
#contact article textarea {
	background-color:#FFF;
	border-radius:3px;
	border:1px solid #999;
	font-size:1.1rem;
	padding:8px 3%;
	-webkit-appearance: none;
	width:94%;
}
#contact article select {
	border:1px solid #999;
	border-radius:3px;
	padding:8px 3%;
}
#contact article input[type="submit"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* privacy
-------------------------------------------------------*/
#privacy article {
	max-width: 700px;
}
#about article section,
#privacy article section {
	padding: 5%;
}
#about article section h1,
#privacy article section h1,
#company article section h1 {
	font-size: 1.1rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 15px;
}
#privacy article h2 {
	font-weight: bold;
	margin: 1em 0;
}
#about article section p, 
#privacy article section p{
	margin-bottom:20px;
}
#privacy article ol {
	padding: 0 0 0 1em;
}
#privacy article li {
	list-style-type: decimal;
}

/* media
-------------------------------------------------------*/
#media article {
	max-width: 700px;
}
#media article section {
	padding: 5%;
}
#media article section h1 {
	font-size: 1.1rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 15px;
}
#media article section p {
	margin-bottom:20px;
}
#media article dt {
	font-size: .75rem;
}
#media article dd {
	margin-bottom: 1em;
}

/* form
-------------------------------------------------------*/
.form {
	background: #f0f0f0;
	border-radius:10px;
	padding: 5%;
	margin: auto;
}
.form dl {
	margin-bottom: 3%;
}
.form dt {
	font-size: 1rem;
	font-weight: 800;
	text-align: left;
}
.form dt span {
	font-size:.7rem;
	font-weight:normal;
	margin-left:4px;
}
.form dt.ttl {
	font-size: 1.1rem;
	padding-top: 25px;
	margin-bottom: 15px;
	border-bottom: 2px solid #666;
}
.form dd {
	margin-bottom:15px;
	text-align: left;
}
.form input[type="text"],
.form input[type="password"],
.form textarea {
	background-color:#FFF;
	border-radius:3px;
	border:1px solid #999;
	font-size:1.1rem;
	padding:8px 3%;
	-webkit-appearance: none;
	width:94%;
}
.form select {
	border:1px solid #999;
	border-radius:3px;
	padding:8px 3%;
}
.form input[type="submit"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.form textarea {
	height: 4em;
}
.form .err {
	color: #d00;
}

/* login */
#login form{
	margin-bottom:25px;
}

.arrow:before{
	content:">";
	padding-right:5px;
	color:#999;
}

form .btn,
form input[type="submit"].btn{
	color:#FFF;
	background-color: #b71c1c;
	border-radius:6px;
	padding:10px 18px;
	font-size:1.2rem;
	line-height:1;
	display:block;
	margin:auto;

}
form .btn:hover{
	background-color:#E72c2c;
}

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

.graph-nav {
	display: table;
	margin-bottom: 15px;
}
.graph-nav li {
	display: table-cell;
	border-right: 1px solid #fff;
}
.graph-nav a {
	display: block;
	padding: 10px 18px;
	line-height: 1;
	cursor: pointer;
	background: #f0f0f0;
}
.graph-nav a.selected {
	background: #b71c1c;
	color: #fff;
}

/* nomatch */
.nomatch {
	border: 1px solid #ccc;
	color: #666;
	margin: 20px;
	padding: 5%;
	text-align: center;
}
@media(max-width: 767px){
	.nomatch {
		padding: 20vw 5%;
	}
	div.inner{
		padding: 10px;
	}
}
@media(min-width: 768px){
	.nomatch {
		padding: 15vw 5%;
	}
	div.inner{
		padding: 30px;
	}
}

ul.channel_list{
    background: #FFF;
	position:relative;
	z-index:10;
}
ul.channel_list::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
}
ul.channel_list li{
	border-top:1px solid #DDD;
/*	box-shadow:rgb(74, 74, 74) 0px 0px 7px -1px;*/
	background:#FFF;
	position:relative;
}
ul.channel_list li .rank{
	position:absolute;
	top: 6px;
	left: 6px;
	min-width: 20px;
	height: 20px;
	padding: 5px;
	font-size: 10px;
	line-height: 20px;
	color:#FFF;
	border-radius: 20px;
	background: #f44336;
	box-shadow:rgb(100, 100, 100) 0px 0px 5px -1px;
	text-align:center;
	white-space:nowrap;
}
ul.channel_list li:nth-child(n+11) .rank{
	background:#1E88E5;
}
ul.channel_list li .date{
	font-size:.7rem;
	color:#555;
	line-height:.7rem;
	margin-bottom:10px;
}
ul.channel_list li .thumbnail{
	width:88px;
	padding-right: 0;
}
ul.channel_list li .thumbnail img{
	width:100%;
	height:auto;
	border-radius:5px;
}
ul.channel_list li aside p {
	line-height: 1.1rem;
}
ul.channel_list li.pr aside p {
	line-height: 1.2rem;
}
ul.channel_list li .desc{
	color: #444;
	margin-top: 10px;
	word-break : break-all;
	overflow: hidden;
}

ul.channel-list li .title.close::after,
ul.channel_list li h2.close::after,
ul.channel-list li .title.hidden::after,
ul.channel_list li h2.hidden::after {
	display: inline-block;
	font-size: 0.75rem;
    background: #ddd;
    padding: 4px 5px;
    border-radius: 3px;
    line-height: 1;
    margin-left: .5em;
    font-weight: 100;
}
ul.channel-list li .title.close::after,
ul.channel_list li h2.close::after {
	content: "閉鎖";
}
ul.channel-list li .title.hidden::after,
ul.channel_list li h2.hidden::after {
	content: "登録数非公開";
}
@media(min-width: 481px) {
	ul.channel_list li > div,
	ul.channel_list li .thumbnail{
		display: table-cell;
		vertical-align: top;
		padding: 20px;
	}
	ul.channel_list li .thumbnail{
		padding-right: 0;
	}
	ul.channel_list li h2{
		font-weight: bold;
		font-size: 1.1rem;
		margin-bottom: 10px;
	}
	ul.channel_list li aside i{
		font-size: 1.1rem;
		margin-right: 4px;
		position: relative;
		top: .2rem;
	}
	ul.channel_list li .desc{
		font-size: .8rem;
		line-height: 1.5;
	}
}
@media(max-width: 480px) {
	ul.channel_list li > div,
	ul.channel_list li .thumbnail{
		display: table-cell;
		vertical-align: top;
		padding: 10px;
	}
	ul.channel_list li .thumbnail{
		padding-right: 0;
	}
	ul.channel_list li h2{
		font-weight: bold;
		font-size: .9rem;
		margin-bottom: 2px;
		line-height: 1.5;
	}
	ul.channel_list li aside i{
		font-size: .9rem;
		margin-right: 4px;
		position: relative;
		top: .2rem;
	}
	ul.channel_list li .desc{
		display: none;
/*
		font-size: .7rem;
		line-height: 1.4;
*/
	}

	section.remarkable ul.channel_list li .desc{
		display: block;
		font-size: .7rem;
		line-height: 1.4;
	}
}

/*@media(min-width: 360px) and (max-width: 969px) {*/
@media(min-width: 360px) {
	ul.channel_list li aside::after {
		clear: both;
		content: "";
		height: 0;
		display: block;
	}

	ul.channel_list li aside p{
		float: left;
		margin-right: 10px;
	}
	ul.channel_list li aside p:nth-child(2n+1) {
		clear: both;
	}
}

.social-area {
	background: #F5F1E9;
	padding: 1.2em;
	margin: 1em 0;
}
ul.social-btn {
	display: flex;
	margin: auto;
}
.social-btn a {
	display: block;
	font-family: Arial;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	color: white;
	border-radius: 5px;
}
.social-btn a:hover {
	opacity: .7;
}
.social-btn .facebook a {
	background-color: #2e4a88;
	box-shadow: 0 4px 0 #1B3D82;
}
.social-btn .twitter a {
	background-color: #008DDE;
	box-shadow: 0 4px 0 #0078BD;
}
.social-btn .google a {
	background-color: #CC3622;
	box-shadow: 0 4px 0 #BA2714;
}
.social-btn .line a {
	background-color: #00b900;
	box-shadow: 0 4px 0 #007800;
}
.social-btn .hatena a {
	background-color: #00a4de;
	box-shadow: 0 4px 0 #0078BD;
}
@media(max-width:480px) {
	ul.social-btn {
		margin-top: 10px;
		width: 100%;
	}
	.social-btn li {
		font-size: .75rem;
		width: 100%;
		margin-bottom: 10px;
	}
	.social-btn li a {
		padding: 5px;
		margin: 0 3%;
	}
	.social-btn li a span {
		display: none;
	}
}
@media(min-width:481px) {
	.social-btn li {
		display: table-cell;
		font-size: .85rem;
		width: 25%;
	}
	.social-btn li a {
		padding: 10px;
		margin: 0 10px;
	}
}
#recommend-btm {
	margin-top: 1.5em;
}

@media(max-width:480px) {
	#recommend-btm {
		padding: 0 10px;
	}
}

/* search
------------------------------------------------*/
#search h1 {
	font-weight: 800;
	font-size: 1rem;
}
#search section.search {
	background: #f0f0f0;
	padding: 1.5rem;
}
#search section.search .search-text,
#search section.search .search-btn {
	font-size: 18px;
	line-height: 1;
}
#search section.search .search-text {
	padding: 5px;
	height: 23px;
	max-width: calc(100% - 87px);
}
#search section.search .search-btn {
	background: #b71c1c;
	color: #fff;
    height: 37px;
	padding: 0 10px;
}
#search section.search .radio {
	display: inline-block;
}


/* mypage
------------------------------------------------*/
#mypage #breadcrumb,
#favorite #breadcrumb {
	margin-bottom: 0;
}
#mypage #main > .header {
	display: flex;
    align-items: center;
	justify-content: center;
	padding: 8px 10px;
}
#mypage #main > .header h1 {
	text-align: center;
	padding-left: .5rem;
}
#mypage #main > .header h1 i {
	margin-left: .3rem;
	color: #666;
	vertical-align: middle;
}
#mypage #main > .header .thumbnail {
	line-height: 1;
	width: 60px;
}
@media(max-width: 767px) {
	#mypage #main > .header h1 {
		font-size: 1.1rem;
	}
	#mypage #main .header {
		border-bottom: 1px solid #ddd;
	}
}
@media(min-width: 768px) {
	#mypage #main > .header h1 {
		font-size: 1.5rem;
	}
}

/* tag-list */
.tag-edit ul.tag-list:after {
	display:block;
	content:"";
	clear:both;
}
.tag-edit ul.tag-list li {
	float:left;
	margin: 0 15px 15px 0;
}
.tag-edit ul.tag-list li a {
	background: #f8f8f8;
	display: inline-block;
	color: #333;
	border: 1px solid #DDD;
	border-radius: 4px;
	padding: 4px 5px;
	font-size: .85rem;
}
.tag-edit ul.tag-list li a:not(.own)::after {
    content: "close";
    font-family: 'Material Icons';
    font-size: 10px;
    vertical-align: middle;
    margin-left: 5px;
    background: #999;
    border-radius: 50%;
    padding: 2px;
    color: #fff;
}
.tag-edit #add-tag {
	position: relative;
}
.tag-edit #add-tag::after {
	content: "";
	display: block;
	clear: both;
	height: 0;
}
.tag-edit #add-tag-name {
	border: 1px solid #aaa;
	border-radius: 3px 0 0 3px;
	-webkit-appearance: none;
	height: 32px;
	font-size: 14px;
	line-height: 14px;
	padding: 0 8px;
	float: left;
	width: calc(95% - 60px);
	max-width: 300px;
}
.tag-edit #add-tag-btn {
	background: #DDD;
	border: 1px solid #aaa;
	border-radius: 0 3px 3px 0;
	width: 50px;
	border-left: 0;
	height: 34px;
	color: #555;
	float: left;
	font-size: .85rem;
}
.tag-edit table,
#mypage table {
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 10px;
}
.tag-edit th,
.tag-edit td,
#mypage th,
#mypage td {
	font-size: .75rem;
	text-align: left;
	line-height: 1.3;
	border: 1px solid #ddd;
}
.tag-edit th,
#mypage th {
	background: #f8f8f8;
	width: 7.5em;
}
.tag-edit .notice,
#mypage .notice {
	font-size: .7rem;
	line-height: 1.3;
	margin-bottom: 20px;
	color: #999;
}
@media(max-width: 767px) {
	.tag-edit th {
		display: none;
	}
	.tag-edit td,
	#mypage th,
	#mypage td {
		padding: 8px;
	}
}
@media(min-width: 768px) {
	.tag-edit th,
	.tag-edit td,
	#mypage th,
	#mypage td {
		padding: 12px;
	}
}

/* lnav */
#mypage section > h2 {
    line-height: 1.4;
    padding: 8px 15px;
    background: #f0f0f0;
}
#mypage nav.mypage-nav li {
	border-bottom: 1px solid #ddd;
	padding: 15px;
	position: relative;
}
#mypage nav.mypage-nav li a {
	color: #000;
}
#mypage nav.mypage-nav li h3 {
	font-weight: 800;
}
#mypage nav.mypage-nav li h3 i {
	color: #666;
	font-size: 18px;
	margin-right: .3rem;
	position: relative;
	top: 2px;
}
#mypage nav.mypage-nav li p {
	font-size: .75rem;
}
#mypage .favorite section > h2 {
	margin-bottom: 0;
}
#mypage .favorite .channel_list li:first-child {
	border-top: 0;
}
#mypage .favorite .channel_list li {
	display: table;
	width: 100%;
	float: none;
}
#mypage .favorite .channel_list li aside > p {
	float: left;
	margin-right: 1.5rem;
}
#mypage .favorite .channel_list .delete-favorite {
	display: table-cell;
	vertical-align: middle;
	text-align: right;
}
#mypage .favorite .channel_list .delete-favorite .favorite-btn {
	color: #b71c1c;
}
#mypage .favorite .channel_list .delete-favorite .favorite-btn i {
	font-size: 1.5rem;
}
#channel .back-btn,
#mypage .back-btn {
	text-align: center;
}
#channel .back-btn a,
#mypage .back-btn a {
	color: #555;
	display: inline-block;
	background: #ddd;
	border-radius: 5px;
	margin: 2em 0;
	padding: 10px;
	line-height: 1;
}
@media(max-width: 970px) {
	#mypage .favorite .channel_list .delete-favorite {
		padding-right: 10px;
	}
}

/* entry */
#mypage .entry > h1{
    line-height: 1.4;
    padding: 8px 15px;
    background: #f0f0f0;
}
#mypage .entry section {
	padding: 5%;
	border: 1px solid #ccc;
	border-radius: 5px;
	margin: 5%;
}
#mypage .entry section h1 {
	font-size:1.1rem;
	font-weight:bold;
	margin-bottom:15px;
}
#mypage .entry section p {
	margin-bottom:20px;
}
#mypage .entry section p:last-child {
	margin-bottom:0;
}
#mypage .entry section ul.rule {
	margin-bottom: 30px;
}
#mypage .entry section ul.rule li {
	list-style-type: square;
	list-style-position: outside;
	margin-left: 15px;
}
#mypage .entry section form {
	margin:0 30px 30px 30px;
}
#mypage .entry section form input[type="submit"] {
	min-width:50%;
	height: 50px;
	padding: 20px;
	font-size:120%;
	margin:auto;
	display:block;
	line-height: 0;
}
#mypage .entry .social-area {
	margin-top: 1.5em;
}
#mypage .entry .social-area > h2 {
	font-weight: 800;
}
#mypage .entry .social-area > h2,
#mypage .entry .social-area > p {
	padding:0 20px;
	text-align:center;
	margin: 0 auto .5rem auto;
}

#mypage .entry .comment {
	font-size: .7rem;
	line-height: 1.5;
}
#mypage .entry section.recommend {
	word-break:break-all;
}
#mypage .entry section.recommend form{
	text-align:center;
}
#mypage .entry section.recommend form input[type="submit"] {
	min-width:0;
	height:auto;
	font-size:120%;
	margin:auto;
	display:inline;
	background: #b71c1c;
	color: #fff;
	border-radius: 6px;
}
#mypage .entry section.recommend .notice{
	color: #D00;
}
@media(max-width:767px) {
	#mypage .entry section {
		font-size: .8rem;
		line-height: 1.7;
	}
	#mypage .entry section form input[type="submit"] {
		height: 40px;
	}
	#mypage .entry section.recommend form input[type="text"]{
		border: 1px solid #999;
		width: 100%;
		padding: 10px;
		margin-bottom: 5px;
	}
	#mypage .entry section.recommend form input[type="submit"]{
		padding: 10px　20px;
	}
}
@media(min-width:768px){
	#mypage .entry section{
		box-shadow:none;
		border:1px solid #DDD;
		margin-bottom: 30px;
	}
	#mypage .entry section.recommend form input[type="text"]{
		width:40%;
		padding: 10px;
		margin-bottom: 10px;
	}
	#mypage .entry section.recommend form input[type="submit"]{
		padding: 20px;
	}
}

#mypage .info-area {
	background: #F5F1E9;
	padding: 1.2em;
	text-align: center;
}
#mypage .info-area p {
	margin-bottom: .5rem;
	line-height: 1.5;
}
#mypage .info-area h2 {
	font-size: 1rem;
	font-weight: 800;
	margin-bottom: .5em;
}
#mypage .info-area .btn {
	text-align: center;
}
#mypage .info-area .btn a {
	display: inline-block;
	background: #d00;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	color: #fff;
	border-radius: 5px;
	padding: 10px 20px;
	box-shadow: 0 4px 0 #c00;
}

#mypage .mypage-news p {
    background: #FFF;
    border: 3px solid #ddd;
    padding: 8px 15px;
    margin: 0 0 10px 0;
}
#mypage .mypage-news p a::after {
    background: #D00;
    border-radius: 3px;
    content: "NEW";
    color: #FFF;
    display: inline-block;
    font-size: .6rem;
    line-height: 100%;
    margin-left: 6px;
    padding: 3px;
}
/* favorite news */
#mypage .favorite-news li {
	padding: 8px;
	line-height: 1.5;
    border-bottom: 1px solid #ccc;
}
#mypage .favorite-news li .publisher {
	font-size: .7rem;
    color: #666;
}

#mypage .favorite-news li p {
	display: inline-block;
}

/* setting */
#mypage section.setting select {
	-webkit-appearance: none;
	background: #fff;
	border: 1px solid #999;
	border-radius: 5px;
	padding: 5px 10px;
	font-size: .9rem;
	min-width: 6em;
}
#mypage section.setting form input[type="submit"] {
	min-width:0;
	height:auto;
	font-size: 1.1rem;
	margin: auto;
	display: block;
	background: #b71c1c;
	color: #fff;
	border-radius: 6px;
	padding: 8px 20px;
}
#mypage section.setting td p {
	margin-top: 4px;
}

/* user
------------------------------------------------*/
/* header */
#user #breadcrumb {
	margin-bottom: 0;
}
#user #main > .header {
	display: flex;
    align-items: center;
	justify-content: center;
	padding: 8px 10px;
	position: relative;
}
#user #main > .header h1 {
	text-align: center;
	padding-left: .5rem;
}
#user #main > .header h1 i {
	margin-left: .3rem;
	color: #666;
	vertical-align: middle;
}
#user #main > .header .thumbnail {
	line-height: 1;
	width: 60px;
}
#user h2 {
    line-height: 1.4;
    padding: 8px 15px;
    background: #f0f0f0;
    margin-bottom: 10px;
}
#user section {
	margin-bottom: 2em;
}
#user .favorite-channel {
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
#user .favorite h2 {
	margin-bottom: 0;
}
#user .favorite-channel li {
	line-height: 0;
}
#user .nomatch {
	padding: 3vw;
}
@media(max-width: 767px) {
	#user #main > .header h1 {
		font-size: 1.1rem;
	}
	#user #main .header {
		border-bottom: 1px solid #ddd;
	}
	#user section.favorite {
		margin-bottom: 0;
	}
	#user .favorite-channel li {
		flex-basis: 20%;
	}
	#user .favorite-channel li img {
		width: 100%;
		height: auto;
	}
}
@media(min-width: 768px) {
	#user .favorite-channel {
		margin: 20px;
	}
	#user #main > .header h1 {
		font-size: 1.5rem;
	}
	#user .favorite-channel li {
		flex-basis: 10%;
		margin: 3px 0;
	}
}

/* channel list
------------------------------------------------------------*/
ul.channel-list{
    background: #FFF;
	position:relative;
	z-index:10;
}

ul.channel-list li {
	border-top: 1px solid #e0e0e0;
	background:#FFF;
	position:relative;
}
ul.channel-list li .rank {
	position: absolute;
	min-width: 12px;
	height: 12px;
	padding: 5px;
	font-size: 10px;
	line-height: 12px;
	color: #FFF;
	background: rgba(0,100,200,.8);
	text-align:center;
	white-space: nowrap;
}
ul.channel-list li:nth-child(n+11) .rank {
	background:#1E88E5;
}
ul.channel-list li .date{
	font-size:.7rem;
	color:#555;
	line-height:.7rem;
}
ul.channel-list li .thumbnail{
	width: 88px;
	line-height: 0;
}
ul.channel-list li .thumbnail img {
	width: 100%;
	height: auto;
}
ul.channel-list li .title {
	line-height: 1.4;
}
ul.channel-list li aside {
	font-size: .8rem;
}
ul.channel-list li aside p {
	line-height: 1.1rem;
	float: left;
	font: .8rem;
	margin-right: 1em;
}
ul.channel-list li aside p i {
	color: #999;
}

@media(min-width: 768px) {
	ul.channel-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	ul.channel-list li {
		flex-basis: 48%;
	}
	ul.channel-list li:nth-child(-n+2) {
		border-top: none;
	}
	ul.channel-list li .rank {
		top: 10px;
		left: 0;
	}
	ul.channel-list li > div,
	ul.channel-list li .thumbnail {
		display: table-cell;
		vertical-align: middle;
		padding: 10px;
	}
	ul.channel-list li .thumbnail {
		padding-left: 0;
		padding-right: 0;
	}
	ul.channel-list li .title {
		font-weight: bold;
		font-size: 1rem;
		margin-bottom: 10px;
	}
	ul.channel-list li aside i{
		font-size: 1.1rem;
		margin-right: 4px;
		position: relative;
		top: .2rem;
	}
	ul.channel-list li .desc {
		font-size: .8rem;
		line-height: 1.5;
		display: inline-block;
	}
}
@media(min-width:768px) and (max-width: 970px) {
	#index section.ranking {
		padding: 0 2%;
	}
}
@media(max-width: 767px) {
	ul.channel-list li:last-child {
		border-bottom: 1px solid #e0e0e0;
	}
	ul.channel-list li .rank{
		top: 10px;
		left: 10px;
	}
	ul.channel-list li > div,
	ul.channel-list li .thumbnail {
		display: table-cell;
		vertical-align: middle;
		padding: 10px;
	}
	ul.channel-list li .thumbnail {
		padding-right: 0;
	}
	ul.channel-list li .title {
		font-weight: bold;
		font-size: .9rem;
		margin-bottom: .5em;
		line-height: 1.4;
	}
	ul.channel-list li aside i{
		font-size: .9rem;
		margin-right: 4px;
		position: relative;
		top: .2rem;
	}
	ul.channel-list li .desc{
		display: none;
	}
}

/* news list
------------------------------------------------------------*/
@media(min-width: 1145px){
	.news-latest {
		margin-bottom: 2em;
	}
}
@media(min-width: 481px) and (max-width: 1144px){
	section.news {
		margin-top: 4em;
	}
}

section.news h2 {
	font-size: 1.2rem;
	font-weight: 800;
	margin-bottom: .7em;
	line-height: 1.3;
	padding-left: 7px;
	border-left: 7px solid #b71c1c;
}
section.news h2 span {
	color: #666;
	font-size: .75rem;
	margin-left: 1em;
}
ul.news-list{
    background: #FFF;
	position:relative;
	z-index:10;
}
ul.news-list::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
}
ul.news-list li {
	border-top: 1px solid #e0e0e0;
	background:#FFF;
	position:relative;
}
ul.news-list li:last-child {
	border-bottom: 1px solid #e0e0e0;
}

ul.news-list li .rank {
	position: absolute;
	min-width: 12px;
	height: 12px;
	padding: 5px;
	font-size: 10px;
	line-height: 12px;
	color: #FFF;
	background: rgba(0,100,200,.8);
	text-align:center;
	white-space: nowrap;
}
ul.news-list li:nth-child(n+11) .rank {
	background:#1E88E5;
}
ul.news-list li .date {
	font-size:.7rem;
	color:#555;
	line-height:.7rem;
}
ul.news-list li .thumbnail{
	width: 88px;
	line-height: 0;
}
ul.news-list li .thumbnail img {
	width: 100%;
	height: auto;
}
ul.news-list li .title {
	line-height: 1.4;
	word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
ul.news-list li aside p {
	line-height: 1.1rem;
}
ul.news-list .publisher {
	color: #444;
	font-size: .7rem;
	word-break: break-all;
	overflow: hidden;
}
section.news ul.news-list.n1 li:nth-child(n+6) > div {
	line-height: 1.4;
}
section.news ul.news-list.n1 li:nth-child(n+6) .title {
	font-size: .85rem;
}
section.news ul.news-list.n1 li:nth-child(n+6) .title,
section.news ul.news-list.n1 li:nth-child(n+6) .date {
	display: inline;
	margin: 0;
}

@media(min-width: 1145px){
	#right section.news ul.news-list {
	    border: 9px solid #f0f0f0;
	}
	#right section.news ul.news-list li .thumbnail {
		padding: 0;
	}
	#right section.news ul.news-list li > div {
		padding: 10px;
	}
	#right .news-ranking ul.news-list.n1 li:nth-child(n+6) > div {
		padding-left: 32px;
	}
	#right section.news ul.news-list li .title {
		line-height: 1.3;
		margin-bottom: 5px;
	}
	#right section.news .btn {
		padding-top: 0;
	}
	section.news h2 span {
		white-space: nowrap;
		margin-left: 0;
	}
	ul.news-list li .rank {
		top: 10px;
		left: 0;
	}
	#right ul.news-list li .rank {
		top: 0;
		left: 0;
	}
}
@media(min-width:768px) and (max-width: 1144px){
	section.news {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 4em;
	}
	section.news > div {
		flex-basis: 47%;
	}
	.news-latest ul.news-list.n1 li:nth-child(n+6) > div {
		padding-left: 0;
	}
	ul.news-list li .rank {
		top: 10px;
		left: 0;
	}
}
@media(min-width:768px){
	#blog .news-ranking ul.news-list.n1 li:nth-child(n+6) > div,
	#right .news-ranking ul.news-list.n1 li:nth-child(n+6) > div {
		padding-left: 32px;
	}
	ul.news-list li > div,
	ul.news-list li .thumbnail {
		display: table-cell;
		vertical-align: middle;
		padding: 10px;
	}
	ul.news-list li .thumbnail {
		padding-left: 0;
		padding-right: 0;
	}
	ul.news-list li .title {
		font-weight: bold;
		font-size: .85rem;
		margin-bottom: 10px;
	}
	ul.news-list li aside i{
		font-size: 1.1rem;
		margin-right: 4px;
		position: relative;
		top: .2rem;
	}
	ul.news-list li .desc{
		font-size: .8rem;
		line-height: 1.5;
	}
}
@media(min-width:768px) and (max-width: 970px) {
	#index section.news {
		padding: 0 2%;
	}
}
@media(max-width:767px){
	section.news > div {
		margin-bottom: 4em;
	}
	ul.news-list li .rank{
		top: 10px;
		left: 10px;
	}
	section.news .news-ranking ul.news-list.n1 li:nth-child(n+6) > div {
		padding-left: 42px;
	}
	section.news .news-latest {
		content-visibility: auto;
		contain-intrinsic-size: 930px;
	}
	section.news .news-ranking {
		content-visibility: auto;
		contain-intrinsic-size: 970px;
	}
	ul.news-list li > div,
	ul.news-list li .thumbnail {
		display: table-cell;
		vertical-align: middle;
		padding: 10px;
	}
	ul.news-list li .thumbnail {
		padding-right: 0;
	}
	ul.news-list li .title {
		font-weight: bold;
		font-size: .85rem;
		margin-bottom: .5em;
		line-height: 1.4;
	}
	ul.news-list li aside i{
		font-size: .9rem;
		margin-right: 4px;
		position: relative;
		top: .2rem;
	}
	ul.news-list li .desc {
		display: none;
	}

	section.remarkable ul.news-list li .desc{
		display: block;
		font-size: .7rem;
		line-height: 1.4;
	}
}
/*
@media(min-width: 360px) {
	ul.news-list li aside::after {
		clear: both;
		content: "";
		height: 0;
		display: block;
	}

	ul.news-list li aside p{
		float: left;
		margin-right: 10px;
	}
	ul.news-list li aside p:nth-child(2n+1) {
		clear: both;
	}
}
*/

@media(min-width: 1145px){
	#wrapper {
		display: flex;
		justify-content: space-between;
	}
	#right > div {
		margin-bottom: 2em;
		text-align: center;
	}
	#right .ad {
		margin-bottom: 2em;
	}
	#right .news {
		margin-bottom: 2em;
	}
	#right .ad-right-bottom {
		position: sticky;
		top: 72px;
	}
}
@media(min-width: 1145px) and (max-width: 1345px){
	#main {
		width: calc(100% - 376px);
	}
	#right {
		width: 336px;
	}
}
@media(min-width: 1346px){
	#wrapper {
		display: flex;
		justify-content: space-between;
	}
	#main {
		width: 970px;
	}
	#right {
		width: 336px;
	}

}
@media(max-width: 1144px){
	#right .ad-right-top:not(.ad-sp) {
		display: none;
	}
}
.ad.ad-billboard {
	margin-bottom: 1em;
}
#channel .ad.ad-channel-tab-botttom {
	margin: 1.5em 0;
}
/*
@media(min-width: 768px){
	#index .ad.ad-ranking-middle,
	#ranking .ad.ad-ranking-middle,
	#tag .ad.ad-ranking-middle,
	#update .ad.ad-ranking-middle,
	#channel .ad.ad-channel-tab-botttom {
		display: flex;
		justify-content: space-around;
	}
}
*/
/* top news
------------------------------------------*/
#topnews {
	overflow: hidden;
}
#topnews ul {
	position: relative;
}
#topnews li {
	white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 1em;
    overflow: hidden;
}
#topnews li a {
	padding: 1em;
}
@media(min-width: 768px) {
	#topnews {
		font-size: 14px;
		height: 2em;
   		margin-bottom: 1em;
		border-bottom: 1px solid #ddd;
	}
	#topnews li {
		animation: slide-pc 24s ease infinite;
		padding-left: 42px;
	}
	#topnews ul::before {
		position: absolute;
		content: "NEW";
	    font-size: .7rem;
	    background: #069;
	    line-height: 1;
	    padding: 10px;
	    color: #fff;
	}
}
@media(max-width: 767px) {
	#topnews {
		font-size: .7rem;
		height: 2.6em;
	}
	#topnews li {
		animation: slide-sp 24s ease infinite;
	}
	#ranking #topnews {
		margin-bottom: 1.5em;
		border-bottom: 1px solid #ddd;
	}
}
@keyframes slide-pc {
  0%  { transform: translateY(0); }
  15% { transform: translateY(0); }
  20% { transform: translateY(-28px); }
  35% { transform: translateY(-28px); }
  40% { transform: translateY(-56px); }
  55% { transform: translateY(-56px); }
  60% { transform: translateY(-84px); }
  75% { transform: translateY(-84px); }
  80% { transform: translateY(-112px); }
  95% { transform: translateY(-112px); }
}
@keyframes slide-sp {
  0%  { transform: translateY(0); }
  15% { transform: translateY(0); }
  20% { transform: translateY(-2.5em); }
  35% { transform: translateY(-2.5em); }
  40% { transform: translateY(-5em); }
  55% { transform: translateY(-5em); }
  60% { transform: translateY(-7.5em); }
  75% { transform: translateY(-7.5em); }
  80% { transform: translateY(-10em); }
  95% { transform: translateY(-10em); }
}

#channel section.trend-list > p {
	font-size: .8rem;
	margin: 1em .5em .5em .5em;
	line-height: 1.4;
}
#channel section.trend-info > div td i {
	vertical-align: middle;
	font-size: 16px;
}
#channel section.trend-info table {
	border-collapse: collapse;
    box-sizing: border-box;
}
#channel section.trend-info th,
#channel section.trend-info td {
	padding: 5px 8px;
	border: 1px solid #ddd;
}
#channel section.trend-info th {
	font-weight: normal;
	font-size: .75rem;
	text-align: left;
	background: #f8f8f8;
	white-space: nowrap;
}
#channel section.trend-info td {
	font-size: .8rem;
	line-height: 1.4;
}

@media (min-width: 768px){
	#channel section.trend-info > div {
		display: flex;
		margin: 1em 0;
	}
	#channel section.trend-info table {
		margin-left: 1em;
	}
}

@media (max-width: 767px){
	#channel section.trend-info > div {
		margin: 1.2em;
	}
	#channel section.trend-info .thumbnail {
		text-align: center;
	}
	#channel section.trend-info table {
		width: 100%;
	}
}

#trend #main > h1 {
	font-size: 1.2rem;
	font-weight: 800;
	margin: 1.5em 0;
	line-height: 1.3;
	padding-left: 7px;
	border-left: 7px solid #b71c1c;
}
#trend #main > p.notice {
	font-size: .7rem;
	line-height: 1.3;
	margin: 1em 0;
	color: #999;
}
#trend nav.hour {
	position: relative;
}
#trend nav.hour dl {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1em;
    width: 100%;
}
#trend nav.hour dt {
    padding: 5px 0px;
    font-size: .75rem;
    line-height: 1;
    white-space: nowrap;
}
#trend nav.hour a,
#trend nav.hour span {
	display: block;
    padding: 5px 0px;
    font-size: .75rem;
    line-height: 1;
    width: 2em;
    text-align: center;
}
#trend nav.hour span {
	color: #ccc;
}
#trend nav.hour .selected {
    background: #b71c1c;
    border-radius: 3px;
    color: #fff;
}
@media (max-width: 767px){
	#trend nav.hour dl {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	    overflow-scrolling: touch;
	}
	#trend nav.hour dl::-webkit-scrollbar {
		height: 0;
	}
	#trend nav.hour {
		padding: 0 10px;
	}
}

/* trend-list
-------------------------------------------------------*/
ul.trend-list{
    background: #FFF;
	position:relative;
	z-index:10;
}

ul.trend-list li {
	border-top: 1px solid #e0e0e0;
	background:#FFF;
	position: relative;
	display: table;
	width: 100%;
}
ul.trend-list li:last-child {
	border-bottom: 1px solid #e0e0e0;
}

ul.trend-list li .rank {
	position: absolute;
	height: 12px;
	padding: 5px;
	font-size: 10px;
	line-height: 12px;
	color: #FFF;
	background: rgba(0,100,200,.8);
	text-align:center;
	white-space: nowrap;
	width: 30px;
}
ul.trend-list li .rank i {
	vertical-align: top;
	font-size: 20px;
	line-height: 12px;
}
ul.trend-list li .date {
	font-size:.7rem;
	color:#555;
	line-height:.7rem;
}
ul.trend-list li .thumbnail {
	line-height: 0;
}
ul.trend-list li .thumbnail img {
	width: 100%;
	height: auto;
}
ul.trend-list li h2 {
	line-height: 1.4;
	margin-bottom: .3em;
	word-break: break-all;
}
ul.trend-list li aside {
	font-size: .8rem;
}
ul.trend-list li aside p {
	line-height: 1.1rem;
	float: left;
	font: .8rem;
	margin-right: 1em;
}
ul.trend-list li aside p i {
	color: #999;
}
ul.trend-list li .channel-title {
	font-size: .8rem;
	white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 1;
}
ul.trend-list li .channel-title img {
	width: 22px;
	height: 22px;
	vertical-align: text-bottom;
}

@media(min-width: 768px) {
	/*
	ul.trend-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	ul.trend-list li {
		flex-basis: 48%;
	}
	*/
	ul.trend-list li .rank {
		top: 20px;
		left: 0;
	}
	ul.trend-list li:nth-child(9) {
		border-bottom: 1px solid #e0e0e0;
	}
	ul.trend-list li > div,
	ul.trend-list li .thumbnail {
		display: table-cell;
		vertical-align: top;
		padding: 20px;
	}
	ul.trend-list li .thumbnail {
		padding-left: 0;
		padding-right: 0;
		width: 180px;
	}
	ul.trend-list li h2 {
		font-weight: bold;
		font-size: 1rem;
	}
	ul.trend-list li aside i{
		font-size: 1.1rem;
		margin-right: 4px;
		position: relative;
		top: .2rem;
	}
	ul.trend-list li .desc {
		font-size: .8rem;
		line-height: 1.5;
		display: inline-block;
	}
	ul.trend-list li .channel-title {
		margin-bottom: .6em;
	}
}
@media(min-width:768px) and (max-width: 970px) {
	#index section.ranking {
		padding: 0 2%;
	}
}
@media(max-width: 767px) {
	ul.trend-list li .rank {
		top: 10px;
		left: 10px;
	}
	ul.trend-list li > div,
	ul.trend-list li .thumbnail {
		display: table-cell;
		vertical-align: top;
		padding: 10px;
	}
	ul.trend-list li .thumbnail {
		padding-right: 0;
		width: 120px;
	}
	ul.trend-list li h2 {
		font-weight: bold;
		font-size: .9rem;
		margin-bottom: .5em;
		line-height: 1.4;
	}
	ul.trend-list li aside i{
		font-size: .9rem;
		margin-right: 4px;
		position: relative;
		top: .2rem;
	}
	ul.trend-list li .channel-title {
		width: calc(100vw - 160px);
		margin-bottom: .4em;
	}
}
ul.trend-list li .rank.up {
	background: rgba(200,0,0,.8);
}
ul.trend-list li .rank.down {
	background: rgba(0,100,200,.8);
}
ul.trend-list li .rank.keep {
	background: rgba(100,200,100,.8);
}
ul.trend-list li .rank.new {
	background: rgba(200,0,0,.8);
}
ul.trend-list li .rank.new i {
	font-size: 13px;
    margin-left: .2rem;
}

/* hnav-mymenu
-------------------------------------------------------*/
#hnav-mymenu {
	display: none;
	position: absolute;
	background: #000;
	color: #fff;
	font-size: .75rem;
	padding: 2px 9px;
	width: 300px;
}
#hnav-mymenu.active {
	display: block;
}
#hnav-mymenu.active a {
	color: #fff;
	display: block;
	line-height: 1.5;
	padding: 8px 10px;
}
#hnav-mymenu .news li a {
	background: #222;
	padding: 6px 10px;
}
#hnav-mymenu .news li {
	border-bottom: 1px solid #000;
}
#hnav-mymenu > ul > li {
	border-top: 1px solid #333;
}
#hnav-mymenu ul:first-child li:first-child {
	border-top: none;
}
@media(min-width: 768px) {
	#hnav-mymenu.active {
		top: 51px;
		right: 0;
	}
}
@media(max-width: 767px) {
	#hnav-mymenu.active {
		top: 51px;
		right: 0;
	}
}
#hnav-mypage .notification-count {
	position: absolute;
	display: block;
    top: -4px;
    right: 4px;
    color: #222;
    background-color: #ff0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    line-height: 18px;
    font-size: 10px;
    text-align: center;
    cursor: pointer;
}
#hnav-mymenu .signout {
	margin-bottom: 0;
}
#hnav-mymenu .signout p {
	padding: 10px;
	font-size: .7rem;
}
#hnav-mymenu .signout p a {
	margin: 0 10px;
	background: #222;
	display: block;
    border-radius: 5px;
	padding: 8px;
    color: #fff;
    line-height: 1;
	text-align: center;
}
#warning {
	padding: 5px 8px;
	border: 2px solid #d00;
	margin-bottom: 1em;
	line-height: 1.4;
}
@media(max-width: 480px) {
	#warning {
		font-size: .75rem;
	}
}