/****************************************

          import

*****************************************/
@font-face {
  font-family: 'fontello';
  src: url('font/fontello.eot?82251369');
  src: url('font/fontello.eot?82251369#iefix') format('embedded-opentype'),
       url('font/fontello.woff2?82251369') format('woff2'),
       url('font/fontello.woff?82251369') format('woff'),
       url('font/fontello.ttf?82251369') format('truetype'),
       url('font/fontello.svg?82251369#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}


/****************************************

          global

*****************************************/
*,
::after,
::before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	font-size: 62.5%;/* 10px */
}

body {
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:16px; font-size:1.6rem;
	line-height: 1.2;
	text-align: left;
	background-color: #f5f5f5;
	color: #333;
	word-wrap:break-word;
	overflow-wrap:break-word;
	font-weight: bold;
}

.clearfix:before,
.clearfix:after{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: "";
	clear: both;
	height: 0 !important;
}
.container{
	margin: auto;
	width: 768px;
}

a{
	text-decoration: none;
	color: #55acee;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
strong{
	font-weight: bold;
}

table{
	font-size: 90%;
	border-collapse: separate;
	border-spacing: 3px 3px;
	border:none;
}
th{
	background: #483d8b;
	border:1px solid #dcdcdc;
	padding: 5px 10px;
	border-radius: 4px;
	color: white;
}
td{
	background: white;
	border:1px solid #dcdcdc;
	padding: 5px 10px;
	border-radius: 4px;
}


@media ( max-width : 768px ) {
	body {
		font-size:14px; font-size:1.4rem;
	}
	.container{
		width: 100%;
	}
}


/****************************************
          main-content
*****************************************/
#main-content{
	background: white;
	padding: 1em;
}
#page-title{
	font-size: 120%;
	color: #55acee;
	border-bottom: double 4px #55acee;
}
#quick-link{
	text-align: right;
}
#quick-link a{
	color: inherit;
}


/****************************************
          hour
*****************************************/
.hour-part{
	margin-top: 1em;
}
.hour-title{
	font-size: 120%;
}

/****************************************
          trend
*****************************************/
.trend-rank1.trend-part,
.trend-rank2.trend-part,
.trend-rank3.trend-part,
.trend-pickup.trend-part{
	margin-bottom: 1em;
	padding: 1em;
	border: #ddd solid 1px;
	border-radius: 10px;
}
.trend-rank1 .trend-name{
	border-left: solid 6px #f0e68c;
	padding-left: .5em;
}
.trend-rank2 .trend-name{
	border-left: solid 6px #d3d3d3;
	padding-left: .5em;
}
.trend-rank3 .trend-name{
	border-left: solid 6px #f5f5dc;
	padding-left: .5em;
}
.trend-top3 .trend-name,
.trend-pickup .trend-name{
	margin-top: .5em;
	margin-bottom: 1em;
	font-size: 120%;
}
.trend-pickup .trend-name:after{
	content:"pick up!";
	display: inline-block;
	background: #b8860b;
	color: white;
	padding: 0 .5em;
	margin-left: .5em;
	border-radius: 4px;
}
.trend-name a{
	color: inherit;
}
.trend-volume{
	font-size: 80%;
	background: #55acee;
	display: inline-block;
	color: white;
	padding: 0 .3em;
	border-radius: 3px;
}
.trend-top3 .trend-volume:before{
	content:"\3064\3076\3084\304D\6570";
	margin-right: .5em;
}

