@charset "UTF-8";
/* -----------------------------------------------
* common
-------------------------------------------------- */
.site-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100vh;
}

main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow-x: hidden;
}

.main-centering {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.main-colored {
  background: #FFF5CD;
}

.main-background-image {
  background: center/cover url(../img/mypage/background1.svg) #FFD500;
}

.xl-show {
  display: none;
}

.lg-show {
  display: none;
}

.md-show {
  display: none;
}

.sm-show {
  display: none;
}

body {
  color: #002060;
  font-family: "M PLUS Rounded 1c", sans-serif;
}

.container {
  max-width: 1020px;
  padding: 0 20px;
  margin: 0 auto;
}

.form-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 40px;
}

.form-list--single {
  grid-template-columns: none;
}

.form-item--twin {
  grid-column: 1/3;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 40px;
}
.form-item--twin .form-term {
  grid-column: 1/3;
}
.form-item--twin .form-description:not(:first-of-type) {
  position: relative;
}
.form-item--twin .form-description:not(:first-of-type)::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: center/contain no-repeat url(../img/mypage/arrow-date.svg);
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: -32px;
}

.form-term {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.form-description {
  margin-top: 8px;
}
.form-description input, .form-description select {
  width: 100%;
  height: 48px;
  background: #fff;
  font-family: "Noto Sans JP", sans-serif;
  padding: 12px;
  border: 3px solid #002060;
  border-radius: 5px;
  -webkit-box-shadow: 0 4px #ccc;
          box-shadow: 0 4px #ccc;
}
.form-description input {
  /* 旧Edge対応 */
  /* IE対応 */
}
.form-description input::-webkit-input-placeholder {
  color: #ccc;
}
.form-description input::-moz-placeholder {
  color: #ccc;
}
.form-description input:-ms-input-placeholder {
  color: #ccc;
}
.form-description input::-ms-input-placeholder {
  color: #ccc;
}
.form-description input::placeholder {
  color: #ccc;
}
.form-description input::-ms-input-placeholder {
  color: #ccc;
}
.form-description input:-ms-input-placeholder {
  color: #ccc;
}
.form-description select {
  cursor: pointer;
}

.form-description--has-calendar {
  position: relative;
}
.form-description--has-calendar input {
  cursor: pointer;
}
.form-description--has-calendar::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: center/contain no-repeat url(../img/mypage/icon-calendar.svg);
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 16px;
  pointer-events: none;
}

.form-description--has-arrow {
  position: relative;
}
.form-description--has-arrow::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: center/contain url(../img/mypage/arrow-link.svg);
  position: absolute;
  position: absolute;
  top: 50%;
  right: 16px;
  -webkit-transform: translateY(-50%) rotate(90deg);
          transform: translateY(-50%) rotate(90deg);
  pointer-events: none;
}

.form-description--password {
  position: relative;
}

.form-hide-password {
  display: inline-block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 50%;
  right: 16px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.form-hide-password img {
  width: 100%;
}

.form-required {
  display: inline-block;
  background: #FF7E00;
  color: #fff;
  font-size: 14px;
  line-height: 24px;
  padding: 0 8px;
  border-radius: 4px;
  margin-left: 8px;
}

.radios {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.radio {
  display: none;
}
.radio + span {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  padding-left: 20px;
  position: relative;
  cursor: pointer;
}
.radio + span::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: #fff;
  border: 1px solid #002060;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.radio + span::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background: #002060;
  border-radius: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 4px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.radio:checked + span::after {
  opacity: 1;
}

.switch-wrapper {
  display: inline-block;
  width: 44px;
  height: 22px;
  position: relative;
}
.switch-wrapper input {
  display: none;
}
.switch-wrapper input:checked + .switch {
  background-color: #30BF55;
}
.switch-wrapper input:focus + .switch {
  -webkit-box-shadow: 0 0 1px #30BF55;
          box-shadow: 0 0 1px #30BF55;
}
.switch-wrapper input:checked + .switch:before {
  -webkit-transform: translateX(22px);
          transform: translateX(22px);
}

.switch {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 34px;
}
.switch::before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  top: 2px;
  left: 2px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
}

/* -----------------------------------------------
* heading
-------------------------------------------------- */
.heading {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.heading-secondary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  white-space: nowrap;
  gap: 30px;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.5;
}
.heading-secondary::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 1px;
  background: #002060;
}

.heading-tertiary {
  font-size: 32px;
  font-weight: 700;
  line-height: calc(24 / 32);
  text-align: center;
}

.circle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  padding: 15px;
  margin: 0 auto;
}
.circle img {
  width: 100%;
}
.circle + .heading-tertiary {
  margin-top: 20px;
}

.circle--orange {
  background: #FF7E00;
}

.circle--yellow {
  background: #FFD500;
}

.circle--green {
  background: #30BF55;
}

/* -----------------------------------------------
* button
-------------------------------------------------- */
.button {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background: #FFD500;
  font-size: 20px;
  font-weight: 700;
  line-height: calc(29 / 20);
  text-align: center;
  padding: 17px 80px;
  border-radius: 46px;
  -webkit-box-shadow: 0 4px #EEC704;
          box-shadow: 0 4px #EEC704;
  margin: 0 auto;
}
.button:hover {
  position: relative;
  bottom: -4px;
  -webkit-box-shadow: 0 0 #EEC704;
          box-shadow: 0 0 #EEC704;
}

.button--gray {
  background: #EDEDED;
  -webkit-box-shadow: 0 4px #B1B1B1;
          box-shadow: 0 4px #B1B1B1;
}

.button--blue {
  background: #439EF9;
  -webkit-box-shadow: 0 4px #1B7ADA;
          box-shadow: 0 4px #1B7ADA;
}

.button--white {
  background: #fff;
  padding: 17px 40px;
}

.button--green {
  background: #30BF55;
  -webkit-box-shadow: 0 4px #017214;
          box-shadow: 0 4px #017214;
  color: #fff;
}

.button-secondary {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background: #FFD500;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  padding: 5px 40px;
  border-radius: 35px;
  -webkit-box-shadow: 0 4px #EEC704;
          box-shadow: 0 4px #EEC704;
  margin: 0 auto;
}
.button-secondary:hover {
  position: relative;
  bottom: -4px;
  -webkit-box-shadow: 0 0 #EEC704;
          box-shadow: 0 0 #EEC704;
}

.button-secondary--white {
  background: #fff;
}

.button-tertiary {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background: #002060;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 18px;
}

/* -----------------------------------------------
* swiper
-------------------------------------------------- */
.swiper-pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 12px;
}

.swiper-pagination-bullet {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
}

.swiper-pagination-bullet-active {
  pointer-events: none;
}

.mypage-history .swiper-pagination {
  position: relative;
  z-index: 1;
}
.mypage-history .swiper-pagination-bullet {
  margin-top: 26px;
}
.mypage-history .swiper-pagination-bullet {
  background: #482B11;
}
.mypage-history .swiper-pagination-bullet-active {
  background: #FFD500;
}

.mypage-book .swiper-pagination {
  margin-top: 40px;
}
.mypage-book .swiper-pagination-bullet {
  background: #002060;
}
.mypage-book .swiper-pagination-bullet-active {
  background: #30BF55;
}

.book-archive .swiper-pagination {
  margin-top: 20px;
}
.book-archive .swiper-pagination-bullet {
  background: #002060;
}
.book-archive .swiper-pagination-bullet-active {
  background: #FFD500;
}

/* -----------------------------------------------
* pager
-------------------------------------------------- */
.pager {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 10px;
}
.pager a, .pager span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 16px;
  line-height: 1;
  border-radius: 50%;
}
.pager a {
  background: #fff;
}
.pager .pager__extend {
  width: auto;
  border: none;
}
.pager .pager__prev::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
}
.pager .pager__next::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
}

/* -----------------------------------------------
* header
-------------------------------------------------- */
.header {
  background: #fff;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;
}

.header__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-right: 30px;
}

.header__logo {
  height: 100px;
}
.header__logo img {
  width: auto;
  height: 100%;
}

.header__buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}

.header__button {
  display: inline-block;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  line-height: calc(32 / 18);
  padding: 4px 16px 6px;
  border-radius: 5px;
}

.header__button--primary {
  background: #439EF9;
}

.header__button--secondary {
  color: #002060;
}

.header__button--tertiary {
  background: #FFD500;
  color: #002060;
}

/* -----------------------------------------------
* footer
-------------------------------------------------- */
.footer {
  background: #002060;
  color: #fff;
  padding: 60px 0;
}

.footer__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 24px;
}

.footer__item {
  font-size: 16px;
  font-weight: 700;
}

.footer__copy {
  display: block;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  margin-top: 20px;
}

/* -----------------------------------------------
* examination
-------------------------------------------------- */
.examination {
  background: center/cover url(../img/examination/background1.svg) #FFD500;
  padding: 60px 0;
}

