@charset "UTF-8";
/* =======================================

  CONTENTS

======================================= */
/*-----------------------------------------
  stamp_area
-----------------------------------------*/
.stamp header {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  gap: 4.1cqw;
  padding-block: 2.8cqw 0;
  position: relative;
  background: url("/alumni/home-coming-day/22th-hcd/img/head-img-kv3.png") no-repeat right bottom 10cqw;
  background-color: #492D65;
  background-size: contain;
}
.stamp header::before {
  width: 50cqw;
  aspect-ratio: 195/107;
  content: "";
  background: url("/alumni/home-coming-day/22th-hcd/img/head-img-kv2.png") no-repeat bottom right;
  background-size: contain;
  display: block;
  position: absolute;
  left: -20cqw;
  bottom: 10cqw;
}
.stamp header::after {
  width: 38.46cqw;
  aspect-ratio: 150/86;
  content: "";
  background: url("/alumni/home-coming-day/22th-hcd/img/head-img-kv1.png") no-repeat center center;
  background-size: contain;
  display: block;
  position: absolute;
  left: 2.8cqw;
  top: -4.1cqw;
}
.stamp header .howto_area {
  position: absolute;
  inset: 4cqw 4cqw auto auto;
}
.stamp header .howto_area a {
  font-size: 3.84cqw;
  color: #fff;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column nowrap;
}
.stamp header .howto_area a::before {
  display: block;
  content: "";
  overflow: hidden;
  width: 6.15cqw;
  aspect-ratio: 24/28;
  display: inline-block;
  -webkit-mask-image: url(/alumni/home-coming-day/22th-hcd/img/icon-howtoplay.svg);
          mask-image: url(/alumni/home-coming-day/22th-hcd/img/icon-howtoplay.svg);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  background-color: #fff;
  color: #fff;
}
.stamp header h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column nowrap;
  gap: 2.56cqw;
  width: 65.89cqw;
  position: relative;
}
.stamp header h1 .hcd {
  width: 31.28cqw;
  height: auto;
}
.stamp header h1 .ttl {
  width: 100%;
  height: auto;
}
.stamp header h1::after {
  width: 10cqw;
  aspect-ratio: 41/111;
  content: "";
  background: url("/alumni/home-coming-day/22th-hcd/img/img-woman.svg") no-repeat center center;
  background-size: contain;
  display: block;
  position: absolute;
  right: -12cqw;
  bottom: -12cqw;
}
.stamp header p {
  font-size: 3.84cqw;
  color: #fff;
  font-weight: bold;
  text-align: center;
  z-index: 1;
}
.stamp .tab_btns {
  z-index: 1;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  gap: 0.51cqw;
}
.stamp .tab_btns button {
  display: flex;
  flex-flow: row nowrap;
  gap: 1.28cqw;
  padding: 3.07cqw;
  background: #e9c78b;
  border-radius: 5.12cqw 5.12cqw 0 0;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease-in-out;
}
.stamp .tab_btns button .icon {
  height: 8.97cqw;
  width: auto;
}
.stamp .tab_btns button .ttl {
  height: 5.89cqw;
  width: auto;
  transition: opacity 0.3s ease-in-out;
  opacity: 0.6;
}
.stamp .tab_btns button[aria-selected=true] {
  background: #ffa301;
}
.stamp .tab_btns button[aria-selected=true] .ttl {
  opacity: 1;
}
.stamp .tab_btns.footer button {
  border-radius: 0 0 2rem 2rem;
}
.stamp .tab_panels .stamp_panel {
  display: flex;
  flex-flow: column wrap;
  gap: 2cqw;
  justify-content: center;
  align-items: center;
  padding: 10.25cqw 2.82cqw 5.12cqw;
  width: 100%;
  background: url("/alumni/home-coming-day/22th-hcd/img/bg-stamp.svg") no-repeat top center #f8e9cf;
  background-size: 100% auto;
}
.stamp .tab_panels .stamp_panel ol {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 0 2.5cqw;
  margin-bottom: 1.53cqw;
}
.stamp .tab_panels .stamp_panel ol li {
  width: calc(33.3333333333% - 1.6666666667cqw);
  position: relative;
}
.stamp .tab_panels .stamp_panel ol li::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  z-index: 2;
  position: absolute;
}
.stamp .tab_panels .stamp_panel ol li > a {
  pointer-events: none;
  position: relative;
}
.stamp .tab_panels .stamp_panel ol li figure {
  width: 29.74cqw;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 50%;
  margin-bottom: 1cqw;
}
.stamp .tab_panels .stamp_panel ol li figure img {
  height: 8.2cqw;
  width: auto;
}
.stamp .tab_panels .stamp_panel ol li p {
  color: #000;
  font-size: 3.58cqw;
}
.stamp .tab_panels .stamp_panel ol li span {
  font-size: 3.07cqw;
  color: #de1c2e;
  display: block;
  font-weight: bold;
  text-align: center;
}
.stamp .tab_panels .stamp_panel ol li.checked::before {
  display: none;
}
.stamp .tab_panels .stamp_panel ol li.checked > a {
  pointer-events: auto;
  z-index: 2;
}
.stamp .tab_panels .stamp_panel ol li.checked figure {
  position: relative;
  overflow: hidden;
}
.stamp .tab_panels .stamp_panel ol li.checked figure::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background: url("/alumni/home-coming-day/22th-hcd/img/stamp-check-1.png") no-repeat center center;
  background-size: 100%;
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 10;
}
.stamp .tab_panels .stamp_panel ol li.checked figure img {
  z-index: 1;
  opacity: 0;
}
.stamp .tab_panels .stamp_panel ol li.checked p {
  color: #492D65;
  text-decoration: underline;
}
.stamp .tab_panels .stamp_panel ol li:nth-child(2).checked figure::before {
  background: url("/alumni/home-coming-day/22th-hcd/img/stamp-check-2.png") no-repeat center center;
  background-size: 100%;
}
.stamp .tab_panels .stamp_panel ol li:nth-child(3).checked figure::before {
  background: url("/alumni/home-coming-day/22th-hcd/img/stamp-check-3.png") no-repeat center center;
  background-size: 100%;
}
.stamp .tab_panels .stamp_panel ol li:nth-child(4).checked figure::before {
  background: url("/alumni/home-coming-day/22th-hcd/img/stamp-check-4.png") no-repeat center center;
  background-size: 100%;
}
.stamp .tab_panels .stamp_panel ol li:nth-child(5).checked figure::before {
  background: url("/alumni/home-coming-day/22th-hcd/img/stamp-check-5.png") no-repeat center center;
  background-size: 100%;
}
.stamp .tab_panels .stamp_panel .btn {
  border-radius: 10rem;
  background: #de1c2e;
}
.stamp .tab_panels .stamp_panel .btn .btn_text::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  height: 24.1cqw;
  width: 92.3cqw;
  background: url("/alumni/home-coming-day/22th-hcd/img/btn-ttl-photoframe-comp.svg") no-repeat center center;
  background-size: 100% auto;
  opacity: 1;
}
.stamp .tab_panels .stamp_panel .btn .btn_text img {
  width: 71.28cqw;
  height: auto;
  opacity: 0;
}
.stamp .tab_panels .stamp_panel .btn.disable {
  background: #8f8f8f;
  pointer-events: none;
}
.stamp .tab_panels .stamp_panel .btn.disable .btn_text::before {
  opacity: 0;
}
.stamp .tab_panels .stamp_panel .btn.disable .btn_text img {
  opacity: 1;
}
.stamp .tab_panels .stamp_panel p {
  text-align: center;
  font-size: 3.84cqw;
  font-weight: bold;
}
.stamp .tab_panels .stamp_panel p.attention {
  color: #de1c2e;
  line-height: 1.14;
  font-size: 3.58cqw;
}
.stamp .tab_panels .map_panel {
  display: flex;
  flex-flow: column wrap;
  gap: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  width: 100%;
  background: #f8e9cf;
}
.stamp .tab_panels .map_panel > .map {
  width: 100%;
  height: 136.5cqw;
  background: url("/alumni/home-coming-day/22th-hcd/img/panel-img-map.png") no-repeat center top 10.25cqw;
  background-size: auto 70%;
  position: relative;
}
.stamp .tab_panels .map_panel > .map .label {
  width: 90cqw;
  position: absolute;
  inset: auto 0 2cqw;
  margin: auto;
}
.stamp .tab_panels .map_panel .info {
  font-size: 2.56cqw;
  width: calc(100% - 7.69cqw);
  margin: 0 auto 2cqw;
}

