@charset "UTF-8";
/*=============================================================
 tools
=============================================================*/
@import url("https://fonts.googleapis.com/css2?family=Murecho:wght@400..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap");
@keyframes spin-right {
  0% {
    transform: rotate(0deg); /* 初期位置 */
  }
  100% {
    transform: rotate(360deg); /* 360度回転 */
  }
}
@keyframes floatX {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(vw(-20));
    @media only screen and (min-width: 768px) {
      transform: translateX(-20px);
    }
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes floatX2 {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(vw(-20));
    @media only screen and (min-width: 768px) {
      transform: translateX(-20px);
    }
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes poyon {
  0%, 50%, 100% {
    transform: scale(1, 1);
  }
  10% {
    transform: scale(1.1, 0.9);
  }
  20% {
    transform: scale(0.9, 1.1);
  }
  30% {
    transform: scale(1.05, 0.95);
  }
  40% {
    transform: scale(1, 1);
  }
}
@keyframes yurayura {
  0%, 100% {
    transform: rotate(0deg) skewX(0deg);
  }
  50% {
    transform: rotate(-2deg) skewX(2deg);
  }
}
@keyframes yurayura2 {
  0%, 100% {
    transform: rotate(0deg) skewX(0deg);
  }
  50% {
    transform: rotate(2deg) skewX(-2deg);
  }
}
@keyframes story {
  0% {
    transform: translateY(0);
  }
  5% {
    transform: translateY(10px);
  }
  10% {
    transform: translateY(0);
  }
  15% {
    transform: translateY(10px);
  }
  20% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
section .sec__box {
  padding-top: 14.84375vw;
  padding-bottom: 9.375vw;
}
@media only screen and (min-width: 768px) {
  section .sec__box {
    padding-top: 95px;
    padding-bottom: 60px;
  }
}

#problem .problem__answer {
  padding: 6.25vw 3.125vw 8.59375vw;
  border-radius: 4.6875vw;
  background-color: #fff;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  #problem .problem__answer {
    padding: 40px 20px 55px;
    border-radius: 30px;
  }
}
#problem .problem__answer__title {
  font-size: 5vw;
  line-height: 1;
  margin-bottom: 6.25vw;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  #problem .problem__answer__title {
    font-size: 32px;
    margin-bottom: 40px;
  }
}
#problem .problem__answer__title span {
  font-size: 6.25vw;
  font-weight: 800;
}
@media only screen and (min-width: 768px) {
  #problem .problem__answer__title span {
    font-size: 40px;
  }
}
#problem .problem__answer__text {
  position: relative;
  display: inline-block;
  font-size: 4.0625vw;
  font-weight: 600;
  margin-bottom: 3.125vw;
  z-index: 0;
}
@media only screen and (min-width: 768px) {
  #problem .problem__answer__text {
    font-size: 26px;
    margin-bottom: 20px;
  }
}
#problem .problem__answer__text::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -5%;
  display: block;
  width: 110%;
  height: 2.34375vw;
  background-color: #FFFF57;
  z-index: -1;
}
@media only screen and (min-width: 768px) {
  #problem .problem__answer__text::before {
    height: 15px;
  }
}
#problem .problem__answer__form__answer {
  width: 75vw;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  #problem .problem__answer__form__answer {
    width: 480px;
    margin: 0 auto;
  }
}
#problem .problem__answer__form__answer input {
  width: 100%;
  font-size: 5.9375vw;
  font-weight: bold;
  line-height: 1.8;
  padding: 0 1.5625vw;
  outline: none;
  border: 0.3125vw solid #19295D;
  border-radius: 1.5625vw;
}
@media only screen and (min-width: 768px) {
  #problem .problem__answer__form__answer input {
    font-size: 38px;
    padding: 0 10px;
    border: 2px solid #19295D;
    border-radius: 10px;
  }
}
#problem .problem__answer__form__send {
  position: relative;
  width: 55.9375vw;
  height: 10.9375vw;
  margin: 7.5vw auto 0;
}
@media only screen and (min-width: 768px) {
  #problem .problem__answer__form__send {
    width: 358px;
    height: 70px;
    margin-top: 48px;
  }
}
#problem .problem__answer__form__send::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10.9375vw;
  background-color: #000;
}
@media only screen and (min-width: 768px) {
  #problem .problem__answer__form__send::before {
    border-radius: 70px;
  }
}
#problem .problem__answer__form__send input {
  position: relative;
  top: -0.9375vw;
  width: 100%;
  height: 100%;
  border: 0;
  font-size: 0;
  display: block;
  background: url("../img/solving/btn_answer.png") no-repeat top center;
  background-size: contain;
  transition: all 0.3s ease;
}
@media only screen and (min-width: 768px) {
  #problem .problem__answer__form__send input {
    top: -6px;
  }
}
#problem .problem__answer__form__send:hover input {
  top: 0;
}
#problem .problem__answer__incorrect {
  margin-top: 1.5625vw;
  color: #DC3F2F;
  font-weight: bold;
}
@media only screen and (min-width: 768px) {
  #problem .problem__answer__incorrect {
    margin-top: 10px;
  }
}