/****************************************
          slider
*****************************************/
#slider{
	position: relative;
	overflow: hidden;
}
#slider-container{
	display: flex;
	align-items: flex-start;
	transition: height 1s ease;
}
#slider-container.slider-auto-height{
	height: 0;
}
.slider-item{
	flex: 1;
	transition: transform .2s cubic-bezier(.48,0,.49,1.95);
	transform: scale(0.95);
	transform-origin: top;
}
.slider-item.active{
	transform: scale(1);
}
.slider-item.push{
	transform: scale(0.95);
}
.slider-item.auto{
	transition: transform 1s cubic-bezier(.65,0,1,1.8);
}
#nextprev{
	display: flex;
	justify-content: space-between;
}
#slider-prev,
#slider-next{
	cursor: pointer;
	color: #55acee;
}
.slider-invalid{
	color: #ccc !important;
}
@media ( max-width : 768px ) {
	#slider-prev,
	#slider-next{
		display: none;
	}
	#nextprev{
		display: block;
	}
	#nextprev:after{
		content: "\2039\2039\3000\30B9\30EF\30A4\30D7\3057\3066\306D\FF01\3000\203A\203A";
		display: block;
		text-align: center;
		color: #ccc;
	}
}


/****************************************
          tweet
*****************************************/
.tweet{
	border: solid 1px #eee;
	border-radius: 3px;
	font-size: 80%;
	margin-bottom: .5em;
}
.tweet-title{
	padding: .5em;
	background: #55acee;
	color: white;
}
.tweet-link{
	display: inline-block;
	background: white;
	padding: 0 .5em;
	border-radius: 4px;
}
.tweet-time{
	color: #aaa;
	text-align: right;
}
.tweet-content{
	padding: .5em;
}

/****************************************
          ad
*****************************************/
.ad{
	border: solid 1px #eee;
	border-radius: 3px;
	position: relative;
	padding: .5em;
}
.ad-content{
	display: flex;
	align-items: flex-start;
}
.ad-img{
	border: solid 1px #ddd;
	margin-right: .5em;
}
.ad-link{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ad-rakuten:after{
	content: "\697D\5929";
	display: inline-block;
	padding: 0 .5em;
	background: #b22222;
	color: white;
	border-radius: 3px;
	margin-left: .5em;
}
.ad-more{
	color : #55acee;
	text-align: right;
}

/****************************************
          wiki
*****************************************/
.wiki{
}
.wiki-title{
	border-top: double 5px #ddd;
	border-bottom: double 5px #ddd;
	padding: .3em 0;
	margin: .5em 0;
}
.wiki-link{
	margin-top: .5em;
	display: block;
	text-align: right;
}

/****************************************
          top3-rank
*****************************************/
#top3-rank{
	margin-top: 1em;
	margin-bottom: 1em;
	padding: 1em;
	border: solid 2px #55acee;
	border-radius: 4px;
	box-shadow: 0 2px 2px 0 #aaa;
}
#top3-rank-title{
	border-bottom: solid 2px #55acee;
	margin-bottom: 1em;
}

/****************************************
          search
*****************************************/
#search{
	position :fixed;
	bottom: 0;
	right: 0;
	padding: .5em;
	background: white;
	box-shadow: -1px -1px 2px 0 #999;
	border-radius: 3px 0 0 0;
}
#search-checkbox{
	display:none;
}
#search-label{
	display: block;
	padding: .5em;
}
#search #search-form{
	display: none;
}
#search-date{
	border: solid 1px #ccc;
}
#search-checkbox:checked ~ #search-form{
	display: block;
}

/****************************************
          long tail trend
*****************************************/
#lt-content{
	margin-top: 2em;
	padding: 1em;
	border: #ddd solid 1px;
	border-radius: 10px;
}
#lt-content a{
	color: inherit;
}
#lt-title{
	color: #b8860b;
	margin-bottom: .5em;
}
.lt-count{
	background: #b8860b;
	color: white;
	font-size: 80%;
	display: inline-block;
	padding: 0 .3em;
	border-radius: 3px;
}
.lt-count:after{
	content:"hours";
	margin-left: .5em;
}

/****************************************

          icon

*****************************************/
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
}

.icon-facebook:before { content: '\e800'; } /* '' */
.icon-twitter:before { content: '\e802'; } /* '' */
.icon-search:before { content: '\e805'; } /* '' */
.icon-home:before { content: '\e80e'; } /* '' */
.icon-rss:before { content: '\f09e'; } /* '' */
.icon-hatena:before{
	content: "B!";
	font-family: Verdana;
	font-weight: bold;
	font-size: 90%;
}