@charset "UTF-8";

/* header
================================================= */
header {
	width: 100%;
  padding: 3vw 0 90vw;
	background: url(../image/hero.jpg?2024) no-repeat left -15vw bottom;
  background-size: cover;
}
header h1 {
  width: 90%;
	margin: 0 auto;
}


/* main
================================================= */
main {
	width: 90%;
	max-width: 1220px;
	margin: 0 auto 10%;
}
section { margin-top: 12%; }
section h2 {
  width: 100%;
  max-width: 500px;
  margin-bottom: 3%;
}
section ul {
  list-style: outside;
  margin-left: 1.8em;
}
.f-small { font-size: 0.85em; }
.f-bold { font-weight: bold; }
.f-red { color: #D20D3F; }
a.btn {
  display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 270px;
	height: 44px;
  margin: 0.3em 0;
  padding: 0 1em;
  border-radius: 25px;
  background: #FFDA14;
  color: #333;
  font-size: 1.5rem;
  line-height: 1.2;
  text-decoration: none;
}
a.btn:hover, a.btn:active { background: #FFC1C5; }
a.btn .format { margin: 0 0.3em; }
a.btn + a.btn { margin-top: 1.0em; }

/* about */
section.about .theme {
  width: 100%;
  max-width: 550px;
  margin: 0 auto;
  padding: 5%;
  border: 4px solid #009fad;
  text-align: center;
}
section.about .theme img {
  width: 100%;
  max-width: 440px;
  margin: 0 auto 1.2em;
}
section.about .theme p { margin-top: 0.6em; }
section.about .theme p.subtheme {
  margin-bottom: -0.3em;
  color: #eb6e97;
  font-size: 1.2em;
  font-weight: bold;
}
section.about .theme p br { display: none; }
section.about .theme .f-small { letter-spacing: 0.1em; }
.banner {
	width: 90%;
	max-width: 450px;
	margin: 5% auto 0;
}

/* prize */
section.prize h2 + p {
  margin-top: -0.3em;
}
section.prize h3 {
  margin: 3% 0 1.5%;
  padding: 0 10px;
  border-radius: 4px;
  background: #AEE1B6;
  color: #097532;
  font-size: 1.6rem;
  font-weight: bold;
}
section.prize ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* apply */
section.apply dt {
  margin-top: 3%;
  margin-bottom: -1.2%;
  color: #1495D2;
  font-size: 1.8rem;
  font-weight: bold;
}
section.apply dt:first-of-type {
  margin-top: -0.3em;
}
section.apply dd {
  margin-left: 5px;
  padding: 1% 0 1% 3%;
  border-left: 5px solid #C3E2EE;
}
section.apply dd .address {
  margin: 1% 0 2%;
  padding: 2.5% 4%;
  border-radius: 4px;
  background: #e0e9ed;
}
section.apply dd a.btn {
  margin: 1em 0;
  padding: 0.8em;
  border-radius: 24px;
}
section.apply dd a.btn + div.address { margin-top: 1.6em; }

/* result */
section.result h2 + h3 {
	margin-top: 1.0em;
}
section.result h3 {
  margin: 2.2em 0 1.5%;
  padding: 0 10px;
  border-radius: 4px;
  background: #a1dea8;
  color: #0f6449;
  font-size: 1.6rem;
  font-weight: bold;
}
section.result h4 {
  display: inline-block;
  margin: 0.9em 0 0.3em;
  border-bottom: 3px dotted #6CBBAD;
  color: #1B947F;
  font-weight: bold;
  line-height: 1.6;
}
section.result h4::before {
  content: '●';
  margin-right: 0.1em;
}
section.result h3 + h4 { margin-top: 0; }
section.result h4 + a.btn { margin-top: 0.5em; }

/* stream */
div.video {
	margin-top: 0.5em;
	border: 4px solid #222;
	background: #222;
}
div.youtube {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 0;
  margin: 0 auto;
  padding: 56.25% 0 0;
}
div.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* banner */
section.info {
	padding: 4%;
	border-radius: 8px;
	background: #D2E9FB;
}
a.bn {
  display: block;
  width: 100%;
  max-width: 320px;
  margin-bottom: 0.4em;
  border: 1px solid #333;
}

/* privilege */
section.privilege h3 {
	margin: 3% 0 1.5%;
  padding: 0 10px;
  border-radius: 4px;
  background: #eea9c6;
  color: #7F0228;
  font-size: 1.6rem;
  font-weight: bold;
}
section.privilege h2 + h3 {
	margin-top: 0;
}


/* responsive
================================================= */
@media print, screen and (min-width: 600px) {
	header { margin-top: 5vw; padding: 38vw 0 2vw; background-position: left 25vw bottom; background-size: auto 120%; }
	header h1 { width: 94%; }
	header h1 img { width: 78%; }
  main { display: flex; justify-content: space-between; margin-top: 3%; margin-bottom: 4.5%; }
  main .column { width: 47%; }
	section h2 { margin-bottom: 4%; }
}
@media print, screen and (min-width: 960px) {
	header { padding: 33vw 0 4vw; background-position: left 25vw bottom; background-size: auto 130%;}
	header h1 img { width: 72.5%; }
  main { margin-bottom: 80px; }
	a.btn { height: 50px; }
  section { margin-top: 80px; }
  section.about .theme { border: 5px solid #009fad; }
  section.about .theme img { margin-bottom: 1.8em; }
  section.prize h3 { margin-top: 4%; }
  section.apply dt { margin-top: 4%; font-size: 2.0rem; }
}
@media print, screen and (min-width: 1200px) {
  section.about .theme p br { display: inline; }
}
@media print, screen and (min-width: 1366px) {
	header { width: 100%; max-width: 1440px; margin: 50px auto 0; padding: 470px 0 60px; background-position: left 350px bottom; }
	header h1 { width: 94%; max-width: 1230px; }
}