#clear {
  margin-bottom: 18.75vw;
}
@media only screen and (min-width: 768px) {
  #clear {
    margin-bottom: 120px;
  }
}
#clear .sec__box {
  padding-left: 5.78125vw;
  padding-right: 5.78125vw;
}
@media only screen and (min-width: 768px) {
  #clear .sec__box {
    padding-left: 37px;
    padding-right: 37px;
  }
}
#clear .clear__box__shine {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
#clear .clear__box__shine__image {
  width: 153.75vw;
  position: absolute;
  top: -28.125vw;
  left: 50%;
  transform: translateX(-50%);
}
@media only screen and (min-width: 768px) {
  #clear .clear__box__shine__image {
    top: -180px;
    width: 984px;
  }
}
#clear .clear__box__shine__image img {
  animation: spin-right 90s ease infinite;
}
#clear .clear__box__confetti {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#clear .clear__box__confetti canvas {
  width: 100%;
  height: 100%;
}
#clear .clear__box__title {
  font-size: 5vw;
  line-height: 1;
  margin-bottom: 2.34375vw;
  text-align: center;
  background-color: #fff;
  padding: 4.6875vw 0;
  border-radius: 4.6875vw;
}
@media only screen and (min-width: 768px) {
  #clear .clear__box__title {
    font-size: 32px;
    margin-bottom: 15px;
    padding: 30px 0;
    border-radius: 30px;
  }
}
#clear .clear__box__title span {
  font-size: 6.25vw;
  font-weight: 800;
}
@media only screen and (min-width: 768px) {
  #clear .clear__box__title span {
    font-size: 40px;
  }
}
#clear .clear__box__text1 {
  margin-bottom: -0.78125vw;
}
@media only screen and (min-width: 768px) {
  #clear .clear__box__text1 {
    margin-bottom: -5px;
  }
}
#clear .clear__box__text2 {
  width: 93.75vw;
  margin: 0 auto 0.78125vw;
}
@media only screen and (min-width: 768px) {
  #clear .clear__box__text2 {
    width: 600px;
    margin-bottom: 5px;
  }
}
#clear .clear__box__hint {
  position: relative;
  border-radius: 4.6875vw;
  overflow: hidden;
  margin-bottom: 4.6875vw;
  box-shadow: 0 0 3.125vw rgba(190, 35, 18, 0.2);
  background-color: #ddd;
}
@media only screen and (min-width: 768px) {
  #clear .clear__box__hint {
    border-radius: 30px;
    box-shadow: 0 0 20px rgba(190, 35, 18, 0.2);
    margin-bottom: 30px;
  }
}
#clear .clear__box__hint__text {
  position: absolute;
  width: 30.9375vw;
  height: 45.9375vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14.6875vw;
  font-weight: 800;
  background-color: #fff;
  border-radius: 4.6875vw;
}
@media only screen and (min-width: 768px) {
  #clear .clear__box__hint__text {
    width: 198px;
    height: 294px;
    border-radius: 30px;
    font-size: 94px;
  }
}
#clear .clear__box__hint.area1 {
  background-color: #5D6DC2;
}
#clear .clear__box__hint.area1 .clear__box__hint__text {
  color: #5D6DC2;
}
#clear .clear__box__hint.area2 {
  background-color: #199BE1;
}
#clear .clear__box__hint.area2 .clear__box__hint__text {
  color: #199BE1;
}
#clear .clear__box__hint.area3 {
  background-color: #0EAE4A;
}
#clear .clear__box__hint.area3 .clear__box__hint__text {
  color: #0EAE4A;
}
#clear .clear__box__hint.area4 {
  background-color: #66B32F;
}
#clear .clear__box__hint.area4 .clear__box__hint__text {
  color: #66B32F;
}
#clear .clear__box__hint.area5 {
  background-color: #D87C1E;
}
#clear .clear__box__hint.area5 .clear__box__hint__text {
  color: #D87C1E;
}
#clear .clear__box__hint.area6 {
  background-color: #DB4040;
}
#clear .clear__box__hint.area6 .clear__box__hint__text {
  color: #DB4040;
}
#clear .clear__box__hint.area7 {
  background-color: #D19728;
}
#clear .clear__box__hint.area7 .clear__box__hint__text {
  color: #D19728;
}
#clear .clear__box__hint.area8 {
  background-color: #E4559B;
}
#clear .clear__box__hint.area8 .clear__box__hint__text {
  color: #E4559B;
}

