@charset "UTF-8";

/* header
================================================= */
header {
  width: 100%;
  padding-top: 3%;
  background-color: #060025;
  background-image: url(../image/bg_header-number.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 180% auto;
}
header h1 {
  width: min(100%, 1250px);
  margin: 0 auto;
  padding: 1px 0;
  background-image: url("../image/bg_header-hexagon.png");
  background-repeat: no-repeat;
  background-position: left -11vw top;
  background-size: 120% auto;
}
header h1 img {
  width: 86%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: -4%;
}
@media print, screen and (min-width: 625px) {
  header { padding-top: 2%; background-size: 110% auto; }
  header h1 { background-position: left 2vw top; background-size: 95% auto; }
  header h1 img { width: 68%; margin-bottom: -3%; }
}
@media print, screen and (min-width: 1366px) {
  header { padding-top: 40px; background-size: 1320px auto; }
  header h1 { background-position: left 25px top; background-size: 94% auto; }
  header h1 img { margin-bottom: -27px; }
}


/* main
================================================= */
/* section : common */
.area > section > h2 {
  margin-bottom: 6%;
}
@media print, screen and (min-width: 625px) {
  .area > section > h2 { margin-bottom: 4%; }
}

/* intro */
.intro {
  width: min(90%, 1018px);
  margin: 0 auto;
}
.intro .overview {
  color: #060025;
  font-family: "NotoSansJP-Bold", sans-serif;
  font-size: clamp(1.6rem, 4.5vw, 1.85rem);
  text-align: center;
}
.intro .overview .clause {
  display: inline-block;
}
@media print, screen and (min-width: 625px) {
  .intro .overview { font-size: clamp(1.8rem, 2.9vw, 2.0rem); }
}
@media print, screen and (min-width: 960px) {
  .intro .overview { font-size: clamp(2.1rem, 2.3vw, 2.4rem); }
}

/* interview */
.interview {
  margin-top: 12%;
}
.interview .siteflow {
  margin-top: 8%;
}
.interview .siteflow a.btn {
  width: min(90%, 350px);
}
@media print, screen and (min-width: 625px) {
  .interview { margin-top: 10%; }
  .interview .siteflow { margin-top: 6%; }
}
@media print, screen and (min-width: 960px) {
  .interview { margin-top: 9%; }
}
@media print, screen and (min-width: 1366px) {
  .interview { margin-top: 125px; }
}

/* support */
.support > h2 {
  font-size: clamp(2.0rem, 5.3vw, 3.0rem);
}
.support ul.supporters {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: -4%;
}
.support ul.supporters li {
  width: 48%;
  margin-bottom: 4%;
}
.support ul.supporters li a {
  display: block;
  border: 0px solid #000;
}
@media print, screen and (min-width: 625px) {
  .support > h2 { font-size: clamp(2.0rem, 3.6vw, 3.0rem); }
  .support ul.supporters { margin-bottom: -3%; }
  .support ul.supporters li { width: 31%; margin-bottom: 3%; }
  .support ul.supporters li:nth-child(3n+2):last-child { margin-right: 34.5%; }
}
@media print, screen and (min-width: 960px) {
  .support > h2 { font-size: clamp(2.8rem, 2.9vw, 3.6rem); }
  .support ul.supporters li { width: 22.75%; }
  .support ul.supporters li:nth-child(3n+2):last-child { margin-right: initial; }
  .support ul.supporters li:nth-child(4n+2):last-child { margin-right: 51.5%; }
  .support ul.supporters li:nth-child(4n+3):last-child { margin-right: 25.75%; }
}

/* outro */
.outro {
  width: min(90%, 1230px);
  margin: 0 auto;
}
.outro dl {
  width: 100%;
  font-size: 1.9rem;
  text-align: center;
}
.outro dt {
  margin-bottom: 0.2em;
  color: #060025;
  font-family: "NotoSansJP-Bold", sans-serif;
  font-size: 1.1em;
  font-weight: bold;
  line-height: 1.4;
}
@media print, screen and (min-width: 625px) {
  .outro dl { font-size: 2.1rem; }
}
@media print, screen and (min-width: 960px) {
  .outro dl { font-size: 2.3rem; }
}
@media print, screen and (min-width: 1366px) {
  .outro dl { font-size: 2.5rem; }
}