@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");
@import 'vendors/reset.css';
main {
  position: relative;
  background-color: #ffffff;
  color: #0d0d0d;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
@media screen and (min-width: 1200px) {
  main {
    font-size: 16px;
  }
}
main * {
  box-sizing: border-box;
}
main a {
  display: inline-block;
}
main img {
  max-width: 100%;
  height: auto;
}

#mainView {
  margin: 0 auto;
  max-width: 90%;
}
#mainView .pageSection__wrapper {
  padding: 2rem 0;
  background-color: #ffffff;
}
@media screen and (min-width: 768px) {
  #mainView .pageSection__wrapper {
    padding: 2.5rem 0;
  }
}
#mainView .pageSection__header {
  margin: 0 auto;
  max-width: 90%;
  padding-bottom: 1rem;
}
@media screen and (min-width: 768px) {
  #mainView .pageSection__header {
    max-width: 730px;
  }
}
@media screen and (min-width: 1200px) {
  #mainView .pageSection__header {
    max-width: 1096px;
  }
}
#mainView .pageSection__header h2 {
  margin: 0 auto 0.25em;
  color: #0d0d0d;
  text-align: left;
  font-size: clamp(16px, 1.5em, 24px);
  font-weight: bold;
  border-bottom: 2px solid #61645f;
}
#mainView .pageSection__body {
  color: #0d0d0d;
}
@media screen and (min-width: 768px) {
  #mainView {
    max-width: 730px;
  }
}
@media screen and (min-width: 1200px) {
  #mainView {
    max-width: 1096px;
  }
}

#generalInformation .pageSection__wrapper {
  padding: 2rem 0;
  background-color: #ffffff;
}
@media screen and (min-width: 768px) {
  #generalInformation .pageSection__wrapper {
    padding: 2.5rem 0;
  }
}
#generalInformation .pageSection__header {
  margin: 0 auto;
  max-width: 90%;
  padding-bottom: 1rem;
}
@media screen and (min-width: 768px) {
  #generalInformation .pageSection__header {
    max-width: 730px;
  }
}
@media screen and (min-width: 1200px) {
  #generalInformation .pageSection__header {
    max-width: 1096px;
  }
}
#generalInformation .pageSection__header h2 {
  margin: 0 auto 0.25em;
  color: #0d0d0d;
  text-align: left;
  font-size: clamp(16px, 1.5em, 24px);
  font-weight: bold;
  border-bottom: 2px solid #61645f;
}
#generalInformation .pageSection__body {
  color: #0d0d0d;
}

.infoList {
  margin: 0 auto;
  max-width: 90%;
}
@media screen and (min-width: 768px) {
  .infoList {
    max-width: 730px;
  }
}
@media screen and (min-width: 1200px) {
  .infoList {
    max-width: 1096px;
  }
}
.infoList dl {
  margin-bottom: 1.5rem;
}
.infoList dt {
  font-weight: 700;
}
.infoList dt::before {
  content: "■";
  display: inline-block;
  margin-right: 0.5rem;
}

#quiz .pageSection__wrapper {
  padding: 2rem 0;
  background-color: #ffffff;
}
@media screen and (min-width: 768px) {
  #quiz .pageSection__wrapper {
    padding: 2.5rem 0;
  }
}
#quiz .pageSection__header {
  margin: 0 auto;
  max-width: 90%;
  padding-bottom: 1rem;
}
@media screen and (min-width: 768px) {
  #quiz .pageSection__header {
    max-width: 730px;
  }
}
@media screen and (min-width: 1200px) {
  #quiz .pageSection__header {
    max-width: 1096px;
  }
}
#quiz .pageSection__header h2 {
  margin: 0 auto 0.25em;
  color: #0d0d0d;
  text-align: left;
  font-size: clamp(16px, 1.5em, 24px);
  font-weight: bold;
  border-bottom: 2px solid #61645f;
}
#quiz .pageSection__body {
  color: #0d0d0d;
}

.quizQuestion {
  margin: 0 auto;
  max-width: 90%;
}
@media screen and (min-width: 768px) {
  .quizQuestion {
    max-width: 730px;
  }
}
@media screen and (min-width: 1200px) {
  .quizQuestion {
    max-width: 1096px;
  }
}
@media screen and (min-width: 768px) {
  .quizQuestion a {
    transition: all 0.2s;
    opacity: 1;
  }
  .quizQuestion a:hover {
    opacity: 0.5;
  }
}
@media screen and (min-width: 768px) {
  .quizQuestion a:focus-visible {
    outline: 3px solid #d9504e;
    outline-offset: 5px;
  }
}

#howToApply .pageSection__wrapper {
  padding: 2rem 0;
  background-color: #ffffff;
}
@media screen and (min-width: 768px) {
  #howToApply .pageSection__wrapper {
    padding: 2.5rem 0;
  }
}
#howToApply .pageSection__header {
  margin: 0 auto;
  max-width: 90%;
  padding-bottom: 1rem;
}
@media screen and (min-width: 768px) {
  #howToApply .pageSection__header {
    max-width: 730px;
  }
}
@media screen and (min-width: 1200px) {
  #howToApply .pageSection__header {
    max-width: 1096px;
  }
}
#howToApply .pageSection__header h2 {
  margin: 0 auto 0.25em;
  color: #0d0d0d;
  text-align: left;
  font-size: clamp(16px, 1.5em, 24px);
  font-weight: bold;
  border-bottom: 2px solid #61645f;
}
#howToApply .pageSection__body {
  color: #0d0d0d;
}