#certificate .certificate__create {
  padding: 4.6875vw;
  background-color: #fff;
  border-radius: 4.6875vw;
  margin-bottom: 7.03125vw;
}
@media only screen and (min-width: 768px) {
  #certificate .certificate__create {
    padding: 30px;
    border-radius: 30px;
    margin-bottom: 45px;
  }
}
#certificate .certificate__create__text {
  font-size: 3.75vw;
  font-weight: bold;
  text-align: center;
  margin-bottom: 3.125vw;
}
@media only screen and (min-width: 768px) {
  #certificate .certificate__create__text {
    font-size: 24px;
    margin-bottom: 20px;
  }
}
#certificate .certificate__create__text span.line {
  background: linear-gradient(transparent 50%, #FFFF51 50%);
}
#certificate .certificate__create__text span.fs-small {
  font-size: 2.5vw;
  display: block;
  margin-top: 0.3em;
}
@media only screen and (min-width: 768px) {
  #certificate .certificate__create__text span.fs-small {
    font-size: 16px;
  }
}
#certificate .certificate__create__name {
  width: 100%;
  line-height: 2;
  font-size: 4.6875vw;
  padding: 0.78125vw 1.5625vw;
  box-sizing: border-box;
  border-radius: 0.78125vw;
  border: 1px solid #000;
  outline: none;
  margin-bottom: 4.6875vw;
}
@media only screen and (min-width: 768px) {
  #certificate .certificate__create__name {
    font-size: 30px;
    padding: 5px 10px;
    border-radius: 5px;
    margin-bottom: 30px;
  }
}
#certificate .certificate__create__upload {
  position: relative;
  display: block;
  width: 63.125vw;
  height: 10.9375vw;
  margin: 0 auto 3.125vw;
}
@media only screen and (min-width: 768px) {
  #certificate .certificate__create__upload {
    width: 404px;
    height: 70px;
    margin: 0 auto 20px;
  }
}
#certificate .certificate__create__upload::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #19295D;
  border-radius: 12.5vw;
}
@media only screen and (min-width: 768px) {
  #certificate .certificate__create__upload::before {
    border-radius: 80px;
  }
}
#certificate .certificate__create__upload span {
  position: relative;
  top: -0.9375vw;
  display: block;
  width: 100%;
  height: 100%;
  background: url("../img/solving/btn_upload.png") no-repeat top center;
  background-size: contain;
}
@media only screen and (min-width: 768px) {
  #certificate .certificate__create__upload span {
    top: -6px;
    transition: all 0.3s ease;
  }
}
@media only screen and (min-width: 768px) {
  #certificate .certificate__create__upload span:hover {
    top: 0;
  }
}
#certificate .certificate__create__note {
  font-size: 2.34375vw;
  font-weight: bold;
  text-align: center;
  margin-top: 3.125vw;
}
@media only screen and (min-width: 768px) {
  #certificate .certificate__create__note {
    font-size: 15px;
    margin-top: 20px;
  }
}
#certificate .certificate__create__btn {
  position: relative;
  display: block;
  width: 81.25vw;
  height: 14.0625vw;
  margin: 0 auto;
  border: none;
  background-color: unset;
  font-size: 0;
  margin-top: 6.25vw;
}
@media only screen and (min-width: 768px) {
  #certificate .certificate__create__btn {
    width: 520px;
    height: 90px;
    margin-top: 40px;
  }
}
#certificate .certificate__create__btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0.5%;
  width: 99%;
  height: 100%;
  background-color: #19295D;
  border-radius: 12.5vw;
}
@media only screen and (min-width: 768px) {
  #certificate .certificate__create__btn::before {
    border-radius: 80px;
  }
}
#certificate .certificate__create__btn span {
  position: relative;
  top: -0.9375vw;
  display: block;
  width: 100%;
  height: 100%;
  background: url("../img/solving/btn_create.png") no-repeat top center;
  background-size: contain;
}
@media only screen and (min-width: 768px) {
  #certificate .certificate__create__btn span {
    top: -6px;
    transition: all 0.3s ease;
  }
}
@media only screen and (min-width: 768px) {
  #certificate .certificate__create__btn span:hover {
    top: 0;
  }
}
#certificate .certificate__create__btnList {
  margin-top: 4.6875vw;
}
@media only screen and (min-width: 768px) {
  #certificate .certificate__create__btnList {
    margin-top: 30px;
  }
}
#certificate .certificate__explanation {
  padding: 1px 4.6875vw 4.6875vw;
  background-color: #fff;
  border-radius: 4.6875vw;
}
@media only screen and (min-width: 768px) {
  #certificate .certificate__explanation {
    padding: 1px 30px 30px;
    border-radius: 30px;
  }
}
#certificate .certificate__explanation__title {
  width: 61.40625vw;
  margin: -2.34375vw auto 3.125vw;
}
@media only screen and (min-width: 768px) {
  #certificate .certificate__explanation__title {
    width: 393px;
    margin: -15px auto 20px;
  }
}
#certificate .certificate__explanation__box:not(:last-of-type) {
  margin-bottom: 3.125vw;
}
@media only screen and (min-width: 768px) {
  #certificate .certificate__explanation__box:not(:last-of-type) {
    margin-bottom: 20px;
  }
}
#certificate .certificate__explanation__box__ttl {
  font-size: 3.4375vw;
  line-height: 1.3;
  margin-bottom: 3.125vw;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  #certificate .certificate__explanation__box__ttl {
    font-size: 22px;
    margin-bottom: 20px;
  }
}
#certificate .certificate__explanation__box__ttl span {
  display: inline-block;
  background: linear-gradient(transparent 50%, #FFFF51 50%);
}
#certificate .certificate__explanation__detail dt {
  font-size: 2.8125vw;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 0.78125vw;
}
@media only screen and (min-width: 768px) {
  #certificate .certificate__explanation__detail dt {
    font-size: 18px;
    margin-bottom: 5px;
  }
}
#certificate .certificate__explanation__detail dd {
  font-size: 2.5vw;
  line-height: 1.5;
  margin-bottom: 3.125vw;
}
@media only screen and (min-width: 768px) {
  #certificate .certificate__explanation__detail dd {
    font-size: 16px;
    margin-bottom: 20px;
  }
}
#certificate .certificate__explanation__note__ttl {
  font-size: 3.125vw;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 0.78125vw;
}
@media only screen and (min-width: 768px) {
  #certificate .certificate__explanation__note__ttl {
    font-size: 20px;
    margin-bottom: 5px;
  }
}
#certificate .certificate__explanation__note__text {
  font-size: 2.5vw;
  line-height: 1.5;
  padding-left: 1em;
  text-indent: -1em;
}
@media only screen and (min-width: 768px) {
  #certificate .certificate__explanation__note__text {
    font-size: 16px;
  }
}