/*-----------------------------------------
  spot_area
-----------------------------------------*/
.spot header {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  position: relative;
  background: url("/alumni/home-coming-day/22th-hcd/img/bg-quiz.svg") no-repeat top center;
  background-color: #492D65;
  background-size: 100%;
  z-index: 2;
}
.spot header h1 {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: baseline;
  width: 100%;
  min-height: 30cqw;
  position: relative;
  padding: 16cqw 5cqw 0;
  color: #fff;
  font-weight: 700;
  text-align: center;
  font-size: 7.69cqw;
  line-height: 1.33;
}
.spot header h1::before {
  content: "";
  width: 55cqw;
  height: 33cqw;
  display: block;
  background: url("/alumni/home-coming-day/22th-hcd/img/img-spotflag.svg") no-repeat center top;
  background-size: 100% auto;
  position: absolute;
  inset: 2cqw auto auto 0;
}
.spot header h1 > span {
  position: relative;
}
.spot header h1 > span > img {
  width: 10.25cqw;
  height: auto;
}
.spot main {
  z-index: 1;
}
.spot .spot_area {
  background: #492D65;
  border-radius: 0 0 7.69cqw 7.69cqw;
  display: flex;
  flex-flow: column nowrap;
  padding-block: 2.56cqw 4.1cqw;
  align-items: center;
  position: relative;
  width: 100%;
  margin-bottom: 5.12cqw;
}
.spot .spot_area figure {
  overflow: hidden;
  border-radius: 5.12cqw;
  width: 92.3cqw;
  margin: auto;
  border: 0.6cqw solid #fff;
}
.spot .cont_inner {
  width: 92.3cqw;
  margin: auto;
  display: flex;
  gap: 7.69cqw;
  flex-flow: column nowrap;
}
.spot .voice_area {
  background: #fce2db;
  border-radius: 5.12cqw;
  padding-block: 0 3.07cqw;
}
.spot .voice_area h2 {
  border-radius: 5.12cqw 5.12cqw 0 0;
  background: url("/alumni/home-coming-day/22th-hcd/img/img-w.svg") no-repeat center center #e96a48;
  background-size: 80% auto;
  text-align: center;
  color: #fff;
  line-height: 1.25;
  font-size: 4.35cqw;
  font-weight: 500;
  padding-block: 2cqw;
  position: relative;
}
.spot .voice_area h2::after {
  content: "";
  background: url("/alumni/home-coming-day/22th-hcd/img/img-fukidaship.svg") no-repeat center center;
  background-size: 100% auto;
  width: 8.2cqw;
  height: 5.64cqw;
  display: block;
  position: absolute;
  inset: auto auto -5.64cqw 26.92cqw;
}
.spot .voice_area .voice_contents {
  padding: 3.58cqw 3.07cqw 2.56cqw;
  display: flex;
  flex-flow: row nowrap;
  gap: 4.1cqw;
}
.spot .voice_area .voice_contents figure {
  width: 26.15cqw;
  aspect-ratio: 1;
}
.spot .voice_area .voice_contents figure img {
  width: 26.15cqw;
  height: auto;
  overflow: hidden;
  border-radius: 50%;
}
.spot .voice_area .voice_contents .text {
  width: calc(100% - 30cqw);
}
.spot .voice_area .voice_contents .text h3 {
  font-size: 4.61cqw;
  line-height: 1.2;
  font-weight: bold;
  margin-bottom: 2cqw;
}
.spot .voice_area .voice_contents .text h3 span {
  font-size: 3.58cqw;
}
.spot .voice_area .voice_contents .text p {
  font-size: 3.33cqw;
  line-height: 1.3;
}
.spot .voice_area .voice_contents .text a {
  text-decoration: underline;
  color: #e96a48;
}
.spot .voice_area .voice_audio {
  padding-inline: 3.58cqw;
}
.spot .voice_area .voice_audio audio {
  width: 100%;
}
.spot .introduction_area {
  display: flex;
  flex-flow: column nowrap;
  gap: 5.12cqw;
}
.spot .introduction_area p {
  font-size: 4.61cqw;
  line-height: 1.55;
}
.spot .introduction_area ol {
  list-style-type: decimal;
  width: 85.8cqw;
  margin: auto 0 auto auto;
}
.spot .introduction_area ol li {
  font-weight: bold;
  margin-bottom: 5.12cqw;
  font-size: 4.61cqw;
  line-height: 1.55;
}
.spot .btn_area.challenge {
  padding-block: 12.05cqw 15cqw;
}
.spot .btn_area.challenge .btn {
  background: #de1c2e;
  width: 92.3cqw;
  height: 30cqw;
  border: 25%;
  position: relative;
}
.spot .btn_area.challenge .btn img {
  position: absolute;
  width: 84.35cqw;
  height: auto;
  inset: -4.61cqw auto auto 2cqw;
}
.spot .btn_area.challenge + .btn_area {
  padding-top: 0;
  margin-top: -7.69cqw;
}
.spot .special_area {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  background: #fff;
  border: 3.84cqw solid #27885D;
  padding-top: 7.69cqw;
  gap: 5.12cqw;
}
.spot .special_area img {
  width: 81cqw;
  height: auto;
  margin: auto;
}
.spot .special_area .btn {
  font-size: 6.15cqw;
  width: 80.51cqw;
  margin-bottom: 2.56cqw;
}
.spot .special_area .viewable {
  background: #27885D;
  color: #fff;
  font-size: 3.58cqw;
  padding: 3.58cqw;
  font-weight: normal;
}
.spot .special_area .viewable ul {
  margin-bottom: 3.58cqw;
  list-style: inside;
}
.spot .special_area .viewable ul li {
  list-style-type: "・";
}
.spot .goods_area {
  background: #fff;
  border-radius: 5.12cqw;
  padding-block: 0 15.38cqw;
}
.spot .goods_area h2 {
  border-radius: 5.12cqw 5.12cqw 0 0;
  background: #492D65;
  text-align: center;
  padding-block: 3.58cqw;
  position: relative;
  height: 30.76cqw;
}
.spot .goods_area h2 img {
  width: 82.05cqw;
  position: absolute;
  inset: -2.56cqw 0 auto;
  margin: auto;
}
.spot .goods_area .contents {
  padding: 5.12cqw 3.84cqw 7.69cqw;
  display: flex;
  flex-flow: column nowrap;
  gap: 7.69cqw;
  align-items: center;
}
.spot .goods_area .contents p {
  font-size: 4.61cqw;
  line-height: 1.56;
}
.spot .goods_area .contents figure {
  display: flex;
  flex-flow: column nowrap;
  gap: 5.12cqw;
}
.spot .goods_area .contents figure img {
  width: 92.3cqw;
}
.spot .goods_area .btn_area {
  padding-block: 0;
}
.spot .goods_area .btn_area .goods {
  background: #492D65;
  width: 82.05cqw;
  padding-block: 2.56cqw;
  text-align: center;
}
.spot .gallery_area {
  background: #faba03;
  padding: 7.69cqw 0 20cqw;
}
.spot .gallery_area h3 {
  text-align: center;
  margin-bottom: 2.56cqw;
}
.spot .gallery_area h3 img {
  width: 84.61cqw;
}
.spot .gallery_area .contents {
  width: 100%;
}
.spot .gallery_area .contents figure img {
  width: 100%;
}
.spot .link_list {
  margin: 10.25cqw auto 0;
  display: flex;
  gap: 2.56cqw;
  flex-flow: column nowrap;
  width: 100%;
}
.spot .link_list li {
  border: 0.25cqw #ddd solid;
}
.spot .link_list li a {
  width: 100%;
  height: 100%;
  display: flex;
  gap: 5.12cqw;
  background: #fff;
  align-items: center;
  color: #000;
  font-size: 4.1cqw;
  position: relative;
}
.spot .link_list li a::after {
  content: "";
  background: url("/alumni/home-coming-day/22th-hcd/img/icon-allow.svg") no-repeat center center;
  background-size: 100% auto;
  width: 2cqw;
  height: 3.84cqw;
  display: block;
  position: absolute;
  inset: 0 3.58cqw 0 auto;
  margin: auto;
  z-index: 1;
}
.spot .link_list li a img {
  width: 20.51cqw;
}