.applySteps {
  margin: 0 auto;
  max-width: 90%;
}
@media screen and (min-width: 768px) {
  .applySteps {
    max-width: 730px;
  }
}
@media screen and (min-width: 1200px) {
  .applySteps {
    max-width: 1096px;
  }
}
.applySteps li {
  margin-bottom: 1.5rem;
}
.applySteps li > div {
  font-weight: 700;
}

#howToBeFriend .pageSection__wrapper {
  padding: 2rem 0;
  background-color: #ffffff;
}
@media screen and (min-width: 768px) {
  #howToBeFriend .pageSection__wrapper {
    padding: 2.5rem 0;
  }
}
#howToBeFriend .pageSection__header {
  margin: 0 auto;
  max-width: 90%;
  padding-bottom: 1rem;
}
@media screen and (min-width: 768px) {
  #howToBeFriend .pageSection__header {
    max-width: 730px;
  }
}
@media screen and (min-width: 1200px) {
  #howToBeFriend .pageSection__header {
    max-width: 1096px;
  }
}
#howToBeFriend .pageSection__header h2 {
  margin: 0 auto 0.25em;
  color: #0d0d0d;
  text-align: left;
  font-size: clamp(16px, 1.5em, 24px);
  font-weight: bold;
  border-bottom: 2px solid #61645f;
}
#howToBeFriend .pageSection__body {
  color: #0d0d0d;
}

.addFriend {
  margin: 0 auto;
  max-width: 90%;
}
@media screen and (min-width: 768px) {
  .addFriend {
    max-width: 730px;
  }
}
@media screen and (min-width: 1200px) {
  .addFriend {
    max-width: 1096px;
  }
}
.addFriend dl {
  margin-bottom: 1.5rem;
}
.addFriend dt {
  font-weight: 700;
}
.addFriend dt::before {
  content: "■";
  display: inline-block;
  margin-right: 0.5rem;
}
.addFriend__button {
  margin: 0.5rem;
  padding: 0.75rem 2.5rem;
  border-radius: 30px;
  background-color: #00b900;
  text-align: center;
  text-decoration: none;
  color: #f2fbee;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .addFriend__button {
    transition: all 0.2s;
    opacity: 1;
  }
  .addFriend__button:hover {
    opacity: 0.5;
  }
}
@media screen and (min-width: 768px) {
  .addFriend__button:focus-visible {
    outline: 3px solid #d9504e;
    outline-offset: 5px;
  }
}

#prizeAnnouncement .pageSection__wrapper {
  padding: 2rem 0;
  background-color: #ffffff;
}
@media screen and (min-width: 768px) {
  #prizeAnnouncement .pageSection__wrapper {
    padding: 2.5rem 0;
  }
}
#prizeAnnouncement .pageSection__header {
  margin: 0 auto;
  max-width: 90%;
  padding-bottom: 1rem;
}
@media screen and (min-width: 768px) {
  #prizeAnnouncement .pageSection__header {
    max-width: 730px;
  }
}
@media screen and (min-width: 1200px) {
  #prizeAnnouncement .pageSection__header {
    max-width: 1096px;
  }
}
#prizeAnnouncement .pageSection__header h2 {
  margin: 0 auto 0.25em;
  color: #0d0d0d;
  text-align: left;
  font-size: clamp(16px, 1.5em, 24px);
  font-weight: bold;
  border-bottom: 2px solid #61645f;
}
#prizeAnnouncement .pageSection__body {
  color: #0d0d0d;
}

.descAnnouncement {
  margin: 0 auto;
  max-width: 90%;
}
@media screen and (min-width: 768px) {
  .descAnnouncement {
    max-width: 730px;
  }
}
@media screen and (min-width: 1200px) {
  .descAnnouncement {
    max-width: 1096px;
  }
}
.descAnnouncement p {
  margin-bottom: 1rem;
}

#notices {
  background: url("../../img/bg09.gif") repeat;
}
#notices .pageSection__wrapper {
  padding: 2rem 0;
  background-color: #ffffff;
}
@media screen and (min-width: 768px) {
  #notices .pageSection__wrapper {
    padding: 2.5rem 0;
  }
}
#notices .pageSection__header {
  margin: 0 auto;
  max-width: 90%;
  padding-bottom: 1rem;
}
@media screen and (min-width: 768px) {
  #notices .pageSection__header {
    max-width: 730px;
  }
}
@media screen and (min-width: 1200px) {
  #notices .pageSection__header {
    max-width: 1096px;
  }
}
#notices .pageSection__header h2 {
  margin: 0 auto 0.25em;
  color: #0d0d0d;
  text-align: left;
  font-size: clamp(16px, 1.5em, 24px);
  font-weight: bold;
  border-bottom: 2px solid #61645f;
}
#notices .pageSection__body {
  color: #0d0d0d;
}

.noticesList {
  margin: 0 auto;
  max-width: 90%;
}
@media screen and (min-width: 768px) {
  .noticesList {
    max-width: 730px;
  }
}
@media screen and (min-width: 1200px) {
  .noticesList {
    max-width: 1096px;
  }
}
.noticesList dl {
  margin-bottom: 1.5rem;
}
.noticesList dt {
  font-weight: 700;
}