.examination__heading {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.examination-link {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 20px;
  font-weight: 700;
  line-height: calc(29 / 20);
  text-align: center;
  margin: 0 auto;
}

.examination-link--previous {
  padding-left: 20px;
  position: relative;
}
.examination-link--previous::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 20px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(../img/common/arrow-link.svg);
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
  -webkit-transition: left 0.5s;
  transition: left 0.5s;
}

.examination-link--next {
  padding-right: 20px;
  position: relative;
}
.examination-link--next::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 20px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(../img/common/arrow-link.svg);
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%) scale(-1, 1);
          transform: translateY(-50%) scale(-1, 1);
  right: 0;
  -webkit-transition: right 0.5s;
  transition: right 0.5s;
}

/* -----------------------------------------------
* examination-first
-------------------------------------------------- */
.examination-first {
  background: #fff;
  padding: 70px 30px;
  border-radius: 20px;
  border: 3px solid #002060;
  margin-top: 60px;
}

.examination-first__heading {
  font-size: 20px;
  font-weight: 700;
  line-height: calc(29 / 20);
  text-align: center;
}

.examination-first__button {
  margin-top: 40px;
}

.examination-book {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 50%;
  margin: 40px auto 0;
}

.examination-book__image {
  -webkit-box-shadow: 8px 12px 20px rgba(0, 0, 0, 0.16);
          box-shadow: 8px 12px 20px rgba(0, 0, 0, 0.16);
}
.examination-book__image img {
  width: 100%;
}

.examination-book__author {
  color: #858C8C;
  font-size: 12px;
  line-height: calc(18 / 12);
  margin-top: 16px;
}

.examination-book__title {
  font-size: 16px;
  line-height: calc(24 / 16);
  margin-top: 8px;
}

.examination-first__text {
  font-size: 20px;
  font-weight: 700;
  line-height: calc(29 / 20);
  text-align: center;
  margin-top: 40px;
}

.examination-first__button {
  margin-top: 40px;
}

.examination__button {
  margin: 40px auto 0;
}

/* -----------------------------------------------
* examination-second
-------------------------------------------------- */
.examination-second {
  width: 100%;
  max-width: 980px;
  max-height: calc(100vh - 140px);
  overflow-y: scroll;
  background: #fff;
  padding: 56px;
  border-radius: 20px;
  border: 3px solid #002060;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  top: 120px;
}

.examination-second__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 40px;
}
.examination-choices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 20px;
  max-width: 420px;
  margin: 0 auto;
}

.examination-choices__heading {
  grid-column: 1/3;
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background: #EDEDED;
  font-size: 20px;
  font-weight: 700;
  line-height: calc(32 / 20);
  padding: 4px 20px;
  border-radius: 24px;
  margin: 0 auto;
}

.examination-choices__text {
  grid-column: 1/3;
  font-size: 20px;
  font-weight: 700;
  line-height: calc(29 / 20);
  text-align: center;
}

.examination-choices__count {
  grid-column: 1/3;
  font-size: 32px;
  font-weight: 700;
  line-height: calc(29 / 20);
  text-align: center;
}

.examination-choices__radio {
  display: none;
}

.examination-choices__radio + span {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 200px;
  background: #EDEDED;
  font-size: 20px;
  font-weight: 700;
  line-height: calc(29 / 20);
  text-align: center;
  padding: 12px 80px;
  border-radius: 40px;
  -webkit-box-shadow: 0 4px #B1B1B1;
          box-shadow: 0 4px #B1B1B1;
  margin: 0 auto;
  position: relative;
  cursor: pointer;
}

.examination-choices__radio + span::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0 auto;
}

.examination-choices__radio--has-circle + span::before {
  background-image: url(../img/common/icon-circle-black.svg);
}

.examination-choices__radio--has-cross + span::before {
  background-image: url(../img/common/icon-cross-black.svg);
}

.examination-choices__radio:checked + span {
  background: #439EF9;
  bottom: -4px;
  -webkit-box-shadow: 0 0 #1B7ADA;
          box-shadow: 0 0 #1B7ADA;
}

.examination-choices__radio--has-circle:checked + span::before {
  background-image: url(../img/common/icon-circle-white.svg);
}

.examination-choices__radio--has-cross:checked + span::before {
  background-image: url(../img/common/icon-cross-white.svg);
}

.examination-second__button {
  grid-column: 1/3;
}

.examination-second__link {
  grid-column: 1/3;
}

.examination-second__close {
  position: absolute;
  top: 130px;
  right: calc((100vw - 980px) / 2 + 10px);
}
.examination-second__close::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(../img/common/icon-cross-black.svg);
}

.examination-question {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 8px;
}

.examination-question__author {
  font-size: 12px;
  line-height: calc(18 / 12);
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  text-orientation: upright;
}

.examination-question__box {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-height: 406px;
  background: #EDEDED;
  padding: 22px 30px;
  border-radius: 8px;
}

.examination-question__text {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: serif;
  font-size: 20px;
  line-height: calc(44 / 24);
  letter-spacing: 0.02em;
}
.examination-question__text .lined-text {
  font-weight: 900;
}

/* -----------------------------------------------
* examination-thanks
-------------------------------------------------- */
.examination-thanks {
  background: #fff;
  padding: 130px 30px 100px;
  border-radius: 20px;
  border: 3px solid #002060;
  margin-top: 60px;
  position: relative;
}

.examination-thanks__inner {
  max-width: 600px;
  margin: 0 auto;
}

.examination-thanks__background {
  max-width: calc(100% - 40px);
  position: absolute;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  top: 0;
}

.examination-thanks__name {
  font-size: 24px;
  font-weight: 700;
  line-height: calc(29 / 20);
  text-align: center;
}

.examination-thanks__heading {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background: #439EF9;
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  line-height: calc(59 / 40);
  padding: 10px 50px;
  border-radius: 90px;
  margin: 8px auto 0;
}

.examination-thanks__text {
  font-size: 20px;
  font-weight: 700;
  line-height: calc(29 / 20);
  text-align: center;
  margin-top: 40px;
}

.examination-result {
  background: #ECF5FE;
  padding: 40px;
  border-radius: 8px;
  margin-top: 40px;
}

.examination-result__book {
  color: #439EF9;
  font-size: 32px;
  font-weight: 700;
  line-height: calc(32 / 24);
  text-align: center;
}

.examination-result__heading {
  font-size: 20px;
  font-weight: 700;
  line-height: calc(40 / 20);
  text-align: center;
  margin-top: 15px;
}

.examination-result__time {
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  margin-top: 5px;
}

.examination-result__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 6px;
  margin-top: 20px;
}
.examination-result__text span {
  display: inline-block;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 40px;
}
.examination-result__text .colored-text {
  display: inline-block;
  color: #439EF9;
  font-size: 36px;
  letter-spacing: normal;
}

.examination-point {
  margin-top: 20px;
}

.examination-point__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 10px;
}
.examination-point__wrapper:not(:first-of-type) {
  margin-top: 10px;
}

.examination-point__text {
  width: 100%;
  font-size: 20px;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.02em;
  white-space: nowrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}
.examination-point__text::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 2px;
  background: #002060;
  border-radius: 4px;
}

.examination-point__text--total {
  color: #439EF9;
  font-size: 24px;
}
.examination-point__text--total::after {
  background: #439EF9;
}

.examination-point__number {
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
}

.examination-point__number--total {
  color: #439EF9;
}

.examination-incorrect {
  margin-top: 40px;
}

.examination-incorrect__heading {
  font-size: 20px;
  font-weight: 700;
  line-height: calc(29 / 20);
  text-align: center;
}

.examination-incorrect__list {
  margin-top: 40px;
}

.examination-incorrect__item:not(:first-of-type) {
  margin-top: 40px;
}

.examination-incorrect__term {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 10px;
}
.examination-incorrect__term::before {
  content: "";
  width: 100%;
  height: 1px;
  background: #002060;
}
.examination-incorrect__term::after {
  content: "";
  width: 100%;
  height: 1px;
  background: #002060;
}

.examination-incorrect__title {
  background: #EDEDED;
  font-size: 20px;
  font-weight: 700;
  line-height: calc(32 / 20);
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-indent: 0.02em;
  padding: 4px 16px;
  border-radius: 24px;
}

.examination-incorrect__description {
  margin-top: 20px;
}

.examination-incorrect__text {
  font-size: 16px;
  line-height: calc(23 / 16);
}

.examination-incorrect__button {
  margin-top: 40px;
}

.examination-incorrect__link {
  margin-top: 40px;
}

.examination-resister {
  margin-top: 40px;
}

.examination-resister__wrapper {
  display: grid;
  grid-template-columns: auto 120px;
  background: #EDEDED;
  padding: 24px 32px;
  border-radius: 8px;
}

.examination-resister__checkbox {
  display: none;
}

.examination-resister__checkbox + span {
  display: inline-block;
  font-size: 16px;
  line-height: calc(40 / 16);
  letter-spacing: 0.03em;
  padding-left: 31px;
  position: relative;
  cursor: pointer;
}