/*-----------------------------------------
  quiz_area
-----------------------------------------*/
.quiz header {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  position: relative;
  background: url("/alumni/home-coming-day/22th-hcd/img/bg-quiz.svg") no-repeat top center;
  background-color: #492D65;
  background-size: 100%;
}
.quiz header h1 {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: baseline;
  width: 100%;
  min-height: 30cqw;
  position: relative;
  padding: 16cqw 5cqw 0;
  color: #fff;
  font-weight: 700;
  text-align: center;
  font-size: 7.69cqw;
  line-height: 1.33;
}
.quiz header h1::before {
  content: "";
  width: 55cqw;
  height: 37cqw;
  display: block;
  background: url("/alumni/home-coming-day/22th-hcd/img/img-spotflag.svg") no-repeat center bottom;
  background-size: 100% auto;
  position: absolute;
  inset: 2cqw auto auto 0;
}
.quiz header h1 > span {
  position: relative;
}
.quiz header h1 > span > img {
  width: 10.25cqw;
  height: auto;
}
.quiz .question_area {
  background: #492D65;
  border-radius: 0 0 7.69cqw 7.69cqw;
  display: flex;
  flex-flow: column nowrap;
  padding-block: 10.25cqw 4.61cqw;
  align-items: center;
  position: relative;
  width: 100%;
}
.quiz .question_area > img {
  position: absolute;
  inset: 3.84cqw 0 auto;
  width: 28cqw;
  height: auto;
  margin: auto;
}
.quiz .question_area h2 {
  background: #fff;
  border-radius: 5.12cqw;
  width: 92.3cqw;
  font-size: 6.15cqw;
  font-weight: 700;
  padding: 8.15cqw 10.25cqw 6.15cqw;
  text-align: center;
  color: #492D65;
  white-space: pre-line;
}
.quiz .cont_inner {
  width: 92.3cqw;
  margin: auto;
  display: flex;
  gap: 5.12cqw;
  flex-flow: column nowrap;
  padding-top: 5.12cqw;
}
.quiz .quiz_options {
  counter-reset: number;
  display: flex;
  flex-flow: column nowrap;
  gap: 2.56cqw;
  margin-bottom: 5.12cqw;
}
.quiz .quiz_options li {
  border-radius: 7.69cqw;
  padding: 1.02cqw;
  display: flex;
  flex-flow: row nowrap;
  gap: 2.56cqw;
  padding-left: 4.61cqw;
  align-items: center;
  background: #e34767;
}
.quiz .quiz_options li:nth-child(2) {
  background: #2553a2;
}
.quiz .quiz_options li:nth-child(2) label {
  color: #2553a2;
}
.quiz .quiz_options li:nth-child(3) {
  background: #25a25f;
}
.quiz .quiz_options li:nth-child(3) label {
  color: #25a25f;
}
.quiz .quiz_options li:nth-child(4) {
  background: #733a9a;
}
.quiz .quiz_options li:nth-child(4) label {
  color: #733a9a;
}
.quiz .quiz_options li::before {
  counter-increment: number;
  content: counter(number, upper-alpha);
  color: #fff;
  font-weight: 700;
  font-size: 6.15cqw;
}
.quiz .quiz_options li label {
  background: #fff;
  color: #e34767;
  border-radius: 0 7cqw 7cqw 0;
  display: flex;
  flex-grow: 1;
  align-items: center;
  font-weight: 600;
  font-size: 6.15cqw;
  line-height: 1.25;
  white-space: pre-line;
  text-align: center;
  justify-content: center;
  padding: 2.56cqw;
  transition: color 0.1s ease-in, background-color 0.1s ease;
}
.quiz .quiz_options li input[type=radio] {
  display: none;
}
.quiz .quiz_options li label:has(input:checked) {
  background: transparent;
  color: #fff;
}
.quiz .quiz_form .btn {
  margin: auto;
  display: block;
  font-size: 6.66cqw;
  background-color: #FFA301;
  width: 84.61cqw;
}
.quiz .btn_area {
  padding-top: 10.25cqw;
}

