@charset "UTF-8";

/* header
================================================= */
header h1 {
  width: 90%;
  margin: 12% auto;
}
@media print, screen and (min-width: 600px) {
	header h1 { width: 80%; margin: 8% auto; }
}
@media print, screen and (min-width: 960px) {
	header h1 { width: min(75%, 900px); }
}
@media print, screen and (min-width: 1366px) {
	header h1 { margin: 100px auto; }
}


/* main
================================================= */
main > section:not(:first-child) {
  margin-top: 16vw;
}
main > section ul {
  padding: 0;
  list-style: none;
}
@media print, screen and (min-width: 600px) {
  main > section:not(:first-child) { margin-top: 10vw; }
}
@media print, screen and (min-width: 960px) {
  main > section:not(:first-child) { margin-top: 9vw; }
}
@media print, screen and (min-width: 1366px) {
  main > section:not(:first-child) { margin-top: 120px; }
}

/* program */
.program {
  width: 100%;
  padding: 6%;
  border-radius: 7px;
  background-color: #e2e9ff;
}
.program h2 {
	margin-top: -0.15em;
  margin-bottom: 3%;
  font-size: 2.1rem;
  text-indent: initial;
}
.program h2::before {
  display: none;
}
.program dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.program dt {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 85px;
  margin-top: 4%;
  padding: 0.15em 0.6em;
  border-radius: 2px;
  background-color: #3f48be;
  color: #ffffff;
}
.program dd {
  width: 100%;
  margin-top: 0.35em;
  font-size: 1.05em;
  font-weight: bold;
}
@media print, screen and (min-width: 600px) {
  .program { padding: 5%; }
  .program h2 { margin-bottom: 1%; font-size: 2.3rem; }
  .program dt, .program dd { margin-top: 2.5%; }
  .program dd { width: calc(100% - 2% - 85px); }
}
@media print, screen and (min-width: 960px) {
  .program { width: min(86%, 861px); margin-left: auto; margin-right: auto; padding: 3.5%; }
  .program h2 { font-size: 2.5rem; }
}

/* news */
.news ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: -6%;
  margin-bottom: 4%;
}
.news li {
  width: 47.5%;
  margin-top: 6%;
}
.news li a {
  color: #181818;
  text-decoration: none;
}
.news li a:hover,
.news li a:active {
  text-decoration: underline;
}
.news li a .pic {
  position: relative;
}
.news li a .pic::before,
.news li a .pic::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.news li a[href*="youtube"] .pic::before,
.news li a[href*="youtu.be"] .pic::before{
  background-image: url("../image/icons/play-circle.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 25% auto;
  z-index: 1;
}
.news li a .pic::after {
  background-color: #ffffff;
  opacity: 0;
}
.news li a:hover .pic::after,
.news li a:active .pic::after {
  opacity: 0.25;
}
.news li h3 {
  margin-top: 5%;
  margin-bottom: 1.5%;
  font-size: 1.8rem;
  line-height: 1.4;
}
.news li time {
  color: #a6a6a6;
  font-size: 1.6rem;
}
.news li time::after {
  content: "UP";
  margin-left: 0.3em;
}
.news .btn {
  width: min(90%, 260px);
}
@media print, screen and (min-width: 600px) {
  .news li h3 { margin-top: 4%; margin-bottom: 1%; }
}
@media print, screen and (min-width: 960px) {
  .news ul { margin-top: -3%; margin-bottom: 2%; }
  .news li { width: 31%; margin-top: 3%; }
  .news li:nth-child(3n+2):last-child { margin-right: 34.5%; }
  .news li h3 { margin-top: 3%; margin-bottom: 0.7%; line-height: 1.5; }
}
@media print, screen and (min-width: 1366px) {
  .news li h3 { line-height: 1.6; }
}

/* candidate */
.candidate ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: -7.5%;
}
.candidate li {
  position: relative;
	width: 47.5%;
  margin-top: 7.5%;
}
.candidate li img {
  margin-bottom: 10px;
  border: 1px solid #E8E8E8;
}
.candidate li.elected::after {
	content: "当";
	position: absolute;
	top: -8px;
	left: -8px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	border-radius: 100vh;
	background: #D81717;
	color: #fff;
  font-family: "NotoSansJP-Bold", sans-serif;
	font-size: 2.0rem;
	font-weight: bold;
	z-index: 1;
}
@media print, screen and (min-width: 600px) {
  .candidate ul { margin-top: -6%; }
  .candidate li { width: 30%; margin-top: 6%; }
  .candidate li:nth-child(3n+2):last-child { margin-right: 35%; }
	.candidate li.elected::after { top: -10px; left: -10px; width: 45px; height: 45px; font-size: 2.2rem; }
}
@media print, screen and (min-width: 960px) {
  .candidate ul { margin-top: -5%; }
  .candidate li { width: 21.25%; margin-top: 5%; }
  .candidate li:nth-child(3n+2):last-child { margin-right: initial; }
  .candidate li:nth-child(4n+2):last-child { margin-right: 52.5%; }
  .candidate li:nth-child(4n+3):last-child { margin-right: 26.25%; }
  .candidate li img { margin-bottom: 12px; }
	.candidate li.elected::after { width: 50px; height: 50px; font-size: 2.4rem; }
}
@media print, screen and (min-width: 1366px) {
  .candidate li img { margin-bottom: 15px; }
	.candidate li.elected::after { width: 55px; height: 55px; font-size: 2.8rem; }
}

/* question */
.question ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: -6%;
}
.question li {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 6%;
  margin-top: 6%;
  background: #e2e9ff;
}
.question li p {
  margin-bottom: 4%;
}
.question li a.btn {
  width: min(100%, 260px);
  margin-top: auto;
}
@media print, screen and (min-width: 600px) {
  .question ul { margin-top: -4%; }
  .question li { width: 48%; margin-top: 4%; padding: 3%; }
}
@media print, screen and (min-width: 960px) {
  .question ul { margin-top: -3%; }
  .question li { width: 31.5%; margin-top: 3%; padding: 2.2%; }
  .question li:nth-child(3n+2):last-child { margin-right: 34.25%; }
}

/* banners */
.banners {
  display: flex;
  flex-wrap: wrap;
  margin-top: 16vw;
}
.banners a {
  border: 1px solid #333;
}
@media print, screen and (min-width: 600px) {
  .banners { margin-top: 10vw; }
}
@media print, screen and (min-width: 960px) {
  .banners { margin-top: 9vw; }
}
@media print, screen and (min-width: 1366px) {
  .banners { margin-top: 120px; }
}