.examination-resister__checkbox + span::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #002060;
  border-radius: 2px;
  position: absolute;
  top: 11px;
  left: 0;
}

.examination-resister__checkbox + span::after {
  content: "";
  display: block;
  width: 12px;
  height: 7px;
  border-bottom: 2px solid #EDEDED;
  border-left: 2px solid #EDEDED;
  position: absolute;
  top: 15px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  left: 3px;
  opacity: 0;
}

.examination-resister__checkbox:checked + span::before {
  background: #439EF9;
  border: none;
}

.examination-resister__checkbox:checked + span::after {
  opacity: 1;
}

.examination-resister__button {
  grid-row: 1/3;
  grid-column: 2/3;
  margin: auto 0;
}

/* -----------------------------------------------
* examination-interruption
-------------------------------------------------- */
.examination-interruption {
  background: #fff;
  padding: 120px 80px;
  border-radius: 20px;
  border: 3px solid #002060;
  margin-top: 60px;
  position: relative;
}

.examination-interruption__heading {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background: #002060;
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  line-height: calc(59 / 40);
  padding: 24px 50px 10px;
  border-radius: 90px;
  margin: 0 auto;
}

.examination-interruption__text {
  font-size: 20px;
  font-weight: 700;
  line-height: calc(29 / 20);
  text-align: center;
  margin-top: 40px;
}

.examination-interruption__small-text {
  font-size: 16px;
  font-weight: 700;
  line-height: calc(23 / 16);
  text-align: center;
  margin-top: 40px;
}

.examination-interruption__small-text--colored {
  color: #FF7E00;
}

.examination-interruption__button {
  margin-top: 40px;
}

/* -----------------------------------------------
* examination-countdown
-------------------------------------------------- */
.examination-countdown {
  background: #fff;
  padding: 120px 0;
  border-radius: 20px;
  border: 3px solid #002060;
  margin-top: 60px;
  position: relative;
}

.examination-countdown__number {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 200px;
  height: 200px;
  background: #002060;
  color: #fff;
  font-size: 96px;
  font-weight: 700;
  border-radius: 50%;
  margin: 0 auto;
}

/* -----------------------------------------------
* top-mainvisual
-------------------------------------------------- */
.top-mainvisual {
  background: center/cover url(../img/examination/background1.svg) #FFD500;
  padding: 80px 0;
}

.top-mainvisual__inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

.top-mainvisual__image {
  text-align: right;
  height: 540px;
  margin-right: calc((100vw - 1100px) / 2 * -1);
}
.top-mainvisual__image img {
  height: 100%;
}

.top-mainvisual__content {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
}

.top-mainvisual__logo {
  width: 240px;
}
.top-mainvisual__logo img {
  width: 100%;
}

.top-mainvisual__heading {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 48px;
}

/* -----------------------------------------------
* top-about
-------------------------------------------------- */
.top-about {
  padding: 80px 0;
}

.top-about__text {
  font-size: 16px;
  font-weight: 700;
  line-height: 2;
  margin-top: 40px;
}

.top-about__button {
  margin-top: 40px;
}

/* -----------------------------------------------
* top-function
-------------------------------------------------- */
.top-function {
  background: #FFF5CD;
  padding: 80px 0;
}

.top-function__button {
  margin-top: 40px;
}

.function-introduction {
  margin-top: 80px;
}

.function-introduction__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 40px;
}

.function-introduction__image {
  -webkit-box-shadow: 8px 12px 20px rgba(0, 0, 0, 0.16);
          box-shadow: 8px 12px 20px rgba(0, 0, 0, 0.16);
}
.function-introduction__image img {
  width: 100%;
}

.function-introduction__content {
  margin-top: 16px;
}

.function-introduction__name {
  color: #858C8C;
  font-size: 12px;
  line-height: 1.5;
}

.function-introduction__title {
  font-size: 16px;
  line-height: 1.5;
  margin-top: 8px;
}

.function-introduction__button {
  margin-top: 16px;
}

.function-example {
  margin-top: 80px;
}

.function-example__button {
  margin-top: 40px;
}

.function-recruitment {
  background: center/cover url(../img/top/background2.svg) #FFD500;
  padding: 40px;
  border: 3px solid #002060;
  border-radius: 20px;
  margin-top: 80px;
}

.function-recruitment__heading {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
}

.function-recruitment__text {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  margin-top: 20px;
}

.function-recruitment__button {
  margin: 20px auto 0;
}

/* -----------------------------------------------
* top-cta
-------------------------------------------------- */
.top-cta {
  background: center/cover url(../img/top/background1.svg) #FFD500;
  padding: 60px 0;
}

.top-cta__wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.top-cta__content {
  padding-left: 40px;
  border-left: 4px solid #002060;
}

.top-cta__heading {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.5;
}

.top-cta__text {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 16px;
}

.top-cta__button-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* -----------------------------------------------
* floating-banner
-------------------------------------------------- */
.floating-banner {
  width: 200px;
  position: fixed;
  right: 0;
  bottom: 0;
}
.floating-banner img {
  width: 100%;
}

/* -----------------------------------------------
* mypage-mainvisual
-------------------------------------------------- */
.mypage-mainvisual {
  background: center/cover url(../img/mypage/background1.svg) #FFD500;
  padding: 60px 0;
}

.mypage-mainvisual__heading {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.mypage-news {
  margin-top: 60px;
}

.mypage-news__tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.mypage-news__tab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 10px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  padding: 18px;
  border-radius: 20px 20px 0 0;
  cursor: pointer;
}
.mypage-news__tab::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: center/contain no-repeat url(../img/mypage/icon-news1.svg);
}

.mypage-news__tab--blue {
  background: #439EF9;
}

.mypage-news__tab--orange {
  background: #FF7E00;
}

.mypage-news__contents {
  font-family: "Noto Sans JP", sans-serif;
  background: #fff;
  padding: 20px 40px;
  border-style: solid;
  border-width: 3px;
  border-radius: 0 0 20px 20px;
}

.mypage-news__contents--blue {
  border-color: #439EF9;
}

.mypage-news__contents--orange {
  border-color: #FF7E00;
}

.mypage-news__list {
  height: 146px;
  overflow-y: scroll;
}

.mypage-news__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
}
.mypage-news__item:not(:first-of-type) {
  border-top: 1px solid #EDEDED;
}

.mypage-news__date {
  font-size: 14px;
  line-height: calc(48 / 14);
}

.mypage-news__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-size: 14px;
  line-height: calc(48 / 14);
}

.mypage-news__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 14px;
  letter-spacing: 0.5px;
  margin-left: auto;
}
.mypage-news__link::after {
  content: "";
  display: inline-block;
  background: center/contain no-repeat url(../img/mypage/arrow-link.svg);
  width: 24px;
  height: 24px;
}

.mypage-account {
  display: grid;
  grid-template-columns: 195px auto;
  margin-top: 40px;
}

.mypage-account__content {
  background: #fff;
  border-top: 3px solid #439EF9;
  border-right: 3px solid #439EF9;
  border-bottom: 3px solid #439EF9;
  border-radius: 0 20px 20px 0;
}

.mypage-account__wrapper {
  display: grid;
  grid-template-columns: repeat(2, calc(50% - 16px));
  gap: 32px;
  padding: 30px;
}

.account-modal {
  width: 100%;
  max-width: 980px;
  max-height: calc(100vh - 140px);
  overflow-y: scroll;
  background: #fff;
  padding: 56px;
  border-radius: 20px;
  border: 3px solid #002060;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 1;
}

.account-modal__wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}

.account-modal__image img {
  width: 100%;
}

label:has(.account-modal__radio) {
  display: block;
  width: 16px;
  height: 16px;
  margin: 16px auto 0;
}

.account-modal__radio {
  display: none;
}
.account-modal__radio + span {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  position: relative;
  cursor: pointer;
}
.account-modal__radio + span::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: #fff;
  border: 1px solid #002060;
  border-radius: 50%;
  position: relative;
}
.account-modal__radio + span::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background: #002060;
  border-radius: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 4px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.account-modal__radio:checked + span::after {
  opacity: 1;
}

.account-modal__button {
  margin-top: 48px;
}

.account-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
}
.account-modal__close::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(../img/common/icon-cross-black.svg);
}

.mypage-profile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #439EF9;
  border-radius: 20px 0 0 20px;
}

.mypage-profile__image {
  width: 100px;
}
.mypage-profile__image img {
  width: 100%;
}

.mypage-profile__link {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-indent: 0.5px;
  line-height: 1.5;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 8px;
}

.mypage-profile__address {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-indent: 0.5px;
  line-height: 1.5;
  margin-top: 16px;
}

.mypage-profile__grade {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.5px;
  text-indent: 0.5px;
}

.mypage-profile__name {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.5px;
  text-indent: 0.5px;
  margin-top: 8px;
}