/*-----------------------------------------
  modal
-----------------------------------------*/
.no-scroll {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

[hidden] {
  display: none !important;
  opacity: 0;
  pointer-events: none;
}

.modal {
  transition: opacity 0.3s ease;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  z-index: 999;
  border: none;
  display: flex;
  opacity: 1;
  pointer-events: auto;
}
.modal .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(73, 45, 101, 0.75);
  z-index: 1;
}
.modal .close_btn {
  background: #fff;
  border: 1px solid #000;
  cursor: pointer;
  color: #000;
  position: absolute;
  right: -2.56cqw;
  top: -2.56cqw;
  width: 10cqw;
  aspect-ratio: 1;
  border-radius: 50%;
}
.modal .close_btn::before {
  content: "";
  width: 3.07cqw;
  height: 3.07cqw;
  display: block;
  background: url("/alumni/home-coming-day/22th-hcd/img/icon-close.svg") no-repeat center center;
  background-size: 100% 100%;
  position: absolute;
  inset: 0;
  margin: auto;
}
.modal .modal_inner {
  position: relative;
  width: 100%;
  max-width: 780px;
  height: 100%;
  display: flex;
  z-index: 2;
  padding-block: 2.56cqw;
  container-type: inline-size;
  pointer-events: none;
}
.modal .modal_inner .body {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  max-width: 720px;
  width: 87.17cqw;
  margin: auto;
  padding: 0;
  border-radius: 7.69cqw;
  position: relative;
  pointer-events: all;
}
.modal .modal_inner .body .body_inner {
  height: auto;
  max-height: 98svh;
  overflow: auto;
  width: 100%;
  padding: 10cqw 1%;
}
.modal .modal_inner .body .answer_ttl {
  text-align: center;
  margin: auto;
  width: 100%;
  max-width: 64.1cqw;
  padding: 0 0 4.1cqw;
}
.modal .modal_inner .body .answer_ttl img {
  width: 100%;
}
.modal .modal_inner .body .answer_contents {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: 0;
}
.modal .modal_inner .body .answer_contents > p {
  font-size: 6.15cqw;
  line-height: 1.45;
  font-weight: 900;
  text-align: center;
  color: #492D65;
  max-width: 70cqw;
}
.modal .modal_inner .body .answer_contents figure {
  width: 56.41cqw;
  aspect-ratio: 1;
  background: url("/alumni/home-coming-day/22th-hcd/img/bg-answer-incorrect.svg") no-repeat center center;
  background-size: 100% auto;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  position: relative;
}
.modal .modal_inner .body .answer_contents figure::before {
  content: "";
  width: 41cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 1;
}
.modal .modal_inner .body .answer_contents figure img {
  border-radius: 50%;
  z-index: 2;
  width: 38.97cqw;
}
.modal .modal_inner .body .answer_contents .btn_list {
  display: flex;
  flex-flow: column nowrap;
  gap: 5.12cqw;
  align-items: stretch;
}
.modal .modal_inner .body .celebration_ttl {
  text-align: center;
  margin: auto;
  width: 100%;
  max-width: 80.76cqw;
  padding: 0;
}
.modal .modal_inner .body .celebration_ttl img {
  width: 100%;
}
.modal .modal_inner .body .celebration_contents {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: 0;
}
.modal .modal_inner .body .celebration_contents .stamp_box {
  position: relative;
  width: 100%;
  padding: 7.69cqw 0 5.12cqw;
}
.modal .modal_inner .body .celebration_contents .stamp_box figure {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  position: relative;
}
.modal .modal_inner .body .celebration_contents .stamp_box figure img {
  width: 60.25cqw;
}
.modal .modal_inner .body .celebration_contents > p {
  font-size: 4.1cqw;
  line-height: 1.5;
  font-weight: bold;
  text-align: center;
  color: #000;
  max-width: 70cqw;
  margin-bottom: 7cqw;
}
.modal .modal_inner .body .celebration_contents .btn_list {
  display: flex;
  flex-flow: column nowrap;
  gap: 5.12cqw;
  align-items: stretch;
}
.modal .modal_inner.incorrect .body {
  background: #e3e3f5;
}
.modal .modal_inner.correct .body {
  background: #ffb533;
}
.modal .modal_inner.correct .body .answer_contents .stamp_box {
  position: relative;
}
.modal .modal_inner.correct .body .answer_contents .stamp_box figure {
  width: 71.79cqw;
  background: none;
}
.modal .modal_inner.correct .body .answer_contents .stamp_box figure::before {
  width: 51.28cqw;
  z-index: 1;
}
.modal .modal_inner.correct .body .answer_contents .stamp_box figure div {
  z-index: 2;
}
.modal .modal_inner.correct .body .answer_contents .stamp_box figure img {
  width: 48.71cqw;
  transform-origin: center center;
}
.modal .modal_inner.celebration .body {
  background: #ffb533;
}
.modal .modal_inner.celebration .body .celebration_contents .stamp_box figure img {
  transform-origin: center center;
}