#result .result__text {
  font-size: 5vw;
  color: #FFFF57;
  font-weight: 900;
  text-align: center;
  margin-bottom: 3.125vw;
}
@media only screen and (min-width: 768px) {
  #result .result__text {
    font-size: 32px;
    margin-bottom: 20px;
  }
}
#result .result__box__shine {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
#result .result__box__shine__image {
  width: 125vw;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media only screen and (min-width: 768px) {
  #result .result__box__shine__image {
    width: 800px;
  }
}
#result .result__box__shine__image img {
  animation: spin-right 90s ease infinite;
}
#result .result__box__confetti {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#result .result__box__confetti canvas {
  width: 100%;
  height: 100%;
}
#result .result__box__title {
  font-size: 5vw;
  line-height: 1;
  margin-bottom: 2.34375vw;
  text-align: center;
  background-color: #fff;
  padding: 4.6875vw 0;
  border-radius: 4.6875vw;
}
@media only screen and (min-width: 768px) {
  #result .result__box__title {
    font-size: 32px;
    margin-bottom: 15px;
    padding: 30px 0;
    border-radius: 30px;
  }
}
#result .result__box__title span {
  font-size: 6.25vw;
  font-weight: 800;
}
@media only screen and (min-width: 768px) {
  #result .result__box__title span {
    font-size: 40px;
  }
}
#result .result__card {
  margin-bottom: 5.46875vw;
}
@media only screen and (min-width: 768px) {
  #result .result__card {
    margin-bottom: 35px;
  }
}
#result .result__card__explanation {
  padding: 1px 4.6875vw 3.125vw;
  background-color: #fff;
  border-radius: 4.6875vw;
  margin-bottom: 7.03125vw;
}
@media only screen and (min-width: 768px) {
  #result .result__card__explanation {
    padding: 1px 30px 20px;
    border-radius: 30px;
    margin-bottom: 45px;
  }
}
#result .result__card__explanation__title {
  width: 61.40625vw;
  margin: -2.34375vw auto 2.34375vw;
}
@media only screen and (min-width: 768px) {
  #result .result__card__explanation__title {
    width: 393px;
    margin: -15px auto 15px;
  }
}
#result .result__card__explanation__box:not(:last-of-type) {
  margin-bottom: 7.8125vw;
}
@media only screen and (min-width: 768px) {
  #result .result__card__explanation__box:not(:last-of-type) {
    margin-bottom: 50px;
  }
}
#result .result__card__explanation__box__ttl {
  display: inline-block;
  font-size: 3.4375vw;
  line-height: 1.3;
  background: linear-gradient(transparent 50%, #FFFF51 50%);
  margin-bottom: 3.125vw;
}
@media only screen and (min-width: 768px) {
  #result .result__card__explanation__box__ttl {
    font-size: 22px;
    margin-bottom: 20px;
  }
}
#result .result__card__explanation__detail dt {
  font-size: 2.8125vw;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 0.78125vw;
}
@media only screen and (min-width: 768px) {
  #result .result__card__explanation__detail dt {
    font-size: 18px;
    margin-bottom: 5px;
  }
}
#result .result__card__explanation__detail dd {
  font-size: 2.5vw;
  line-height: 1.5;
  margin-bottom: 3.125vw;
}
@media only screen and (min-width: 768px) {
  #result .result__card__explanation__detail dd {
    font-size: 16px;
    margin-bottom: 20px;
  }
}
#result .result__share {
  position: relative;
  width: 63.125vw;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  #result .result__share {
    width: 404px;
  }
}
#result .result__share::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  border-radius: 12.5vw;
}
@media only screen and (min-width: 768px) {
  #result .result__share::before {
    border-radius: 80px;
  }
}
#result .result__share img {
  position: relative;
  top: -0.78125vw;
}
@media only screen and (min-width: 768px) {
  #result .result__share img {
    top: -5px;
    transition: all 0.3s ease;
  }
}
@media only screen and (min-width: 768px) {
  #result .result__share img:hover {
    top: 0;
  }
}
#result .result__share__note {
  font-size: 2.5vw;
  font-weight: 500;
  text-align: center;
  margin: 4.6875vw 0 7.8125vw;
}
@media only screen and (min-width: 768px) {
  #result .result__share__note {
    font-size: 16px;
    margin: 30px 0 50px;
  }
}
#result .result__anew {
  position: relative;
  width: 63.125vw;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  #result .result__anew {
    width: 404px;
  }
}
#result .result__anew::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  border-radius: 12.5vw;
}
@media only screen and (min-width: 768px) {
  #result .result__anew::before {
    border-radius: 80px;
  }
}
#result .result__anew img {
  position: relative;
  top: -0.78125vw;
}
@media only screen and (min-width: 768px) {
  #result .result__anew img {
    top: -5px;
    transition: all 0.3s ease;
  }
}
@media only screen and (min-width: 768px) {
  #result .result__anew img:hover {
    top: 0;
  }
}