.mypage-point {
  display: grid;
  grid-template-columns: 136px auto;
  gap: 24px 30px;
}

.mypage-point__circle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 136px;
  height: 136px;
  border-radius: 50%;
  background: #439EF9;
  color: #fff;
  font-size: 48px;
  font-weight: 700;
  line-height: calc(71 / 48);
  position: relative;
}
.mypage-point__circle::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: center/contain no-repeat url(../img/mypage/arrow-point.svg);
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: -24px;
}

.mypage-point__content {
  padding: 9px 0;
}

.mypage-point__text {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: calc(32 / 20);
  text-align: center;
}

.mypage-point__number {
  color: #439EF9;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1;
  margin-right: 4px;
}

.mypage-point__border {
  color: #EDEDED;
}

.mypage-point__bottom-text {
  grid-column: 1/3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #EDEDED;
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  padding: 4px 16px;
  border-radius: 20px;
}
.mypage-point__bottom-text::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: center/contain no-repeat url(../img/mypage/icon-medal-blue.svg);
  margin-right: 4px;
}

.mypage-point__bottom-number {
  display: inline-block;
  color: #439EF9;
  font-size: 26px;
  line-height: 32px;
  margin: 0 4px;
}

.mypage-ranking {
  background: #ECF5FE;
  padding: 24px 32px;
  border-radius: 8px;
}

.mypage-ranking__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.mypage-ranking__item:not(:first-of-type) {
  margin-top: 16px;
}

.mypage-ranking__heading {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 40px;
}

.mypage-ranking__text {
  font-size: 24px;
  font-weight: 700;
  line-height: 40px;
}

.mypage-ranking__number {
  display: inline-block;
  background: #439EF9;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  padding: 10px 14px;
  border-radius: 20px;
  margin-right: 6px;
}

.mypage-public {
  grid-column: 1/3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  font-family: "Noto Sans JP", sans-serif;
  padding: 12px 30px;
  border-top: 1px solid #EDEDED;
  position: relative;
}

.mypage-public__text {
  font-size: 16px;
  line-height: 1.5;
  margin-right: 10px;
}

/* -----------------------------------------------
* mypage-mainvisual
-------------------------------------------------- */
.mypage-transition {
  padding: 80px 0;
}

.mypage-transition__radios {
  margin-top: 24px;
}

/* -----------------------------------------------
* mypage-history
-------------------------------------------------- */
.mypage-history {
  background: #FFF5CD;
  padding: 80px 0;
}

.mypage-history__inner {
  max-width: 1160px;
  padding: 0 20px;
  margin: 0 auto;
}

.mypage-history__list {
  margin-top: 80px;
}

.mypage-history__shelf-wrapper {
  padding: 0 20px;
  margin: 80px -20px 0;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.mypage-history__shelf-wrapper::-webkit-scrollbar {
  display: none;
}

.mypage-history__button {
  margin-top: 40px;
}

.mypage-history__radios {
  margin-top: 24px;
}

.mypage-history__select {
  position: relative;
}
.mypage-history__select::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: center/contain url(../img/mypage/arrow-link.svg);
  position: absolute;
  position: absolute;
  top: 50%;
  right: 16px;
  -webkit-transform: translateY(-50%) rotate(90deg);
          transform: translateY(-50%) rotate(90deg);
  pointer-events: none;
}

.shelf {
  min-width: 1120px;
  height: 1066px;
  background: center/cover url(../img/mypage/background2.svg);
  font-family: "Noto Sans JP", sans-serif;
}

.shelf__wrapper {
  height: 620px;
}

.shelf__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 108px 12px;
  padding: 68px 108px 0;
}

.shelf__item {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  height: 222px;
  background: center/cover url(../img/mypage/background3.svg);
  padding: 24px 20px 20px;
}

.shelf__title {
  grid-column: 1/3;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-height: 14px;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  margin: 0 auto;
}

.shelf__image {
  padding: 0 20px;
}
.shelf__image a {
  display: block;
  padding-top: calc(213 / 148 * 100%);
  position: relative;
}
.shelf__image a img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.shelf__image figcaption {
  font-size: 13px;
  line-height: 1;
  text-align: center;
  margin-top: 8px;
}

.shelf__image-publisher {
  width: 100%;
  color: #fff;
  font-family: serif;
  font-size: 6px;
  line-height: 1.5;
  text-align: center;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  top: 5em;
}

.shelf__image-title {
  width: 100%;
  color: #fff;
  font-family: serif;
  font-size: 8px;
  line-height: 1.5;
  text-align: center;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  top: 6em;
}

.shelf__image-author {
  width: 100%;
  color: #fff;
  font-family: serif;
  font-size: 6px;
  line-height: 1.5;
  text-align: center;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 6em;
}

.shelf__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.shelf__heading {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.shelf__date {
  font-size: 14px;
  line-height: 1;
  margin-top: 10px;
}

.shelf__text {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  margin-top: 22px;
}

.shelf__switch-wrapper {
  margin-top: 10px;
}

.shelf__books {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2px;
  height: 250px;
  margin: 120px 36px 0;
}

.shelf__book a {
  width: 28px;
  height: 250px;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding: 12px 8px 32px;
  border-radius: 4px;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  position: relative;
}
.shelf__book a:after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 12px;
  background: #F8CA00;
  position: absolute;
  bottom: 12px;
  left: 0;
}
.shelf__book:nth-of-type(1) a, .shelf__book:nth-of-type(10) a, .shelf__book:nth-of-type(15) a, .shelf__book:nth-of-type(23) a, .shelf__book:nth-of-type(32) a {
  background: #424242;
}
.shelf__book:nth-of-type(2) a, .shelf__book:nth-of-type(11) a, .shelf__book:nth-of-type(16) a, .shelf__book:nth-of-type(24) a, .shelf__book:nth-of-type(33) a {
  background: #8A9B0F;
}
.shelf__book:nth-of-type(3) a, .shelf__book:nth-of-type(12) a, .shelf__book:nth-of-type(17) a, .shelf__book:nth-of-type(25) a, .shelf__book:nth-of-type(34) a {
  background: #2980B9;
}
.shelf__book:nth-of-type(4) a, .shelf__book:nth-of-type(7) a, .shelf__book:nth-of-type(13) a, .shelf__book:nth-of-type(18) a, .shelf__book:nth-of-type(21) a, .shelf__book:nth-of-type(26) a, .shelf__book:nth-of-type(29) a, .shelf__book:nth-of-type(35) a {
  background: #556270;
}
.shelf__book:nth-of-type(5) a, .shelf__book:nth-of-type(14) a, .shelf__book:nth-of-type(19) a, .shelf__book:nth-of-type(27) a, .shelf__book:nth-of-type(36) a {
  background: #FF847C;
}
.shelf__book:nth-of-type(6) a, .shelf__book:nth-of-type(15) a, .shelf__book:nth-of-type(20) a, .shelf__book:nth-of-type(28) a, .shelf__book:nth-of-type(37) a {
  background: #795547;
}
.shelf__book:nth-of-type(8) a, .shelf__book:nth-of-type(17) a, .shelf__book:nth-of-type(22) a, .shelf__book:nth-of-type(30) a, .shelf__book:nth-of-type(39) a {
  background: #E97F02;
}
.shelf__book:nth-of-type(9) a, .shelf__book:nth-of-type(18) a, .shelf__book:nth-of-type(23) a, .shelf__book:nth-of-type(31) a, .shelf__book:nth-of-type(40) a {
  background: #DC4437;
}

/* -----------------------------------------------
* mypage-book
-------------------------------------------------- */
.mypage-book {
  padding: 80px 0;
}

.mypage-book__inner {
  max-width: 1160px;
  padding: 0 20px;
  margin: 0 auto;
}

.mypage-book__tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 2px solid #30BF55;
  border-radius: 25px;
  -webkit-box-shadow: 0 5px #017214;
          box-shadow: 0 5px #017214;
  margin-top: 80px;
  overflow: hidden;
}

.mypage-book__tab {
  color: #30BF55;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  padding: 10px;
  cursor: pointer;
}
.mypage-book__tab.active {
  background: #30BF55;
  color: #fff;
}

.mypage-book__list {
  margin-top: 80px;
}

.mypage-book__button {
  margin-top: 40px;
}

/* -----------------------------------------------
* mypage-introduction
-------------------------------------------------- */
.mypage-introduction {
  margin-top: 80px;
}

.mypage-introduction__item {
  display: grid;
  grid-template-columns: 100px auto 200px;
  gap: 30px;
  padding: 30px;
  border: 3px solid #30BF55;
  border-radius: 20px;
  -webkit-box-shadow: 0 5px #30BF55;
          box-shadow: 0 5px #30BF55;
  position: relative;
}
.mypage-introduction__item:not(:first-of-type) {
  margin-top: 40px;
}

.mypage-introduction__image a {
  display: block;
  padding-top: calc(213 / 148 * 100%);
  position: relative;
}
.mypage-introduction__image a img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.mypage-introduction__image img {
  width: 100%;
}