:root {
  --ease-elastic-out: linear(0, 0.2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, 0.941 24.01%, 0.8912 25.91%, 0.8694 27.84%, 0.8698 29.21%, 0.8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, 0.9961 53.26%, 0.9839 57.54%, 0.9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, 0.9981 86.66%, 1);
  --ease-bounce-out: linear(0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1, 0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1, 0.988, 0.984, 0.988, 1);
}

.celebration_ttl,
.answer_ttl {
  transform: translate(0, 0) rotate(0deg) scaleX(1);
  transform-origin: center 100%;
}

.incorrect .answer_ttl {
  animation: move-t-down 1s var(--ease-bounce-out) forwards;
}
.incorrect .btn_list {
  opacity: 0;
  animation: fadein 0.25s 0.25s ease-in-out forwards;
}

.correct .answer_ttl {
  opacity: 0;
  animation: move-t-up 1.5s var(--ease-bounce-out) forwards, fadein 0.5s 0.25s var(--ease-elastic-out) forwards;
}
.correct .btn_list {
  opacity: 0;
  animation: fadein 0.25s 0.25s ease-in-out forwards;
}

.celebration .celebration_ttl {
  opacity: 0;
  animation: move-t-up 1.5s var(--ease-bounce-out) forwards, fadein 0.5s 0.25s var(--ease-elastic-out) forwards;
}
.celebration p,
.celebration .btn_list {
  opacity: 0;
  animation: fadein 0.5s 0.75s ease-in-out forwards;
}

