/* ---------------------------------------------
   heading
   --------------------------------------------- */

h1 {
	font-size: 160%;
	text-decoration: none;
	line-height: 100%;
	background-color: transparent;
	margin: 0;
	padding: 0;
}

h2 {
	font-size: 130%;
	background-color: transparent;
	margin: 0 0 1rem 0;
	padding: 0 0 .3rem 0;
	border-bottom: 1px solid #cccccc;
}

h3 {
	font-size: 120%;
	background-color: transparent;
	margin: 1.5rem 0 1.5rem 0;
	padding: 0 0 0 .5rem;
	border-left: 1px solid #cccccc;
}

h4, h5, h6 {
	font-size: 110%;
	background-color: transparent;
	margin: 1.5rem 0 1.5rem 0;
	padding: 0;
}


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

.default-list {
	margin-left: 1.5rem;
}

.default-list li {
	margin: .3rem 0;
}

.default-list li ul {
	margin-left: 1rem;
}

.default-list li ul li {
	margin: .3rem 0;
}


/* ---------------------------------------------
   header
   --------------------------------------------- */

.header-container {
	background-color: #ffffff;
}

.site-title-container {
	margin: 0 auto;
	padding: .5rem .7rem .3rem .7rem;
	max-width: 1200px;
	display: flex;
	justify-content: space-between;
}

.site-title-section {
	display: inline;
}

.login, .logout {
	display: inline;
}

.site-title {
	font-size: 170%;
	font-weight: bold;
}

.site-sub-title {
	margin: 0;
	padding: 0 0 0 1.5rem;
	font-size: 90%;
}

.site-title-section a:link {
	text-decoration: none;
	color: #222529;
	background-color: transparent;
}

.site-title-section a:visited {
	text-decoration: none;
	color: #222529;
	background-color: transparent;
}

.site-title-section a:hover {
	text-decoration: none;
	color: #222529;
}

.site-title-section a:active {
	text-decoration: none;
	color: #222529;
}

.site-menu {
	margin: 0 auto;
	padding: .3rem 0 0 .7rem;
	max-width: 1200px;
}

#menu ul {
	margin: 0;
	padding: 0;
	letter-spacing: -0.4rem;
}

#menu ul li {
	text-align: center;
	display: inline-block;
	margin: 0;
	padding: 0;
	letter-spacing: 0;
}

#menu ul li a {
	text-decoration: none;
	color: #65708a;
	display: block;
	margin: 0;
	padding: .4rem .8rem;
}

#menu ul li a:hover {
	text-decoration: none;
	color: #222529;
	text-decoration: none;
}

#menu ul li.menu-active {
	border-bottom: 4px solid #000000;
}

#menu ul li.menu-active a {
	color: #222529;
}


/* ---------------------------------------------
   main
   --------------------------------------------- */

.main-container {
	background-color: #f2f5f8;
	margin: 0;
	padding: 2rem 0;
}

.main-contents {
	margin: 0 auto;
	padding: 0;
	max-width: 1200px;
}

.main-header {
	margin: 0 .66rem;
	padding: 0;
}

.main-body {
	margin: 0 .66rem;
	padding: 0;
}

.main-body-row {
	margin: 0;
	padding: 0;
}

.main-section {
	background-color: #ffffff;
	margin: 1rem 0;
	padding: 3rem 3rem 1rem 3rem;
	line-height: 1.7;
	border-radius: 10px;
}

.main-title {
	margin: 0 0 1rem 0;
	padding: 0;
	display: flex;
	justify-content: space-between;
}

.main-title-with-summary {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: space-between;
}

.summary {
	margin: 0;
	padding: 0;
}

.date-list {
	display: flex;
	justify-content: flex-end;
}

.sort {
	margin: 0;
	padding: 0
}

.nav-sort {
	border-bottom: solid 1px #ccc;
}

.nav-item a.nav-link {
	color: #65708a;
}

.nav-item a.nav-link:hover {
	color: #222529;
}

.nav-item a.nav-active {
	color: #222529;
	border-bottom: 4px solid #222529;
}

.last-updated {
	text-align: right;
	font-size: 85%;
	margin: .1rem 0 0 0;
	padding: 0;
}

.paging {
	margin: 1.8rem 0 1rem 0;
	padding: 0;
}

.tweet-container > .paging {
	margin: 1.8rem 0 1.8rem 0;
	padding: 0;
}

.tweet-container {
}

.widget-container {
}

.section {
	margin: 2.7rem 0 2.7rem 0;
	padding: 0;
}


/* ---------------------------------------------
   footer
   --------------------------------------------- */

footer {
	font-size: 90%;
	background-color: #ffffff;
	margin: .5rem 0;
	padding: .5rem 0;
}