.mypage-introduction__content {
  font-family: "Noto Sans JP", sans-serif;
}

.mypage-introduction__title {
  font-size: 20px;
  font-weight: 700;
  line-height: calc(29 / 20);
}

.mypage-introduction__name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 16px;
}

.mypage-introduction__description {
  font-size: 16px;
  line-height: 1.75;
  margin-top: 16px;
}

.mypage-introduction__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.mypage-introduction__button-wrapper {
  position: relative;
}

.mypage-introduction__input {
  width: 100%;
  height: 63px;
  padding: 17px 32px;
  border-radius: 32px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  text-indent: -9999px;
  cursor: pointer;
}
.mypage-introduction__input:hover + .mypage-introduction__button--has-icon {
  position: relative;
  bottom: -4px;
  -webkit-box-shadow: 0 0 #017214;
          box-shadow: 0 0 #017214;
}

.mypage-introduction__button {
  display: block;
  background: #30BF55;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: calc(29 / 20);
  padding: 17px 32px;
  border-radius: 46px;
  -webkit-box-shadow: 0 4px #017214;
          box-shadow: 0 4px #017214;
  margin: 0 auto;
}
.mypage-introduction__button:not(:has(.mypage-introduction__button--has-icon)):hover {
  position: relative;
  bottom: -4px;
  -webkit-box-shadow: 0 0 #017214;
          box-shadow: 0 0 #017214;
}

.mypage-introduction__button--has-icon {
  width: 100%;
  position: relative;
}
.mypage-introduction__button--has-icon::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 32px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 32px;
}
.mypage-introduction__button--has-icon::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: center/contain no-repeat url(../img/mypage/icon-calendar.svg);
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 38px;
}

.mypage-introduction__date {
  font-size: 16px;
  line-height: 1.75;
  text-align: center;
  margin-top: 12px;
}

.mypage-introduction__number-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-family: "Noto Sans JP", sans-serif;
  margin-top: 32px;
}

.mypage-introduction__heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}
.mypage-introduction__heading::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: center/contain no-repeat url(../img/mypage/icon-medal-deep-blue.svg);
}

.mypage-introduction__text {
  font-size: 16px;
  line-height: 1.5;
}

.mypage-introduction__pager {
  margin: 40px -20px 0;
}
.mypage-introduction__pager a, .mypage-introduction__pager span {
  color: #017214;
  border: 1px solid #017214;
}
.mypage-introduction__pager .pager__current {
  background: #017214;
  color: #fff;
}
.mypage-introduction__pager .pager__prev::after {
  background: center/contain url(../img/mypage/arrow-pager.svg);
}
.mypage-introduction__pager .pager__next::after {
  background: center/contain url(../img/mypage/arrow-pager.svg);
}

.mypage-introduction__close {
  position: absolute;
  top: 4px;
  right: 4px;
}
.mypage-introduction__close::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(../img/common/icon-cross-black.svg);
}

/* -----------------------------------------------
* mypage-history-archive
-------------------------------------------------- */
.mypage-history-archive {
  padding: 100px 0 0;
}

.mypage-history-archive__inner {
  max-width: 1160px;
  padding: 0 4px;
  margin: 0 auto;
}

.mypage-history-archive__select {
  width: calc(1 / 3 * 100% - 16px * 2);
  margin: 24px auto 0;
  position: relative;
}
.mypage-history-archive__select::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: center/contain url(../img/mypage/arrow-link.svg);
  position: absolute;
  position: absolute;
  top: 50%;
  right: 16px;
  -webkit-transform: translateY(-50%) rotate(90deg);
          transform: translateY(-50%) rotate(90deg);
  pointer-events: none;
}
.mypage-history-archive__select select {
  width: 100%;
  height: 48px;
  background: #fff;
  font-family: "Noto Sans JP", sans-serif;
  padding: 12px;
  border: 3px solid #002060;
  border-radius: 5px;
  -webkit-box-shadow: 0 4px #ccc;
          box-shadow: 0 4px #ccc;
  cursor: pointer;
}

.mypage-history-archive__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 40px;
}

.mypage-history-archive__item {
  width: calc(1 / 3 * 100% - 16px * 2);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px 30px;
  background: #fff;
  padding: 20px;
  border: 3px solid #002060;
  border-radius: 20px;
  -webkit-box-shadow: 0 5px #002060;
          box-shadow: 0 5px #002060;
  margin: 20px 16px;
}

.mypage-history-archive__image a {
  display: block;
  padding-top: calc(213 / 148 * 100%);
  position: relative;
}
.mypage-history-archive__image a img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.mypage-history-archive__image figcaption {
  font-size: 14px;
  line-height: 1;
  text-align: center;
  margin-top: 8px;
  text-align: center;
}

.mypage-history-archive__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.mypage-history-archive__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.mypage-history-archive__text {
  font-size: 14px;
  line-height: 1;
  margin-top: 8px;
}
.mypage-history-archive__text + .mypage-history-archive__title {
  margin-top: 20px;
}

.mypage-history-archive__switch-wrapper {
  margin-top: 10px;
}

.mypage-history-archive__pager {
  margin: 40px -20px 0;
}
.mypage-history-archive__pager a, .mypage-history-archive__pager span {
  color: #002060;
  border: 1px solid #002060;
}
.mypage-history-archive__pager .pager__current {
  background: #002060;
  color: #fff;
}
.mypage-history-archive__pager .pager__prev::after {
  background: center/contain url(../img/mypage/arrow-pager-deep-blue.svg);
}
.mypage-history-archive__pager .pager__next::after {
  background: center/contain url(../img/mypage/arrow-pager-deep-blue.svg);
}

.mypage-history-archive__heading-secondary {
  grid-column: 1/3;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

/* -----------------------------------------------
* mypage-examination
-------------------------------------------------- */
.mypage-examination {
  background: #FFF5CD;
  padding: 80px 0;
}

.mypage-examination__button {
  margin-top: 40px;
}

.examination-introduction {
  margin-top: 80px;
}

.examination-introduction__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 40px;
}

.examination-introduction__image {
  -webkit-box-shadow: 8px 12px 20px rgba(0, 0, 0, 0.16);
          box-shadow: 8px 12px 20px rgba(0, 0, 0, 0.16);
}
.examination-introduction__image img {
  width: 100%;
}

.examination-introduction__content {
  margin-top: 16px;
}

.examination-introduction__name {
  color: #858C8C;
  font-size: 12px;
  line-height: 1.5;
}

.examination-introduction__title {
  font-size: 16px;
  line-height: 1.5;
  margin-top: 8px;
}

.examination-introduction__button {
  margin-top: 16px;
}

/* -----------------------------------------------
* contact
-------------------------------------------------- */
.contact {
  background: #FFF5CD;
  padding: 80px 0;
}

.contact__inner {
  max-width: 640px;
  padding: 0 20px;
  margin: 0 auto;
}

.contact__heading {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.contact__list {
  margin-top: 80px;
}

.contact__shelf-wrapper {
  overflow: scroll;
  padding: 0 20px;
  margin: 80px -20px 0;
}

.contact__button {
  margin-top: 40px;
}

.contact__text {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 16px;
  font-weight: 700;
  margin: 60px auto 0;
}
.contact__text input[type=checkbox] {
  opacity: 0;
  position: relative;
  left: 14px;
}
.contact__text input[type=checkbox] + span {
  display: inline-block;
  padding-left: 20px;
  position: relative;
  cursor: pointer;
}
.contact__text input[type=checkbox] + span::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: #fff;
  border: 2px solid #002060;
  border-radius: 2px;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.contact__text input[type=checkbox] + span::after {
  content: "";
  display: block;
  width: 12px;
  height: 6px;
  border-bottom: 3px solid #002060;
  border-left: 3px solid #002060;
  position: absolute;
  top: 5px;
  left: 2px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  opacity: 0;
}
.contact__text input[type=checkbox]:checked + span::after {
  opacity: 1;
}
.contact__text a {
  text-decoration: underline;
}
.contact__text a:hover {
  text-decoration: none;
}

/* -----------------------------------------------
* book-mainvisual
-------------------------------------------------- */
.book-mainvisual {
  background: center/cover url(../img/mypage/background1.svg) #FFD500;
  padding: 60px 0;
}

.book-mainvisual__heading {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

/* -----------------------------------------------
* book-contents
-------------------------------------------------- */
.book-contents {
  margin-top: 90px;
}

.book-contents__wrapper {
  display: grid;
  grid-template-columns: 400px auto;
  gap: 40px 100px;
}

.book-like {
  padding: 32px;
  border: 2px solid #FFD500;
  margin-top: 60px;
}

.book-like__heading {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  padding: 0 12px;
  margin: -52px auto 0;
}

.book-like__text {
  font-size: 16px;
  line-height: 1.75;
  margin-top: 16px;
}

.book-information__image {
  padding: 0 15%;
  position: relative;
}
.book-information__image img {
  width: 100%;
}

.book-information__image-publisher {
  width: 100%;
  color: #fff;
  font-family: serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  top: 5.5em;
}

.book-information__image-title {
  width: 70%;
  color: #fff;
  font-family: serif;
  font-size: 20px;
  line-height: 1.5;
  text-align: center;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  top: 7.25em;
}

.book-information__image-author {
  width: 100%;
  color: #fff;
  font-family: serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 6.5em;
}

.book-information__caption {
  width: 70%;
  background: #439EF9;
  color: #fff;
  padding: 4px 12px;
  margin: 0 auto;
}

.book-information__caption-text {
  font-size: 18px;
  font-weight: 700;
  line-height: 32px;
}

.book-information__caption-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  text-align: right;
}

.book-information__content {
  margin-top: 20px;
}

.book-information__button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
  background: #30BF55;
  width: 100%;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  padding: 4px 38px;
  border-radius: 20px;
}
.book-information__button::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(../img/common/icon-like.svg);
}