#issued .sec__box {
  padding-bottom: 0.78125vw;
}
@media only screen and (min-width: 768px) {
  #issued .sec__box {
    padding-bottom: 5px;
  }
}
#issued .issued__empty {
  font-size: 3.4375vw;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  margin-bottom: 4.6875vw;
  background-color: #fff;
  padding: 4.6875vw;
  width: 100%;
  border-radius: 4.6875vw;
  box-sizing: border-box;
}
@media only screen and (min-width: 768px) {
  #issued .issued__empty {
    font-size: 32px;
    margin-bottom: 20px;
    padding: 30px;
    border-radius: 30px;
  }
}
#issued .issued__text {
  font-size: 5vw;
  color: #FFFF57;
  line-height: 1.2;
  font-weight: 900;
  text-align: center;
  margin-bottom: 4.6875vw;
}
@media only screen and (min-width: 768px) {
  #issued .issued__text {
    font-size: 32px;
    margin-bottom: 30px;
  }
}
#issued .issued__list__item {
  margin-bottom: 6.25vw;
}
@media only screen and (min-width: 768px) {
  #issued .issued__list__item {
    margin-bottom: 40px;
  }
}
#issued .issued__list__item__image {
  margin-bottom: 3.90625vw;
}
@media only screen and (min-width: 768px) {
  #issued .issued__list__item__image {
    margin-bottom: 25px;
  }
}
#issued .issued__box {
  margin-bottom: 7.8125vw;
}
@media only screen and (min-width: 768px) {
  #issued .issued__box {
    margin-bottom: 50px;
  }
}
#issued .issued__box__area {
  margin-bottom: 9.375vw;
}
@media only screen and (min-width: 768px) {
  #issued .issued__box__area {
    margin-bottom: 60px;
  }
}
#issued .issued__box__title {
  font-size: 4.53125vw;
  line-height: 1;
  margin-bottom: 3.125vw;
  text-align: center;
  background-color: #fff;
  padding: 4.6875vw 0;
  border-radius: 4.6875vw;
}
@media only screen and (min-width: 768px) {
  #issued .issued__box__title {
    font-size: 29px;
    margin-bottom: 20px;
    padding: 30px 0;
    border-radius: 30px;
  }
}
#issued .issued__box__title span {
  font-size: 5.78125vw;
  font-weight: 800;
}
@media only screen and (min-width: 768px) {
  #issued .issued__box__title span {
    font-size: 37px;
  }
}
#issued .issued__card {
  margin-bottom: 5.46875vw;
}
@media only screen and (min-width: 768px) {
  #issued .issued__card {
    margin-bottom: 35px;
  }
}
#issued .issued__card__explanation {
  padding: 1px 4.6875vw 3.125vw;
  background-color: #fff;
  border-radius: 4.6875vw;
  margin-bottom: 7.03125vw;
}
@media only screen and (min-width: 768px) {
  #issued .issued__card__explanation {
    padding: 1px 30px 20px;
    border-radius: 30px;
    margin-bottom: 45px;
  }
}
#issued .issued__card__explanation__title {
  width: 61.40625vw;
  margin: -2.34375vw auto 2.34375vw;
}
@media only screen and (min-width: 768px) {
  #issued .issued__card__explanation__title {
    width: 393px;
    margin: -15px auto 15px;
  }
}
#issued .issued__card__explanation__box:not(:last-of-type) {
  margin-bottom: 7.8125vw;
}
@media only screen and (min-width: 768px) {
  #issued .issued__card__explanation__box:not(:last-of-type) {
    margin-bottom: 50px;
  }
}
#issued .issued__card__explanation__box__ttl {
  display: inline-block;
  font-size: 3.4375vw;
  line-height: 1.3;
  background: linear-gradient(transparent 50%, #FFFF51 50%);
  margin-bottom: 3.125vw;
}
@media only screen and (min-width: 768px) {
  #issued .issued__card__explanation__box__ttl {
    font-size: 22px;
    margin-bottom: 20px;
  }
}
#issued .issued__card__explanation__detail dt {
  font-size: 2.8125vw;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 0.78125vw;
}
@media only screen and (min-width: 768px) {
  #issued .issued__card__explanation__detail dt {
    font-size: 18px;
    margin-bottom: 5px;
  }
}
#issued .issued__card__explanation__detail dd {
  font-size: 2.5vw;
  line-height: 1.5;
  margin-bottom: 3.125vw;
}
@media only screen and (min-width: 768px) {
  #issued .issued__card__explanation__detail dd {
    font-size: 16px;
    margin-bottom: 20px;
  }
}
#issued .issued__share {
  position: relative;
  width: 63.125vw;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  #issued .issued__share {
    width: 404px;
  }
}
#issued .issued__share::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  border-radius: 12.5vw;
}
@media only screen and (min-width: 768px) {
  #issued .issued__share::before {
    border-radius: 80px;
  }
}
#issued .issued__share img {
  position: relative;
  top: -0.78125vw;
}
@media only screen and (min-width: 768px) {
  #issued .issued__share img {
    top: -5px;
    transition: all 0.3s ease;
  }
}
@media only screen and (min-width: 768px) {
  #issued .issued__share img:hover {
    top: 0;
  }
}
#issued .issued__share__note {
  font-size: 2.5vw;
  color: #fff;
  text-align: center;
  margin: 4.6875vw 0 7.8125vw;
}
@media only screen and (min-width: 768px) {
  #issued .issued__share__note {
    font-size: 16px;
    margin: 30px 0 50px;
  }
}
#issued .issued__anew {
  position: relative;
  width: 63.125vw;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  #issued .issued__anew {
    width: 404px;
  }
}
#issued .issued__anew::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  border-radius: 12.5vw;
}
@media only screen and (min-width: 768px) {
  #issued .issued__anew::before {
    border-radius: 80px;
  }
}
#issued .issued__anew img {
  position: relative;
  top: -0.78125vw;
}
@media only screen and (min-width: 768px) {
  #issued .issued__anew img {
    top: -5px;
    transition: all 0.3s ease;
  }
}
@media only screen and (min-width: 768px) {
  #issued .issued__anew img:hover {
    top: 0;
  }
}