.site-footer-link {
	margin: 0 auto;
}

.site-footer-link {
	margin: 0 auto;
	padding: 1rem 0 0 0;
	text-align: center;
}

.site-footer-link li {
	text-align: center;
	display: inline-block;
	margin: 0 .6rem;
	padding: 0;
	letter-spacing: 0;
}

.site-footer-container {
	margin: 0 auto;
	padding: .5rem 0 0 0;
	text-align: center;
}


/* ---------------------------------------------
   tweet
   --------------------------------------------- */

.tweet-section {
	background-color: #ffffff;
	margin: 1rem 0 1rem 0;
	padding: .5rem 1rem 1rem 1rem;
	border-radius: 10px;
}

.tweet-header-section {
	margin: 0 0 1rem 0;
	padding: 0;
}

.tweet-body-section {
	margin: 1rem 0 1rem 0;
	padding: 0;
}

.tweet-footer-section {
	margin: 1rem 0 0 0;
	padding: 0;
	font-size: 90%;
}

.rank-section {
	margin: 0 0 .2rem 0;
	display: flex;
	justify-content: space-between;
}

.rank {
}

.rank-text {
	font-size: 180%;
	font-weight: bold;
}

.campaign {
	margin-top: -3px;
}

.rank-count {
	margin: 0 0 .5rem 0;
	padding: 0;
}

.twitter-icon {
	margin: .4rem 0 0 0;
	padding: 0;
}

.tweet-header-retweet, .tweet-header-favorite {
	display: inline;
}

.rank-retweet, .rank-favorite {
	color: #777;
}

.rank-retweet-separator, .rank-favorite-separator {
	color: #777;
}

.rank-retweet-count, .rank-favorite-count {
	color: #c33;
	font-weight: bold;
}

.retweet-count-enable {
	color: #00ba7c;
	font-weight: bold;
}

.favorite-count-enable {
	color: #f91c80;
	font-weight: bold;
}

.retweet-count-disable, .favorite-count-disable {
	color: #777;
	font-weight: bold;
}

.tweet-user {
	height: 50px;
	margin: .2rem 0 0 0;
	padding: 0;
}

.tweet-user-icon {

}

.tweet-user-icon-img {
	float: left;
	border: solid 1px #ccc;
	border-radius: 9999px;
	width: 48px;
	height: 48px;
}

.tweet-user-info {
	float: left;
	margin-left: 10px;
	font-size: 90%;
}

.tweet-user-screen-name {
	color: #777;
}

.text {
	line-height: 1.7;
	clear: both;
	margin: .5rem 0;
	white-space: pre-wrap;
	word-wrap : break-word;
	overflow-wrap : break-word;
}

.tweet-media {
}

.media-photo {
	max-width: 100%;
	height: auto;
	max-height: 560px;
	margin: .2rem 0;
}

.media-video {
	max-width: 100%;
	height: auto;
	max-height: 600px;
}

.tweet-footer-info {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: space-between;
}

.tweet-at {
	color: #777;
	margin: .2rem 0 .5rem 0;
}

.count {
	margin: .5rem 0 .5rem 0;
}

.retweet-action:link, .favorite-action:link, .follow-action:link {
	text-decoration: none;
}

.retweet-icon {
	margin: 0 .5rem 2px 0;
}

.favorite-icon {
	margin: 0 .5rem 2px 2rem;
}

.link {
	margin: .5rem 0 .2rem 0;
}

.link-tweet, .link-user, .link-history {
	margin-right: 1rem;
}

.protected-section {
	margin: 1rem 0 .2rem 0;
}


/* ---------------------------------------------
   user
   --------------------------------------------- */

.user-container {
}

.user-section {
	margin: 0;
	padding: 0;
}

.user-header-section {
	margin: 0;
	padding: .5rem 0 0 0;
}

.user-body-section {
	margin: 0;
	padding: .8rem 0;
}

.user-footer-section {
	margin: 0;
	padding: 0 0 .5rem 0;
}

.user-icon {
	margin: 0;
	display: flex;
	justify-content: space-between;
}

.user-icon-img {
	border: solid 3px #ffffff;
	border-radius: 9999px;
	width: 73px;
	height: 73px;
}

.user-follow-button {
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	color: #000;
	background: #fff;
	border: solid 1px #999;
	border-radius: 20px;
	min-width: 110px;
	height: 40px;
	margin: 0;
	padding: 7.5px 20px;
}

.user-follow-button:hover {
	color: #777;
	background: #f3f3f3;
}

.user-info {
	margin: .5rem 0 0 0;
}

.user-screen-name {
	color: #777;
}