.book-information__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #EDEDED;
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  padding: 4px 38px;
  border-radius: 20px;
  margin-top: 8px;
}

.book-information__number {
  display: inline-block;
  color: #439EF9;
  font-size: 26px;
  line-height: 32px;
  margin-right: 4px;
}

.book-information__list {
  margin-top: 20px;
}

.book-information__item {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.75;
}

.book-point__heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #ECF5FE;
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  padding: 4px 38px;
  border-radius: 20px;
}

.book-point__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 40px;
}

.book-point__heading-secondary {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 2;
}

.book-point__text p {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
}
.book-point__text p:not(:first-of-type) {
  margin-top: 4px;
}

.book-point__number {
  display: inline-block;
  color: #439EF9;
  font-size: 48px;
  letter-spacing: normal;
  line-height: 1;
  margin-right: 4px;
}

.book-point__border {
  color: #002060;
  margin: 20px 0;
}

.book-point__table {
  width: 100%;
  margin-top: 20px;
}
.book-point__table tbody {
  display: grid;
  grid-template-columns: auto repeat(2, 106px);
  gap: 20px 50px;
}
.book-point__table tr {
  display: contents;
}
.book-point__table th {
  font-size: 20px;
  font-weight: 700;
  line-height: 2;
}

.book-point__button {
  width: 100%;
  margin-top: 40px;
}

.book-point__resister {
  margin-top: 40px;
}

.book-register {
  background: #EDEDED;
  padding: 26px 70px 32px;
  border-radius: 8px;
}

.book-register__text {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-indent: 0.05em;
  text-align: center;
}
.book-register__button {
  margin-top: 10px;
}

/* -----------------------------------------------
* book-archive
-------------------------------------------------- */
.book-archive {
  margin: 90px 0;
}

.book-archive__button {
  margin-top: 40px;
}

/* -----------------------------------------------
* book-text
-------------------------------------------------- */
.book-text__item {
  display: grid;
  grid-template-columns: auto 140px;
  gap: 40px;
  padding: 32px 0;
  border-bottom: 1px solid #EDEDED;
}

.book-text__title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.book-text__date-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 10px;
}

.book-text__date {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  margin-right: 20px;
}

.book-text__name {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.book-text__like {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  margin-top: 16px;
}

/* -----------------------------------------------
* book-archive
-------------------------------------------------- */
.book-archive__text {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  margin-top: 60px;
}

.book-archive__textarea {
  width: 100%;
  height: 48px;
  background: #fff;
  font-family: "Noto Sans JP", sans-serif;
  padding: 12px;
  border: 3px solid #002060;
  border-radius: 5px;
  -webkit-box-shadow: 0 4px #ccc;
          box-shadow: 0 4px #ccc;
  margin-top: 40px;
}

/* -----------------------------------------------
* login
-------------------------------------------------- */
.login {
  background: #FFF5CD;
  padding: 80px 0;
}

.login__inner {
  max-width: 480px;
  padding: 0 20px;
  margin: 0 auto;
}

.login__heading {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.login__list {
  margin-top: 80px;
}

.login__shelf-wrapper {
  overflow: scroll;
  padding: 0 20px;
  margin: 80px -20px 0;
}

.login__button {
  margin-top: 40px;
}

.login__text {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 16px;
  font-weight: 700;
  margin: 60px auto 0;
}
.login__text input[type=checkbox] {
  opacity: 0;
  position: relative;
  left: 14px;
}
.login__text input[type=checkbox] + span {
  display: inline-block;
  padding-left: 20px;
  position: relative;
  cursor: pointer;
}
.login__text input[type=checkbox] + span::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: #fff;
  border: 2px solid #002060;
  border-radius: 2px;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.login__text input[type=checkbox] + span::after {
  content: "";
  display: block;
  width: 12px;
  height: 6px;
  border-bottom: 3px solid #002060;
  border-left: 3px solid #002060;
  position: absolute;
  top: 5px;
  left: 2px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  opacity: 0;
}
.login__text input[type=checkbox]:checked + span::after {
  opacity: 1;
}
.login__text a {
  text-decoration: underline;
}
.login__text a:hover {
  text-decoration: none;
}

.login__note {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 4px;
}

/* -----------------------------------------------
* news
-------------------------------------------------- */
.news {
  padding: 60px 0;
}

.news__heading {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.news-contents {
  margin-top: 60px;
}

.news-contents__tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.news-contents__tab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 10px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  padding: 18px;
  border-radius: 20px 20px 0 0;
  cursor: pointer;
}
.news-contents__tab::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: center/contain no-repeat url(../img/mypage/icon-news1.svg);
}

.news-contents__tab--blue {
  background: #439EF9;
}

.news-contents__tab--orange {
  background: #FF7E00;
}

.news-contents__contents {
  font-family: "Noto Sans JP", sans-serif;
  background: #fff;
  padding: 20px 40px;
  border-style: solid;
  border-width: 3px;
  border-radius: 0 0 20px 20px;
}

.news-contents__contents--blue {
  border-color: #439EF9;
}

.news-contents__contents--orange {
  border-color: #FF7E00;
}

.news-contents__item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
}
.news-contents__item:not(:first-of-type) {
  border-top: 1px solid #EDEDED;
}

.news-contents__date {
  font-size: 14px;
  line-height: calc(48 / 14);
}

.news-contents__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-size: 14px;
  line-height: calc(48 / 14);
}

.news-contents__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 14px;
  letter-spacing: 0.5px;
  margin-left: auto;
}
.news-contents__link::after {
  content: "";
  display: inline-block;
  background: center/contain no-repeat url(../img/mypage/arrow-link.svg);
  width: 24px;
  height: 24px;
}

.news__pager {
  margin: 40px -20px 0;
}
.news__pager a, .news__pager span {
  color: #002060;
  border: 1px solid #002060;
}
.news__pager .pager__current {
  background: #002060;
  color: #fff;
}
.news__pager .pager__prev::after {
  background: center/contain url(../img/mypage/arrow-pager-deep-blue.svg);
}
.news__pager .pager__next::after {
  background: center/contain url(../img/mypage/arrow-pager-deep-blue.svg);
}

/* -----------------------------------------------
* terms-mainvisual
-------------------------------------------------- */
.terms-mainvisual {
  background: center/cover url(../img/mypage/background1.svg) #FFD500;
  padding: 60px 0;
}

.terms-mainvisual__heading {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

/* -----------------------------------------------
* terms-contents
-------------------------------------------------- */
.terms-contents {
  padding: 80px 0;
}

.terms-contents__inner {
  max-width: 840px;
  padding: 0 20px;
  margin: 0 auto;
}
.terms-contents__inner p {
  font-size: 16px;
  line-height: 1.75;
  margin-top: 1.5em;
}
.terms-contents__inner p.align-right {
  text-align: right;
}
.terms-contents__inner h2 {
  background: #002060;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  padding: 8px 16px;
  border-radius: 4px;
  margin-top: 1.5em;
}
.terms-contents__inner h3 {
  background: #ECF5FE;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  padding: 8px;
  border-left: 4px solid #002060;
  margin-top: 1.5em;
}
.terms-contents__inner h4 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  padding-bottom: 8px;
  border-bottom: 2px solid #002060;
  margin-top: 1.5em;
}
.terms-contents__inner img {
  display: block;
  width: 100%;
  margin-top: 1.5em;
}
.terms-contents__inner figcaption {
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  margin-top: 0.5em;
}
.terms-contents__inner table {
  width: 100%;
  margin-top: 1.5em;
}
.terms-contents__inner tr {
  border-right: 1px solid #002060;
  border-bottom: 1px solid #002060;
}
.terms-contents__inner th {
  background: #EDEDED;
  font-size: 16px;
  line-height: 1.5;
  padding: 16px;
  border-top: 1px solid #002060;
  border-left: 1px solid #002060;
}
.terms-contents__inner td {
  font-size: 16px;
  line-height: 1.5;
  padding: 16px;
  border-top: 1px solid #002060;
  border-left: 1px solid #002060;
}
.terms-contents__inner ul {
  margin-top: 1.5em;
}
.terms-contents__inner ul li {
  font-size: 16px;
  line-height: 1.75;
  padding-left: 1em;
  position: relative;
}
.terms-contents__inner ul li::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
}
.terms-contents__inner ol {
  margin-top: 1.5em;
}
.terms-contents__inner ol li {
  counter-increment: count;
  font-size: 16px;
  line-height: 1.75;
  padding-left: 1.75em;
  position: relative;
}
.terms-contents__inner ol li::before {
  content: counter(count) ".";
  position: absolute;
  top: 0;
  left: 0;
}
.terms-contents__inner ol li ol {
  margin-top: 0;
}
.terms-contents__inner ol li ol li {
  counter-increment: none;
  font-size: 16px;
  line-height: 1.75;
  padding-left: 1.75em;
  position: relative;
}
.terms-contents__inner ol li ol li::before {
  content: "(" attr(data-text) ")";
  position: absolute;
  top: 0;
  left: 0;
}
.terms-contents__inner hr {
  border: none;
  border-top: dashed 1px #002060;
  height: 1px;
  color: #FFF;
  margin-top: 1.5em;
}
.terms-contents__inner > *:first-child {
  margin-top: 0;
}