.stamp_box figure {
  transition: all 0.3s linear;
  transform: translate(0, 0) rotate(0deg) scaleX(1);
}
.stamp_box figure .inner {
  opacity: 0;
  transform: scale(1, 1);
  transform-origin: top 100%;
  animation: scaleXY 2s 0.25s var(--ease-elastic-out) forwards, fadein 0.5s 0.25s var(--ease-elastic-out) forwards;
}

.sparkle-1 {
  position: absolute;
  opacity: 0;
  width: 10cqw;
  height: 13cqw;
  bottom: 5.12cqw;
  left: 4.1cqw;
  background: url("/alumni/home-coming-day/22th-hcd/img/img-kira-bb.svg") no-repeat center center;
  background-size: 100% auto;
  transform-origin: top right;
  animation: sparkleAnim_A 1.5s var(--ease-elastic-out) infinite forwards;
  animation-delay: 1s;
}

.sparkle-2 {
  position: absolute;
  opacity: 0;
  width: 7cqw;
  height: 7cqw;
  bottom: 5.12cqw;
  right: 7.69cqw;
  background: url("/alumni/home-coming-day/22th-hcd/img/img-kira-s.svg") no-repeat center center;
  background-size: 100% auto;
  transform-origin: top left;
  animation: sparkleAnim_A 1.5s var(--ease-elastic-out) infinite forwards;
  animation-delay: 1.25s;
}

