@charset "UTF-8";

@font-face {
	font-family: Roboto;
	src: url(css/Roboto-Regular.ttf);
	font-weight: normal;
}
@font-face {
	font-family: Roboto;
	src: url(css/Roboto-Bold.ttf);
	font-weight: bold;
}

BODY {
	font-family: Roboto, sans-serif;
	font-size: 11pt;
	background-color: #F8F8FC;
}

*:lang(ja) {
	font-family: sans-serif;
}

form {
	margin: 0px; padding: 0px;
}

.wrapper {
	width: 1080px;
	margin: 0 auto;
}

.right {
	text-align: right
}
.center {
	text-align: center
}

table.bordertbl {
	border-collapse: collapse;
}
table.bordertbl td {
	border: 1px solid #000;
	padding: 3px;
}
table.bordertbl th {
	border: 1px solid #000;
	padding: 3px;
}table.week-links {
	border-collapse: collapse;
}
table.week-links td + td {
	border: 1px solid #000;
	background-color: #fff;
	padding: 3px;
}
table.week-links td.week-links-vote {
	border: 0;
	border-top: 1px solid #000;
	background: none;
	padding-top: 6px;
	font-size: 1.5em;
}

/* ---- Instagram ranking ---- */
.ig-filters { display: flex; flex-direction: column; gap: .5rem; margin: .75rem 0 1rem; }
.ig-filters > div { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.ig-filter-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #6c757d; min-width: 3.75rem; }
.ig-pill { display: inline-block; padding: .2rem .75rem; border: 1px solid #dee2e6; border-radius: 999px; font-size: .875rem; color: #495057; text-decoration: none; background: #fff; transition: background-color .15s, border-color .15s; }
a.ig-pill:hover { background: #f1f3f5; border-color: #ced4da; color: #212529; }
.ig-pill.active { background: #d6249f; border-color: #d6249f; color: #fff; font-weight: 600; }

.ig-ranking td { padding-top: .45rem; padding-bottom: .45rem; }
.ig-rank { display: inline-flex; align-items: center; justify-content: center; min-width: 1.9rem; height: 1.9rem; padding: 0 .3rem; border-radius: 999px; font-weight: 600; font-size: .875rem; color: #6c757d; font-variant-numeric: tabular-nums; }
.ig-rank-1 { background: #f5c518; color: #3d2f00; }
.ig-rank-2 { background: #d0d4d9; color: #2b2f33; }
.ig-rank-3 { background: #d99a5b; color: #3a2206; }

.ig-account { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: inherit; }
.ig-avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; padding: 2px; background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
.ig-avatar-empty { display: inline-flex; align-items: center; justify-content: center; padding: 0; color: #fff; font-weight: 700; }
.ig-names { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.ig-name { font-weight: 600; color: #212529; }
.ig-handle { font-size: .8rem; color: #6c757d; }
.ig-account:hover .ig-name { color: #d6249f; text-decoration: underline; }
.ig-country { text-decoration: none; }
.ig-country:hover { text-decoration: underline; }
.ig-followers { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Instagram profile ---- */
.ig-profile { display: flex; gap: 1.75rem; align-items: flex-start; margin: 1.25rem 0 1.5rem; }
.ig-avatar-lg { width: 128px; height: 128px; padding: 4px; font-size: 3rem; }
.ig-profile-main { flex: 1; min-width: 0; }
.ig-profile-name { font-size: 1.75rem; font-weight: 700; margin: 0 0 .35rem; }
.ig-profile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.ig-handle-link { font-weight: 600; color: #d6249f; text-decoration: none; margin-right: .25rem; }
.ig-handle-link:hover { text-decoration: underline; }
.ig-chip { display: inline-block; padding: .15rem .65rem; border-radius: 999px; background: #f1f3f5; font-size: .85rem; color: #495057; text-decoration: none; }
a.ig-chip:hover { background: #e9ecef; color: #212529; }
.ig-chips { display: flex; flex-wrap: wrap; gap: .4rem; }

.ig-stats { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 .9rem; }
.ig-stats > div { padding: .5rem 1rem; border: 1px solid #e9ecef; border-radius: .75rem; background: #fff; min-width: 7.5rem; }
.ig-stats dt { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #6c757d; }
.ig-stats dd { margin: 0; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ig-stats small { font-size: .75rem; font-weight: 400; color: #6c757d; }

.ig-bio { margin: 0 0 .9rem; white-space: normal; }
.ig-ranks { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.ig-rank-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .75rem .15rem .2rem; border: 1px solid #dee2e6; border-radius: 999px; font-size: .85rem; color: #495057; text-decoration: none; }
.ig-rank-pill:hover { border-color: #d6249f; color: #212529; }
.ig-rank-pill .ig-rank { min-width: auto; height: 1.6rem; padding: 0 .5rem; background: #f1f3f5; }
.ig-rank-pill .ig-rank-1 { background: #f5c518; }
.ig-rank-pill .ig-rank-2 { background: #d0d4d9; }
.ig-rank-pill .ig-rank-3 { background: #d99a5b; }
.ig-updated { font-size: .8rem; color: #6c757d; }

.ig-section { margin-bottom: 1.75rem; }
.ig-section-title { font-size: 1.1rem; font-weight: 700; margin-bottom: .75rem; }
.ig-columns { display: flex; gap: 1.5rem; align-items: flex-start; }
.ig-col-main { flex: 1; min-width: 0; }
.ig-col-side { flex: none; }
.ig-chart { display: block; width: 100%; height: auto; }

.ig-feature { display: flex; gap: 1.25rem; padding: 1rem; border: 1px solid #e9ecef; border-radius: 1rem; background: #fff; }
.ig-feature-img { flex: 0 0 min(40%, 280px); }
.ig-feature-img img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .75rem; }
.ig-feature-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.ig-caption { margin: 0; max-height: 14rem; overflow: auto; overflow-wrap: anywhere; }

.ig-post-stats { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .85rem; color: #495057; font-variant-numeric: tabular-nums; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ig-post { position: relative; margin: 0; }
.ig-post img, .ig-post-missing { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .75rem; display: block; background: #f1f3f5; transition: transform .15s; }
.ig-post:hover img { transform: scale(1.02); }
.ig-post-type { position: absolute; top: .5rem; right: .5rem; padding: 0 .4rem; border-radius: .4rem; background: rgba(0,0,0,.55); color: #fff; font-size: .85rem; }
.ig-post .ig-post-stats { margin-top: .4rem; }

@media (max-width: 767.98px) {
  .ig-profile { flex-direction: column; align-items: center; text-align: center; }
  .ig-profile-meta, .ig-stats, .ig-ranks { justify-content: center; }
  .ig-columns { flex-direction: column; }
  .ig-col-side { align-self: center; }
  .ig-feature { flex-direction: column; }
  .ig-feature-img { flex-basis: auto; }
  .ig-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
}