.terms-contents__image {
  display: block;
  text-align: center;
}
.terms-contents__image img {
  display: inline-block;
  width: 15%;
}
.terms-contents__image figcaption {
  font-size: 24px;
}

/* -----------------------------------------------
* responsive
-------------------------------------------------- */

@media (max-width: 1199px) {
  .xl-show {
    display: block;
  }
  .xl-hide {
    display: none;
  }
  .mypage-account__wrapper {
    grid-template-columns: none;
    padding: 20px;
  }
  .book-contents__wrapper {
    gap: 40px;
  }
}

@media (max-width: 991px) {
  .lg-show {
    display: block;
  }
  .lg-hide {
    display: none;
  }
  .examination-second {
    width: calc(100% - 40px);
    padding: 40px 20px;
  }
  .examination-second__wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .examination-second__close {
    right: 30px;
  }
  .account-modal {
    width: calc(100% - 40px);
    padding: 40px 20px;
  }
  .mypage-history-archive__select {
    width: calc(1 / 2 * 100% - 16px * 2);
  }
  .mypage-history-archive__item {
    width: calc(1 / 2 * 100% - 16px * 2);
  }
  .book-contents__wrapper {
    grid-template-columns: none;
  }
  .book-information__image {
    padding: 0;
  }
  .book-information__image-publisher {
    font-size: calc(16 / 360 * 100vw);
    top: 6.5em;
  }
  .book-information__image-title {
    width: 100%;
    font-size: calc(20 / 360 * 100vw);
    top: 8.75em;
  }
  .book-information__image-author {
    font-size: calc(16 / 360 * 100vw);
    bottom: 7.5em;
  }
  .book-information__caption {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .md-show {
    display: block;
  }
  .md-hide {
    display: none;
  }
  .form-list {
    grid-template-columns: none;
  }
  .form-item--twin {
    grid-column: auto;
  }
  .form-item--twin .form-description {
    grid-column: 1/3;
  }
  .form-item--twin .form-description:not(:first-of-type) {
    margin-top: 40px;
  }
  .form-item--twin .form-description:not(:first-of-type)::before {
    top: -32px;
    left: 50%;
    -webkit-transform: translateY(0) translateX(-50%) rotate(90deg);
            transform: translateY(0) translateX(-50%) rotate(90deg);
  }
  .heading {
    font-size: 32px;
  }
  .heading-secondary {
    font-size: 24px;
    gap: 10px;
  }
  .heading-tertiary {
    font-size: 24px;
    line-height: calc(32 / 24);
  }
  .circle {
    width: 40px;
    height: 40px;
    padding: 10px;
  }
  .circle + .heading-tertiary {
    margin-top: 10px;
  }
  .button {
    width: 100%;
  }
  .header__wrapper {
    padding-right: 10px;
  }
  .header__logo {
    height: 60px;
  }
  .header__buttons {
    gap: 4px;
  }
  .header__button {
    font-size: 14px;
    padding: 2px 12px;
  }
  .footer {
    padding: 40px 0;
  }
  .footer__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 0;
  }
  .footer__item {
    font-size: 14px;
  }
  .footer__copy {
    font-size: 14px;
    margin-top: 40px;
  }
  .examination {
    padding: 40px 0;
  }
  .examination__heading {
    font-size: 36px;
  }
  .examination-first {
    padding: 40px 20px;
    margin-top: 20px;
  }
  .examination-first__button {
    margin-top: 20px;
  }
  .examination-book {
    max-width: none;
  }
  .examination-first__button {
    margin-top: 20px;
  }
  .examination__button {
    margin-top: 20px;
  }
  .examination-second {
    max-height: calc(100vh - 100px);
    top: 80px;
  }
  .examination-choices {
    grid-template-columns: none;
    gap: 20px;
    width: 100%;
  }
  .examination-choices__heading {
    grid-column: 1/1;
  }
  .examination-choices__text {
    grid-column: 1/1;
  }
  .examination-choices__count {
    grid-column: 1/1;
  }
  .examination-choices__radio + span {
    width: 100%;
  }
  .examination-second__button {
    grid-column: 1/1;
  }
  .examination-second__link {
    grid-column: 1/1;
  }
  .examination-second__close {
    top: 90px;
  }
  .examination-question__box {
    max-height: 560px;
  }
  .examination-thanks {
    padding: 40px 20px;
    margin-top: 20px;
  }
  .examination-thanks__heading {
    font-size: 32px;
  }
  .examination-result {
    padding: 20px;
  }
  .examination-result__heading {
    margin-top: 10px;
  }
  .examination-result__text span {
    font-size: 20px;
    line-height: 32px;
  }
  .examination-result__text .colored-text {
    font-size: 24px;
  }
  .examination-point__text {
    font-size: 16px;
  }
  .examination-point__text--total {
    font-size: 16px;
  }
  .examination-point__number {
    font-size: 24px;
  }
  .examination-incorrect__list {
    margin-top: 20px;
  }
  .examination-incorrect__item:not(:first-of-type) {
    margin-top: 20px;
  }
  .examination-resister__wrapper {
    grid-template-columns: none;
    gap: 10px;
    padding: 20px;
  }
  .examination-resister__checkbox + span {
    line-height: calc(24 / 16);
  }
  .examination-resister__checkbox + span::before {
    top: 4px;
  }
  .examination-resister__checkbox + span::after {
    top: 8px;
  }
  .examination-resister__button {
    grid-row: auto;
    grid-column: auto;
  }
  .examination-interruption {
    padding: 40px 20px;
    margin-top: 20px;
  }
  .examination-interruption__heading {
    font-size: 32px;
  }
  .examination-interruption__text {
    margin-top: 20px;
  }
  .examination-interruption__small-text {
    margin-top: 20px;
  }
  .examination-interruption__button {
    margin-top: 20px;
  }
  .examination-countdown {
    padding: 40px 0;
    margin-top: 20px;
  }
  .examination-countdown__number {
    width: 100px;
    height: 100px;
    font-size: 48px;
  }
  .top-mainvisual {
    padding: 40px 0;
  }
  .top-mainvisual__inner {
    padding: 0 20px;
  }
  .top-mainvisual__image {
    height: 240px;
    margin-top: 20px;
    margin-right: -20px !important;
  }
  .top-mainvisual__content {
    position: static;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .top-mainvisual__logo {
    width: 120px;
  }
  .top-mainvisual__heading {
    font-size: 20px;
    margin-top: 20px;
  }
  .top-about {
    padding: 40px 0;
  }
  .top-about__text {
    margin-top: 20px;
  }
  .top-about__button {
    margin-top: 20px;
  }
  .top-function {
    padding: 40px 0;
  }
  .top-function__button {
    margin-top: 20px;
  }
  .function-introduction {
    margin-top: 40px;
  }
  .function-introduction__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
  }
  .function-example {
    margin-top: 40px;
  }
  .function-example__button {
    margin-top: 20px;
  }
  .function-recruitment {
    padding: 20px;
    margin-top: 40px;
  }
  .function-recruitment__heading {
    font-size: 24px;
  }
  .function-recruitment__text {
    font-size: 14px;
    margin-top: 16px;
  }
  .function-recruitment__button {
    margin-top: 16px;
  }
  .top-cta {
    padding: 40px 0;
  }
  .top-cta__wrapper {
    grid-template-columns: none;
  }
  .top-cta__content {
    padding-left: 20px;
  }
  .top-cta__heading {
    font-size: 24px;
  }
  .top-cta__text {
    font-size: 16px;
  }
  .top-cta__button-wrapper {
    margin-top: 20px;
  }
  .floating-banner {
    width: 120px;
  }
  .mypage-mainvisual {
    padding: 40px 0;
  }
  .mypage-mainvisual__heading {
    font-size: 32px;
  }
  .mypage-news {
    margin-top: 40px;
  }
  .mypage-news__tabs {
    grid-template-columns: none;
  }
  .mypage-news__tab {
    border-radius: 20px;
  }
  .mypage-news__contents {
    border-radius: 20px;
    padding: 20px;
    margin-top: 8px;
  }
  .mypage-account {
    grid-template-columns: none;
    margin-top: 20px;
  }
  .mypage-account__content {
    border-radius: 0 0 20px 20px;
    border-top: none;
    border-left: 3px solid #439EF9;
  }
  .account-modal__wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .account-modal__button {
    margin-top: 32px;
  }
  .mypage-profile {
    border-radius: 20px 20px 0 0;
    padding: 20px;
  }
  .mypage-point {
    grid-template-columns: 102px auto;
  }
  .mypage-point__circle {
    width: 102px;
    height: 102px;
    font-size: 36px;
  }
  .mypage-point__content {
    padding: 8px 0;
  }
  .mypage-point__text {
    font-size: 16px;
  }
  .mypage-point__number {
    font-size: 32px;
  }
  .mypage-point__bottom-text {
    font-size: 16px;
    line-height: 26px;
  }
  .mypage-point__bottom-number {
    font-size: 20px;
    line-height: 26px;
  }
  .mypage-ranking {
    padding: 20px;
  }
  .mypage-ranking__heading {
    font-size: 16px;
    line-height: 32px;
  }
  .mypage-ranking__text {
    font-size: 20px;
    line-height: 32px;
  }
  .mypage-ranking__number {
    font-size: 16px;
    padding: 8px 12px;
  }
  .mypage-public {
    padding: 12px 20px;
  }
  .mypage-public__text {
    font-size: 14px;
  }
  .mypage-transition {
    padding: 40px 0;
  }
  .mypage-history {
    padding: 40px 0;
  }
  .mypage-history__list {
    margin-top: 60px;
  }
  .mypage-history__shelf-wrapper {
    margin: 60px -20px 0;
  }
  .mypage-history__button {
    margin-top: 20px;
  }
  .mypage-book {
    padding: 40px 0;
  }
  .mypage-book__tabs {
    margin-top: 40px;
  }
  .mypage-book__tab {
    font-size: 16px;
  }
  .mypage-book__list {
    margin-top: 40px;
  }
  .mypage-book__button {
    margin-top: 20px;
  }
  .mypage-introduction {
    margin-top: 60px;
  }
  .mypage-introduction__item {
    grid-template-columns: none;
  }
  .mypage-introduction__close::before {
    width: 32px;
    height: 32px;
  }
  .mypage-history-archive__select {
    width: calc(100% - 16px * 2);
  }
  .mypage-history-archive__item {
    width: calc(100% - 16px * 2);
  }
  .mypage-examination {
    padding: 40px 0;
  }
  .mypage-examination__button {
    margin-top: 20px;
  }
  .examination-introduction {
    margin-top: 40px;
  }
  .examination-introduction__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
  }
  .contact {
    padding: 40px 0;
  }
  .contact__heading {
    font-size: 32px;
  }
  .contact__list {
    margin-top: 40px;
  }
  .contact__shelf-wrapper {
    margin: 60px -20px 0;
  }
  .contact__button {
    margin-top: 20px;
  }
  .contact__text {
    margin-top: 40px;
  }
  .book-mainvisual {
    padding: 40px 0;
  }
  .book-mainvisual__heading {
    font-size: 32px;
  }
  .book-contents {
    margin-top: 40px;
  }
  .book-information__button {
    font-size: 16px;
    line-height: 26px;
    padding: 4px 20px;
  }
  .book-information__text {
    font-size: 16px;
    line-height: 26px;
    padding: 4px 20px;
  }
  .book-information__number {
    font-size: 20px;
    line-height: 26px;
  }
  .book-information__list {
    margin-top: 10px;
  }
  .book-information__item {
    font-size: 14px;
  }
  .book-point__heading {
    font-size: 16px;
    line-height: 26px;
    padding: 4px 20px;
  }
  .book-point__wrapper {
    margin-top: 20px;
  }
  .book-point__heading-secondary {
    font-size: 14px;
  }
  .book-point__text p {
    font-size: 14px;
  }
  .book-point__number {
    font-size: 32px;
  }
  .book-point__table tbody {
    grid-template-columns: repeat(3, auto);
    gap: 10px 20px;
  }
  .book-point__table th {
    font-size: 14px;
  }
  .book-point__button {
    margin-top: 20px;
  }
  .book-register {
    padding: 16px 20px 20px;
  }
  .book-archive {
    margin: 40px 0;
  }
  .book-archive__button {
    margin-top: 20px;
  }
  .book-text__item {
    gap: 20px;
    padding: 24px 0;
  }
  .book-text__title {
    font-size: 14px;
  }
  .book-text__date {
    font-size: 14px;
    margin-right: 10px;
  }
  .book-text__name {
    font-size: 14px;
  }
  .book-text__like {
    font-size: 14px;
    margin-top: 10px;
  }
  .book-archive__text {
    font-size: 14px;
    margin-top: 40px;
  }
  .book-archive__textarea {
    margin-top: 20px;
  }
  .login {
    padding: 40px 0;
  }
  .login__heading {
    font-size: 32px;
  }
  .login__list {
    margin-top: 40px;
  }
  .login__shelf-wrapper {
    margin: 60px -20px 0;
  }
  .login__button {
    margin-top: 20px;
  }
  .login__text {
    margin-top: 40px;
  }
  .news {
    padding: 40px 0;
  }
  .news__heading {
    font-size: 32px;
  }
  .news-contents {
    margin-top: 40px;
  }
  .news-contents__tabs {
    grid-template-columns: none;
  }
  .news-contents__tab {
    border-radius: 20px;
  }
  .news-contents__contents {
    border-radius: 20px;
    padding: 20px;
    margin-top: 8px;
  }
  .terms-mainvisual {
    padding: 40px 0;
  }
  .terms-mainvisual__heading {
    font-size: 32px;
  }
  .terms-contents {
    padding: 40px 0;
  }
  .terms-contents__image img {
    width: 25%;
  }
}