.user-description {
	margin: 0;
	white-space: pre-wrap;
	word-wrap : break-word;
	overflow-wrap : break-word;
}

.user-url {
	background-image: url("../img/url.png");
	background-size: 18px 18px;
	background-position: 0% 50%;
	background-repeat: no-repeat;
	margin: 0 0 .5rem 0;
	padding: 0 0 0 24px;
}

.user-location {
	background-image: url("../img/location.png");
	background-size: 18px 18px;
	background-position: 0% 50%;
	background-repeat: no-repeat;
	color: #777;
	margin: 0 0 .5rem 0;
	padding: 0 0 0 24px;
}

.user-created-at {
	background-image: url("../img/created.png");
	background-size: 18px 18px;
	background-position: 0% 50%;
	background-repeat: no-repeat;
	color: #777;
	margin: 0 0 .5rem 0;
	padding: 0 0 0 24px;
}

.user-count {
	margin: 0;
}

.user-friends-count {
	font-weight: bold;
}

.user-friends-label {
	color: #777;
	font-size: 75%;
}

.user-followers-count {
	margin-left: 1rem;
	font-weight: bold;
}

.user-followers-label {
	color: #777;
	font-size: 75%;
}


/* ---------------------------------------------
   archive
   --------------------------------------------- */

.link-archive-retweet, .link-archive-favorite {
	margin: 0 0 0 .8rem;
}


/* ---------------------------------------------
   adsense
   --------------------------------------------- */

.adsense-section {
	margin: 1rem auto;
}

.adsense-header {
	font-weight: bold;
	margin: 0 0 .1rem 0;
}

.adsense-body {
	margin: .7rem 0 .7rem 0;
	padding: 0;
}


/* ---------------------------------------------
   widget
   --------------------------------------------- */

.widget-section {
	background-color: #ffffff;
	margin: 1rem auto;
	padding: .5rem 1rem;
	border-radius: 10px;
}

.widget-header {
	margin: 0;
	padding: .5rem 0 0 0;
}

.widget-body {
	margin: 0;
	padding: 1rem 0 1rem 0;
}

.widget-footer {
	margin: 0;
	padding: 0 0 .5rem 0;
}

.widget-title {
	font-size: 110%;
	background-color: transparent;
	margin: 0;
	padding: 0;
}

.archive-list {
	list-style: none;
}

.archive-list-sub {
	list-style: none;
	margin: .3rem 0 .3rem 0;
}

.archive-list-year {
	padding: 0;
}

.archive-list-month {
	padding: .3rem 0 .3rem 0;
}

.filter-info {
	color: #777;
	font-size: 90%;
}

.hashtag-list {
	background-color: transparent;
}

.widget-amazon {
	text-align: center;
}

/* ---------------------------------------------
   other
   --------------------------------------------- */

.general-contents {
	background-color: #ffffff;
	margin: 1rem 0;
	padding: .5rem 1.5rem;
	border-radius: 10px;
}

.general-section {
	margin: 1rem 0;
	padding: 0;
}

.form-section {
	margin: 0 0 1rem 0;
}

.form-label {
	color: #777;
	margin: 0 0 .3rem 0;
}

.select-normal {
}

.btn-twitter {
	color: #fff;
	background-color: #1da1f2;
	border-color: #1da1f2;
	width: 200px;
}

.btn-twitter:hover {
	color: #fff;
}

.twitter-login-label {
	margin-left: .5rem;
}

.calendar-sunday {
	color: #e83412;
}

.calendar-saturday {
	color: #0026f7;
}

@media screen and (max-width: 450px) {
	.site-sub-title {
		display: block;
		margin: 0;
		padding: .3rem 0 0 0;
		font-size: 90%;
	}
}

.media-container {
	margin: 0 auto;
}

.media-item {
	width: 24%;
	margin-bottom: 10px;
}

@media screen and (min-width: 992px) {
	.sidebar-stikey {
		position: sticky;
		top: 10px;
	}
}

@media screen and (max-width: 576px) {
	.main-section {
		padding: 3rem 1rem 1rem 1rem;
	}
}

@media screen and (max-width: 1024px) {
	.media-item {
		width: 32.3%;
	}
}

@media screen and (max-width: 800px) {
	.media-item {
		width: 49%;
	}
}

@media screen and (max-width: 524px) {
	.media-item {
		width: 100%;
	}
}

@media screen and (max-width: 834px) {
	.main-title-with-summary {
		display: block;
		justify-content: flex-start;
	}

	.summary {
		margin: 1rem 0 0 0;
		padding: 0;
	}

	.date-list {
		margin: 0 0 .7rem 0;
		display: flex;
		justify-content: flex-start;
	}
}