@charset "UTF-8";

/* header
---------------------------------------- */
header {
	width: 100%;
	padding-block: min(5%,70px);
	background-color: #2c8b23;
  color: #ffffff;
}
header h1 {
	display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 90%;
	margin-inline: auto;
  font-family: "MPLUS1p-Bold", sans-serif;
  font-size: min(6.4vw, 2.8rem);
}
header h1 .logo {
  width: min(35%,140px);
  margin-left: -5%;
  margin-bottom: 1.5%;
}
header h1 .seg-title {
  width: 100%;
  text-align: center;
}
@media print, screen and (min-width: 600px) {
  header h1 { flex-wrap: nowrap; align-items: center; }
  header h1 .logo { width: min(25%,210px); margin-bottom: min(-0.5%,-4px); }
  header h1 .seg-title { width: initial; margin-left: min(3%,40px); font-size: min(4.3vw, 3.5rem); text-align: left; }
}
@media print, screen and (min-width: 960px) {
  header h1 .logo { width: min(20%,240px); }
  header h1 .seg-title { font-size: min(4.0vw, 5.2rem); }
}


/* main : main-area 
---------------------------------------- */
/* h2 */
.main-area > h2 {
  display: flex;
	justify-content: center;
	align-items: center;
  margin-bottom: 3%;
  font-family: "MPLUS1p-Black", sans-serif;
	font-size: 2.4rem;
}
.main-area > h2 .year,
.main-area > h2 .month {
  font-size: 1.25em;
  line-height: 1.2;
}
.main-area > h2 .year {
  margin-right: 0.07em;
}
.main-area > h2 .month {
  margin-inline: 0.07em;
}
.main-area > h2::before,
.main-area > h2::after {
	content: '';
  display: block;
  width: 1.0em;
  height: 1.0em;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
.main-area > h2::before {
  margin-right: 0.2em;
  background-image: url("../image/h2_side-area-l.svg");
}
.main-area > h2::after {
  margin-left: 0.2em;
  background-image: url("../image/h2_side-area-r.svg");
}
@media print, screen and (min-width: 600px) {
  .main-area > h2 { font-size: 2.9rem; }
}
@media print, screen and (min-width: 960px) {
  .main-area > h2 { font-size: 3.6rem; }
}
@media print, screen and (min-width: 1366px) {
  .main-area > h2 { font-size: 4.1rem; }
}

/* archives : common */
.archives {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: -5%;
}
.archives > section {
  margin-bottom: 8%;
}
.archives > section h3:first-child {
  margin-top: 0;
}
@media print, screen and (min-width: 960px) {
  .archives { margin-bottom: -3.25%; }
  .archives > section { width: 47.5%; margin-bottom: 5.5%; }
}

/* archives : ranking */
.archives section.ranking h3 {
	margin-bottom: 0.5em;
  padding-bottom: 0.2em;
	border-bottom: 2px dotted #212121;
	font-weight: bold;
}
.archives section.ranking h3::before {
	content: url('../image/ranking_crown.svg');
	margin-right: 0.25em;
}

/* archives : masterpiece */
.archives section.masterpiece h3 {
	margin-bottom: 0.5em;
}
.archives section.masterpiece h3::before {
	content: url('../image/masterpiece_disc.svg');
	margin-right: 0.25em;
}
.archives section.masterpiece .topic {
  margin-top: 0;
}

/* archives : nozokimi */
.archives section.nozokimi h3 {
	margin-bottom: 0.5em;
}
.archives section.nozokimi h3::before {
	content: url('../image/nozokimi_star.svg');
	margin-right: 0.25em;
}
.archives section.nozokimi .topic {
  margin-top: 0;
}


/* main : side-area
---------------------------------------- */
.side-area > section.links h3 {
  display: inline-block;
	margin-block: 0.8em 0.2em;
  padding: 0.1em 0.5em;
  border-radius: 2px;
  background-color: #2c8b23/*#8dc21f*/;
	color: #ffffff;
  font-size: 1.7rem;
}
.side-area > section.links h3:first-child {
	margin-top: 0.2em;
}
.side-area > section.links ul.link-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.side-area > section.links ul.link-list li + li::before {
  content: '/';
  margin-inline: 0.4em;
}
.side-area > section.links a.btn {
  margin-top: 10%;
}
@media print, screen and (min-width: 600px) {
  .side-area > section.links a.btn { margin-top: min(10%,45px); }
}