@media (max-width: 575px) {
  .sm-show {
    display: block;
  }
  .sm-hide {
    display: none;
  }
}

@media (hover: hover) {
  .button-tertiary {
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
  }
  .button-tertiary:hover {
    opacity: 0.7;
  }
  .pager a {
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
  }
  .pager a:hover {
    opacity: 0.7;
  }
  .header__button {
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
  }
  .header__button:hover {
    opacity: 0.7;
  }
  .footer__item a {
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
  }
  .footer__item a:hover {
    opacity: 0.7;
  }
  .examination-link {
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
  }
  .examination-link:hover {
    opacity: 0.7;
  }
  .examination-link--previous:hover::before {
    left: -4px;
  }
  .examination-link--next:hover::before {
    right: -4px;
  }
  .examination-choices__radio + span:hover {
    bottom: -4px;
    -webkit-box-shadow: 0 0 #858C8C;
            box-shadow: 0 0 #858C8C;
  }
  .floating-banner a {
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
  }
  .floating-banner a:hover {
    opacity: 0.7;
  }
  .mypage-news__item a {
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
  }
  .mypage-news__item a:hover {
    opacity: 0.7;
  }
  .mypage-news__link {
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
  }
  .mypage-news__link:hover {
    opacity: 0.7;
  }
  .mypage-profile__link:hover {
    text-decoration: none;
  }
  .mypage-profile__name a {
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
  }
  .mypage-profile__name a:hover {
    opacity: 0.7;
  }
  .shelf__image a {
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
  }
  .shelf__image a:hover {
    opacity: 0.7;
  }
  .shelf__book a {
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
  }
  .shelf__book a:hover {
    opacity: 0.7;
  }
  .mypage-introduction__image a {
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
  }
  .mypage-introduction__image a:hover {
    opacity: 0.7;
  }
  .mypage-history-archive__image a {
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
  }
  .mypage-history-archive__image a:hover {
    opacity: 0.7;
  }
  .book-information__caption-name a {
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
  }
  .book-information__caption-name a:hover {
    opacity: 0.7;
  }
  .book-information__button {
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
  }
  .book-information__button:hover {
    opacity: 0.7;
  }
  .news-contents__item a {
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
  }
  .news-contents__item a:hover {
    opacity: 0.7;
  }
  .news-contents__link {
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
  }
  .news-contents__link:hover {
    opacity: 0.7;
  }
}

@media (max-width: 1100px) {
  .top-mainvisual__inner {
    padding-left: 20px;
  }
  .top-mainvisual__image {
    margin-right: 0;
  }
  .top-mainvisual__content {
    left: 20px;
  }
}