.sparkle-3 {
  position: absolute;
  opacity: 0;
  width: 6cqw;
  height: 6cqw;
  top: 7.69cqw;
  left: 5.12cqw;
  background: url("/alumni/home-coming-day/22th-hcd/img/img-kira-ss.svg") no-repeat center center;
  background-size: 100% auto;
  transform-origin: bottom right;
  animation: sparkleAnim_A 1.5s var(--ease-elastic-out) infinite forwards;
  animation-delay: 1.5s;
}

.sparkle-4 {
  position: absolute;
  opacity: 0;
  width: 10cqw;
  height: 13cqw;
  top: 7.69cqw;
  right: 3.58cqw;
  background: url("/alumni/home-coming-day/22th-hcd/img/img-kira-b.svg") no-repeat center center;
  background-size: 100% auto;
  animation: sparkleAnim_A 1.5s var(--ease-elastic-out) infinite forwards;
  transform-origin: bottom left;
  animation-delay: 1.75s;
}

/* キラキラアニメーション */
@keyframes sparkleAnim_A {
  0% {
    transform: translate(0%, 0%) scale(0.4);
    opacity: 0;
  }
  40% {
    transform: translate(0%, -30%) scale(1.2);
    opacity: 1;
  }
  70% {
    transform: translate(0%, 3%) scale(1.2);
    opacity: 0;
  }
  80% {
    transform: translate(0%, 0%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes move-t-down {
  0% {
    transform: translate(0, -15cqw);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes move-t-up {
  0% {
    transform: translate(0, 15cqw);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes scaleXY {
  0% {
    transform: scale(0.3, 0.3);
  }
  100% {
    transform: scale(1, 1);
  }
}/*# sourceMappingURL=contents.css.map */