@charset "UTF-8";
/* ===============================================
# font-color
=============================================== */
/* ===============================================
# init css
=============================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: #4B4B4B;
  font-family: "Noto Sans JP", sans-serif;
}

html,
body {
  overflow-x: clip;
}

body {
  box-sizing: border-box;
  min-height: 100dvh;
  position: relative;
}

image {
  max-width: 100%;
}

fieldset {
  border: none;
}

select {
  border: 1px solid #E5E5E5;
  border-radius: 5px;
}

a:hover {
  text-decoration: none;
}

/* ===============================================
# font-size
=============================================== */
/* ===============================================
# z-index
=============================================== */
/* ===============================================
# min-width
=============================================== */
.btn, .btn--dialog, .btn--input input, .btn--white {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  height: auto;
  padding: 9px 20px;
  font-weight: 400;
  border-radius: 50px;
  font-size: 0.875rem;
  text-decoration: none;
  background-color: #D8D8D8;
  color: #4B4B4B;
  cursor: pointer;
  transition: opacity 0.3s;
}
.btn:hover, .btn--dialog:hover, .btn--input input:hover, .btn--white:hover {
  opacity: 0.7;
}
@media screen and (max-width: 480px) {
  .btn, .btn--dialog, .btn--input input, .btn--white {
    font-size: 0.75rem;
  }
}
.btn--white {
  background-color: #fff;
  border: 1px solid #4B4B4B;
}
.btn--list {
  display: block;
  width: 36px;
  height: 36px;
  background-image: url("../image/front/icon/list.svg");
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.btn--list input {
  display: none;
}
.btn--list:has(input:checked) {
  background-image: url("../image/front/icon/list_active.svg");
  background-color: #F8F8F8;
  border-radius: 5px;
}
.btn--card {
  display: inline-block;
  width: 36px;
  height: 36px;
  background-image: url("../image/front/icon/card.svg");
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.btn--card input {
  display: none;
}
.btn--card:has(input:checked) {
  background-image: url("../image/front/icon/card_active.svg");
  background-color: #F8F8F8;
  border-radius: 5px;
}
.btn--add_serial {
  position: relative;
  display: block;
  margin: 10px auto 0 auto;
  width: 30px;
  height: 30px;
  background-color: #4B4B4B;
  border-radius: 50px;
  border: none;
}
.btn--add_serial::after, .btn--add_serial::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 10%;
  background-color: #fff;
  transform: translate(-50%, -50%);
  z-index: 0;
  border-radius: 50px;
}
.btn--add_serial::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center;
}
.btn--add_serial:hover {
  opacity: 0.7;
  transition: opacity 0.3s;
}
@media screen and (max-width: 480px) {
  .btn--add_serial {
    margin: 11px auto 0 auto;
  }
}
.btn--dialog {
  padding: 5px 20px;
  font-size: 0.875rem;
}
.btn--dialog:focus-visible {
  outline: none;
}

.login__container {
  max-width: 500px;
  margin-block: 115px 150px;
  margin-inline: auto;
  width: 90%;
}
@media screen and (max-width: 1080px) {
  .login__container {
    margin: 50px auto 120px auto;
  }
}
.login__title {
  margin-bottom: 35.5px;
}
@media screen and (max-width: 480px) {
  .login__title {
    margin-bottom: 40px;
  }
}
.login__description {
  text-align: center;
  margin-bottom: 27px;
}
.login__description p {
  font-size: 0.9375rem;
}
.login__description br {
  display: none;
}
@media screen and (max-width: 768px) {
  .login__description {
    margin-bottom: 30px;
  }
  .login__description br {
    display: block;
  }
}
.login__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
}
.login__btninput[type=submit] {
  border: none;
}
.login__link {
  margin-block: 45px 85.5px;
  font-size: 1rem;
}
@media screen and (max-width: 768px) {
  .login__link {
    margin-block: 35px 75px;
  }
}
.login__input {
  -webkit-margin-after: 24px;
          margin-block-end: 24px;
}

.checkbox label, .checkbox--agreement label, .checkbox--search label {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.checkbox label input, .checkbox--agreement label input, .checkbox--search label input {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: relative;
  outline: none;
  border: none;
}
.checkbox label input::before, .checkbox--agreement label input::before, .checkbox--search label input::before {
  content: "";
  width: 30px;
  height: 30px;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  outline: 1px solid #E5E5E5;
  border-radius: 5px;
}
.checkbox label input:checked::before, .checkbox--agreement label input:checked::before, .checkbox--search label input:checked::before {
  content: "";
  outline: 1px solid #4B4B4B;
}
.checkbox label input:checked::after, .checkbox--agreement label input:checked::after, .checkbox--search label input:checked::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 30px;
  top: 10%;
  left: 28%;
  border-right: 5px solid #fff;
  border-bottom: 5px solid #fff;
  transform: scale(45%, 50%) translate(-50%, -50%) rotate(45deg);
}
.checkbox--search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 15px;
}
.checkbox--search label {
  margin-right: 0;
}
@media screen and (max-width: 768px) {
  .checkbox--search label {
    display: grid;
    grid-template-columns: 30px auto;
    gap: 10px;
    place-items: center;
  }
}
.checkbox--agreement {
  margin-top: 20px;
}
.checkbox--agreement label.error input::before {
  outline: 1px solid #D41E1E;
}
.checkbox--agreement .error__message {
  color: #D41E1E;
}

.search__container {
  padding-block: 36px 35px;
  padding-inline: 32px;
  border-radius: 5px;
  background-color: #F8F8F8;
}
@media screen and (max-width: 1250px) {
  .search__container {
    padding-block: 31px;
    padding-inline: 15px;
  }
}
.search__title {
  font-size: 1.25rem;
  font-weight: 400;
  text-align: center;
  margin-bottom: 20px;
}
@media screen and (max-width: 1250px) {
  .search__title {
    -webkit-margin-after: 15px;
            margin-block-end: 15px;
  }
}
@media screen and (max-width: 480px) {
  .search__title {
    font-size: 1.125rem;
  }
}
.search__body {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
@media screen and (max-width: 1250px) {
  .search__body {
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
  }
}
.search__menu {
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
  max-width: 890px;
  gap: 20px;
}
.search__menu dl {
  display: flex;
  gap: 5px;
  align-items: center;
}
@media screen and (max-width: 480px) {
  .search__menu dl {
    flex-direction: column;
    align-items: flex-start;
  }
}
.search__menu dt {
  width: 30%;
  max-width: 120px;
}
@media screen and (max-width: 480px) {
  .search__menu dt {
    width: 100%;
  }
}
.search__menu dd {
  -webkit-margin-end: 10px;
          margin-inline-end: 10px;
}
@media screen and (max-width: 1250px) {
  .search__menu {
    width: 100%;
    margin: 0 auto;
  }
  .search__menu dt {
    margin-bottom: 3px;
  }
  .search__menu dd {
    width: 90%;
    -webkit-margin-after: 10px;
            margin-block-end: 10px;
  }
  .search__menu dd:last-child {
    -webkit-margin-after: 0;
            margin-block-end: 0;
  }
}
@media screen and (max-width: 768px) {
  .search__menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin: 0 auto;
  }
  .search__menu dt {
    margin-bottom: 3px;
  }
  .search__menu dd {
    width: 100%;
    -webkit-margin-after: 20px;
            margin-block-end: 20px;
  }
  .search__menu dd:last-child {
    -webkit-margin-after: 0;
            margin-block-end: 0;
  }
}
.search__menu .input-search {
  width: 100%;
}
.search__btn {
  margin-left: 30px;
  height: 40px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 1250px) {
  .search__btn {
    margin-inline: auto;
    margin-block: 30px 0px;
  }
}
.search__btninput[type=submit] {
  border: none;
}
.search__result {
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  -webkit-margin-after: 50px;
          margin-block-end: 50px;
}
@media screen and (max-width: 768px) {
  .search__result {
    font-size: 0.875rem;
  }
}
@media screen and (max-width: 480px) {
  .search__result {
    flex-direction: column;
  }
}
.search__result__list {
  display: block;
  padding: 5px 10px 5px 15px;
  border-radius: 5px;
  color: #797979;
  border: #999 1px solid;
}
.search__result__list span {
  color: #797979;
}
.search__result__tag label {
  display: none;
}
.search__result__date .calendar input {
  border: none;
  font-size: 16px;
  width: 95px;
}
.search__result__date .calendar img {
  display: none;
}
.search__news {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-bottom: 50px;
}
@media screen and (max-width: 480px) {
  .search__news {
    gap: 10px;
    margin-bottom: 30px;
  }
}
.search__close {
  display: inline-block;
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: relative;
  vertical-align: sub;
  margin-left: 5px;
}
@media screen and (max-width: 768px) {
  .search__close {
    vertical-align: middle;
  }
}
.search__close__icon {
  content: "";
  display: block;
  height: 3px;
  width: 15px;
  border-radius: 3px;
  background-color: #797979;
  position: absolute;
  transform: rotate(45deg);
  top: 9px;
  right: 3px;
}
@media screen and (max-width: 768px) {
  .search__close__icon {
    top: 8px;
  }
}
.search__close__icon:before, .search__close__icon:after {
  content: "";
  display: block;
  height: 3px;
  width: 15px;
  border-radius: 3px;
  background-color: #797979;
  position: absolute;
}
.search__close__icon:before {
  opacity: 0;
}
.search__close__icon:after {
  top: 0px;
  transform: rotate(90deg);
}

.title {
  text-align: center;
  font-size: 1.375rem;
  font-weight: 400;
}
@media screen and (max-width: 480px) {
  .title {
    font-size: 1.25rem;
  }
}
.title--article {
  font-size: 1.5625rem;
  font-weight: 400;
  margin-bottom: 15px;
}
@media screen and (max-width: 768px) {
  .title--article {
    font-size: 1.25rem;
  }
}

.table-confirm {
  display: grid;
  grid-template-columns: auto 1fr;
  border-top: 1px solid #E5E5E5;
  font-size: 0.875rem;
}
@media screen and (max-width: 768px) {
  .table-confirm {
    display: block;
  }
  .table-confirm__name {
    border-bottom: none;
    padding-inline: 13px;
    padding-block: 10px 5px;
  }
  .table-confirm__content {
    padding-inline: 13px;
    padding-block: 0px 10px;
  }
}
.table-confirm__name, .table-confirm__content {
  padding: 18px;
  border-bottom: 1px solid #E5E5E5;
  max-width: 325px;
  word-break: break-all;
}
@media screen and (max-width: 768px) {
  .table-confirm__name, .table-confirm__content {
    padding: 18px 0;
    max-width: none;
  }
}
.table-confirm__name {
  padding-inline: 30px;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .table-confirm__name {
    padding-inline: 0px;
  }
}
.table-confirm__user_number_list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.table-info {
  display: grid;
  grid-template-columns: auto 1fr;
  border-top: 1px solid #E5E5E5;
  font-size: 1rem;
}
@media screen and (max-width: 768px) {
  .table-info {
    grid-template-columns: 1fr;
  }
}
.table-info__name, .table-info__content {
  border-bottom: 1px solid #E5E5E5;
  word-break: break-all;
}
@media screen and (max-width: 768px) {
  .table-info__name, .table-info__content {
    border-bottom: none;
  }
}
.table-info__name {
  padding: 18px 30px;
  font-weight: 700;
  font-size: 0.875rem;
}
@media screen and (max-width: 768px) {
  .table-info__name {
    padding: 10px 13px 5px 13px;
  }
}
.table-info__content {
  padding: 18px 10px;
}
@media screen and (max-width: 768px) {
  .table-info__content {
    padding: 0px 13px 10px 13px;
    border-bottom: 1px solid #E5E5E5;
  }
}

input {
  border: 1px solid #E5E5E5;
  border-radius: 5px;
  outline: none;
}
input:focus::-moz-placeholder {
  color: transparent;
}
input:focus::placeholder {
  color: transparent;
}
input::-moz-placeholder {
  color: #F8F8F8;
}
input::placeholder {
  color: #F8F8F8;
}
input[type=submit] {
  border: none;
}
input[type=button] {
  border: none;
}

.input-password .error__message {
  color: #D41E1E;
}
.input-password__inner {
  position: relative;
}
.input-password__inner input {
  padding: 10px;
  width: 100%;
  border: 1px solid #E5E5E5;
  border-radius: 5px;
  background-color: #fff;
  font-size: 1rem;
}
.input-password__inner input:focus {
  background-color: #F3F8FA;
}
.input-password__inner input.error {
  border: 1px solid #D41E1E;
  background-color: #FFF8F8;
}
.input-password__inner input::-moz-placeholder {
  color: #949494;
}
.input-password__inner input::placeholder {
  color: #949494;
}
.input-password__inner .eye {
  position: absolute;
  display: block;
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-image: url(../image/front/icon/eye_off.svg);
}
.input-password__inner .eye input {
  display: none;
}
.input-password__inner .eye:has(input:checked) {
  background-image: url(../image/front/icon/eye.svg);
}

.input-search input[type=text] {
  width: 100%;
  border: 1px solid #E5E5E5;
  border-radius: 5px;
  padding: 10px;
  font-size: 1rem;
}
.input-search input[type=text]:focus {
  border: 1px solid #4B4B4B;
}
@media screen and (max-width: 768px) {
  .input-search input[type=text] {
    max-width: none;
  }
}

.select__wrapper {
  position: relative;
  height: 40px;
  width: 100%;
}
.select__wrapper select {
  width: 100%;
  height: auto;
  outline: none;
  border: 1px solid #E5E5E5;
  padding: 10px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  font-size: 1rem;
}
.select__wrapper select:focus {
  outline: 1px solid #4B4B4B;
}
.select__wrapper::before {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  right: 3%;
  width: 20px;
  height: 20px;
  background-image: url(../image/front/icon/arrow.svg);
  background-repeat: no-repeat;
  transform: translate(0, -50%) rotate(90deg);
  pointer-events: none;
}

.summary__container {
  width: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 1250px) {
  .summary__container {
    width: 90%;
  }
}
.summary__num {
  font-size: 0.8125rem;
}
@media screen and (max-width: 768px) {
  .summary__num {
    font-size: 0.75rem;
  }
}
.summary__buttons {
  margin: 50px 0 30px 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  list-style: none;
}
.summary__buttons--display {
  display: flex;
  margin: 0 23px;
}
@media screen and (max-width: 1250px) {
  .summary__buttons {
    justify-content: space-between;
    margin: 60px 0 23px 0;
  }
  .summary__buttons--display {
    display: none;
  }
}
.summary__buttons--pulldown select {
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 400;
  border-radius: 5px;
  border: 1px solid #E5E5E5;
  background-color: #fff;
}
.summary__buttons--pulldown select:focus {
  outline: 1px solid #4B4B4B;
}
.summary__bottom {
  -webkit-margin-after: 66px;
          margin-block-end: 66px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .summary__bottom {
    -webkit-margin-after: 57px;
            margin-block-end: 57px;
  }
}

.support__container {
  max-width: 1250px;
  width: 90%;
  margin-inline: auto;
  margin-block: 60px 43px;
}
@media screen and (max-width: 768px) {
  .support__container {
    margin-block: 10px 28px;
  }
}
.support__wrapper {
  background-color: #fff;
  width: 100%;
  border-radius: 5px;
  -webkit-margin-before: 18px;
          margin-block-start: 18px;
}
@media screen and (max-width: 768px) {
  .support__wrapper {
    -webkit-margin-before: 12px;
            margin-block-start: 12px;
  }
}
.support__inner {
  max-width: 1100px;
  width: 90%;
  margin-inline: auto;
  padding-block: 70px;
}
@media screen and (max-width: 768px) {
  .support__inner {
    padding-block: 50px;
  }
}
.support__title {
  -webkit-margin-after: 50px;
          margin-block-end: 50px;
}
@media screen and (max-width: 768px) {
  .support__title {
    -webkit-margin-after: 40px;
            margin-block-end: 40px;
  }
}
.support__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding-block: 35px;
  background-color: #F8F8F8;
  border-radius: 5px;
  -webkit-margin-after: 35px;
          margin-block-end: 35px;
}
@media screen and (max-width: 768px) {
  .support__nav {
    -webkit-margin-after: 32px;
            margin-block-end: 32px;
  }
}
.support__description {
  font-size: 0.875rem;
  text-align: center;
  font-weight: 400;
  line-height: 25px;
  word-break: break-all;
}
@media screen and (max-width: 768px) {
  .support__description {
    font-size: 0.75rem;
    line-height: 22px;
  }
}
.support__description span {
  font-size: 1.0625rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .support__description span {
    font-size: 0.9375rem;
  }
}
.support__icon {
  width: 13px;
  height: 13px;
}
.support__lead {
  font-size: 1.0625rem;
  font-weight: 700;
  text-align: center;
  -webkit-margin-after: 15px;
          margin-block-end: 15px;
}
@media screen and (max-width: 768px) {
  .support__lead {
    font-size: 0.9375rem;
  }
}
.support__section {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 50px;
}

.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 20;
  height: 70px;
}
.header__inner {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: #fff;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 480px) {
  .header__inner {
    height: 55px;
  }
}
.header__inner--manual {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: #D8D8D8;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 480px) {
  .header__inner--manual {
    height: 55px;
  }
}
.header__logo {
  margin-left: 23px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.header__logo a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.header__logo a img {
  height: 50px;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (max-width: 480px) {
  .header__logo {
    margin-left: 15px;
    gap: 6px;
  }
  .header__logo a img {
    height: 35px;
  }
}
.header__title {
  font-size: 1.0625rem;
}
@media screen and (max-width: 480px) {
  .header__title {
    font-size: 0.875rem;
  }
}
.header__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  -webkit-margin-end: 30px;
          margin-inline-end: 30px;
}
@media screen and (max-width: 480px) {
  .header__menu {
    -webkit-margin-end: 15px;
            margin-inline-end: 15px;
  }
}
.header__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
@media screen and (max-width: 1250px) {
  .header__nav {
    display: none;
  }
}
.header__link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: opacity 0.3s;
}
.header__link:hover {
  opacity: 0.7;
}
.header__link.--current {
  border-bottom: 4px solid;
  transform: translateY(2px);
}
.header__link.--current:hover {
  opacity: 1;
}
.header__icon {
  width: 36px;
  height: 36px;
  transition: opacity 0.3s;
}
@media screen and (max-width: 480px) {
  .header__icon {
    width: 30px;
    height: 30px;
  }
}
.header__name {
  -webkit-padding-end: 5px;
          padding-inline-end: 5px;
}
.header__user-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}
.header__user-icon::before {
  content: "";
  width: 70px;
  height: 80px;
  background-color: transparent;
  position: fixed;
  top: 0;
  left: auto;
  right: 30px;
}
@media screen and (max-width: 1250px) {
  .header__user-icon::before {
    display: none;
  }
}
@media screen and (min-width: 1250px) {
  .header__user-icon:hover > .dialog-user {
    top: 70px;
    opacity: 1;
  }
}
.header__user-icon:hover > .header__icon {
  cursor: pointer;
  opacity: 0.7;
}
.header__search--pc {
  min-width: 202px;
  height: 60%;
  margin-right: 33px;
}
@media screen and (max-width: 768px) {
  .header__search--pc {
    display: none;
  }
}
.header__search--sp {
  display: none;
  width: 32px;
  height: 32px;
  margin-right: 30px;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .header__search--sp {
    display: block;
  }
}
@media screen and (max-width: 480px) {
  .header__search--sp {
    margin-right: 15px;
  }
}
.header__sp__nav {
  display: none;
}
@media screen and (max-width: 1250px) {
  .header__sp__nav {
    width: 100%;
    height: 55px;
    position: fixed;
    bottom: 0;
    text-align: center;
    background: #fff;
    padding: 1px 0 0 0;
    display: flex;
    justify-content: center;
    box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.1);
    align-items: center;
    gap: 15px;
  }
}
.header__sp__nav__hidden {
  display: none;
}
.header__sp__nav__hidden:checked ~ .header__sp__nav__other {
  display: block;
}
.header__sp__nav__other {
  display: none;
  position: absolute;
  left: 0;
  bottom: 46px;
  padding: 15px;
  background-color: #fff;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  width: 170px;
}
@media screen and (max-width: 768px) {
  .header__sp__nav__other {
    right: 0;
    left: auto;
  }
}
@media screen and (max-width: 480px) {
  .header__sp__nav__other {
    bottom: 56px;
    width: 120px;
  }
}
.header__sp__nav__other__inner {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.header__sp__nav__other_list {
  cursor: default;
}
.header__sp__name {
  display: inline;
}
@media screen and (max-width: 480px) {
  .header__sp__name {
    display: block;
    font-size: 10px;
  }
}
.header__sp__link {
  display: flex;
  position: relative;
  font-size: 0.875rem;
}
@media screen and (max-width: 480px) {
  .header__sp__link {
    width: 70px;
    justify-content: center;
  }
}
.header__sp__link a,
.header__sp__link label {
  display: flex;
  text-decoration: none;
  align-items: center;
  width: 100%;
}
@media screen and (max-width: 480px) {
  .header__sp__link a,
.header__sp__link label {
    flex-direction: column;
  }
}
.header__sp__link__other {
  position: relative;
  font-size: 0.875rem;
}
@media screen and (max-width: 480px) {
  .header__sp__link__other {
    justify-content: center;
  }
}
.header__sp__link__other a {
  display: flex;
  align-items: center;
  text-decoration: none;
}
@media screen and (max-width: 480px) {
  .header__sp__link__other a {
    flex-direction: column;
  }
}
.header__user__product {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin: 0px 20px 50px;
}
@media screen and (max-width: 480px) {
  .header__user__product {
    gap: 10px;
  }
}

.footer {
  background-color: #fff;
  bottom: 0;
  width: 100%;
  z-index: 5;
}
@media screen and (max-width: 1250px) {
  .footer {
    padding-bottom: 55px;
  }
}
.footer__body {
  border-top: 1px solid #E5E5E5;
  height: 40px;
  width: 100%;
  padding-inline: 17px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .footer__body {
    height: 90px;
    flex-direction: column;
    padding-inline: 20px;
    justify-content: center;
    gap: 16px;
  }
}
.footer__items {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: 15px;
}
@media screen and (max-width: 768px) {
  .footer__items {
    gap: 20px;
    height: auto;
  }
}
.footer__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: 6px;
  font-size: 0.875rem;
}
@media screen and (max-width: 768px) {
  .footer__nav {
    font-size: 0.75rem;
    gap: 5px;
    height: auto;
  }
}
.footer__copyright {
  font-size: 0.75rem;
}
.footer__nobody {
  padding-bottom: 0;
}

.rules__container {
  margin: 100px auto;
  width: 90%;
  max-width: 1200px;
}
@media screen and (max-width: 1080px) {
  .rules__container {
    margin: 70px auto;
  }
}
.rules__wysiwyg {
  font-size: 0.8125rem;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .rules__wysiwyg {
    font-size: 0.75rem;
  }
}
.rules__btn {
  margin-top: 50px;
}
.rules__btn .btn {
  margin-inline: auto;
  width: 143px;
  height: 40px;
}
@media screen and (max-width: 768px) {
  .rules__btn {
    margin-top: 40px;
  }
  .rules__btn .btn {
    margin-inline: auto;
    width: 132px;
    height: 36px;
  }
}
.rules__title {
  -webkit-margin-after: 50px;
          margin-block-end: 50px;
}
@media screen and (max-width: 768px) {
  .rules__title {
    -webkit-margin-after: 40px;
            margin-block-end: 40px;
  }
}

.info-look__container {
  margin: 60px auto 100px auto;
  max-width: 1250px;
  width: 90%;
}
@media screen and (max-width: 768px) {
  .info-look__container {
    margin-block: 10px 28px;
  }
}
.info-look__inner {
  -webkit-margin-before: 18px;
          margin-block-start: 18px;
  background-color: #fff;
  padding-block: 70px;
  border-radius: 5px;
}
@media screen and (max-width: 768px) {
  .info-look__inner {
    -webkit-margin-before: 12px;
            margin-block-start: 12px;
    padding-block: 50px;
  }
}
.info-look__body {
  width: 90%;
  margin-inline: auto;
}
.info-look__list {
  max-width: 740px;
}
.info-look__title {
  -webkit-margin-after: 50px;
          margin-block-end: 50px;
}
@media screen and (max-width: 768px) {
  .info-look__title {
    -webkit-margin-after: 40px;
            margin-block-end: 40px;
  }
}
.info-look__pager {
  -webkit-margin-before: 65px;
          margin-block-start: 65px;
}
@media screen and (max-width: 768px) {
  .info-look__pager {
    -webkit-margin-before: 40px;
            margin-block-start: 40px;
  }
}

.info-detail__container {
  max-width: 1250px;
  margin: 60px auto 52px auto;
  width: 90%;
}
@media screen and (max-width: 768px) {
  .info-detail__container {
    margin: 10px auto 36px auto;
  }
}
.info-detail__inner {
  -webkit-margin-before: 18px;
          margin-block-start: 18px;
  background-color: #fff;
  padding-block: 70px;
  border-radius: 5px;
}
@media screen and (max-width: 768px) {
  .info-detail__inner {
    -webkit-margin-before: 12px;
            margin-block-start: 12px;
    padding-block: 50px;
  }
}
.info-detail__body {
  max-width: 1100px;
  width: 90%;
  margin-inline: auto;
}
.info-detail__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-inline: 30px;
  -webkit-margin-after: 3px;
          margin-block-end: 3px;
}
@media screen and (max-width: 768px) {
  .info-detail__heading {
    padding-inline: 0;
    -webkit-margin-after: 9px;
            margin-block-end: 9px;
  }
}
.info-detail__tag {
  font-size: 0.75rem;
  display: block;
  text-align: center;
  flex-shrink: 0;
  width: 75px;
  height: 24px;
  padding-inline: 10px;
  padding-block: 1px 4px;
  border: 1px solid;
  border-radius: 50px;
  background-color: #fff;
  color: #949494;
  border-color: #949494;
}
.info-detail__tag.--important {
  background-color: #D41E1E;
  color: #fff;
  border-color: #D41E1E;
}
@media screen and (max-width: 768px) {
  .info-detail__tag {
    font-size: 0.625rem;
    width: 63px;
    height: 22px;
  }
}
.info-detail__date {
  display: block;
  font-size: 0.875rem;
}
@media screen and (max-width: 768px) {
  .info-detail__date {
    font-size: 0.75rem;
  }
}
.info-detail__title {
  font-size: 1.0625rem;
  font-weight: 400;
  padding-inline: 30px;
  margin-bottom: 35px;
}
@media screen and (max-width: 768px) {
  .info-detail__title {
    font-size: 0.9375rem;
    padding-inline: 0;
    margin-bottom: 30px;
  }
}
.info-detail__content {
  font-size: 0.875rem;
  padding-inline: 30px;
  padding-block: 30px;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
}
@media screen and (max-width: 768px) {
  .info-detail__content {
    padding-inline: 0;
    padding-block: 26px;
  }
}
.info-detail__btn {
  text-align: center;
  margin-top: 80px;
}
.info-detail__btn .btn {
  margin-inline: auto;
  width: 110px;
  height: 40px;
}
@media screen and (max-width: 768px) {
  .info-detail__btn {
    margin-top: 40px;
  }
  .info-detail__btn .btn {
    height: 36px;
  }
}

.pager ul {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}
.pager ul li {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 0.875rem;
}
.pager ul li a,
.pager ul li span {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #DAEAF3;
  color: #416EA4;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid;
  border-color: transparent;
}
.pager ul li span {
  background-color: #416EA4;
  color: #fff;
}
@media screen and (max-width: 480px) {
  .pager ul {
    gap: 3px;
  }
  .pager ul li {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 0.75rem;
  }
  .pager ul a,
.pager ul span {
    border-radius: 3px;
  }
}

.faq__container {
  margin: 100px auto;
  max-width: 735px;
  width: 90%;
}
@media screen and (max-width: 480px) {
  .faq__container {
    margin: 70px auto;
  }
}
.faq__title {
  -webkit-margin-after: 50px;
          margin-block-end: 50px;
}
@media screen and (max-width: 768px) {
  .faq__title {
    -webkit-margin-after: 40px;
            margin-block-end: 40px;
  }
}
.faq__list {
  list-style: none;
  border-top: 1px solid #E5E5E5;
}
.faq__list details {
  overflow: hidden;
}
.faq__list details[open] .open__button {
  background-image: url(../image/front/icon/minus.svg);
}
.faq__unit {
  display: block;
  border-bottom: 1px solid #E5E5E5;
  padding: 20px;
  cursor: pointer;
}
.faq__unit::-webkit-details-marker {
  display: none;
}
.faq__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.faq__head .open__button {
  display: block;
  width: 35px;
  height: 35px;
  background-image: url(../image/front/icon/plus.svg);
}
.faq__heading {
  font-size: 1rem;
  font-weight: 400;
  position: relative;
}
@media screen and (max-width: 480px) {
  .faq__heading {
    width: 85%;
    max-width: 280px;
    font-size: 0.875rem;
  }
}
.faq__text {
  padding: 20px;
  border-bottom: 1px solid #E5E5E5;
  background-color: #f9f9f9;
  font-size: 1rem;
}
@media screen and (max-width: 480px) {
  .faq__text {
    font-size: 0.875rem;
  }
}
.faq__pager {
  -webkit-margin-before: 50px;
          margin-block-start: 50px;
}
@media screen and (max-width: 768px) {
  .faq__pager {
    -webkit-margin-before: 40px;
            margin-block-start: 40px;
  }
}

.register__btn {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  gap: 20px;
}
.register__btn .btn {
  width: 125px;
  height: 40px;
}
.register__btn .btn--input input {
  width: 125px;
  height: 40px;
}
@media screen and (max-width: 480px) {
  .register__btn {
    margin: 40px 0 120px 0;
  }
  .register__btn .btn {
    width: 120px;
    height: 36px;
  }
  .register__btn .btn--input input {
    width: 120px;
    height: 36px;
  }
}

.register-input__container {
  margin-inline: auto;
  margin-block: 115px 162px;
  max-width: 610px;
  width: 90%;
}
@media screen and (max-width: 480px) {
  .register-input__container {
    margin-block: 72px 37px;
  }
}
.register-input__description {
  text-align: center;
  margin-block: 61px 35px;
  font-size: 0.9375rem;
}
@media screen and (max-width: 768px) {
  .register-input__description {
    text-align: start;
    margin-block: 30px 10px;
    font-size: 0.875rem;
  }
  .register-input__description br {
    display: none;
  }
}
.register-input__form {
  max-width: 500px;
  margin-inline: auto;
}
.register-input__input {
  -webkit-margin-after: 24px;
          margin-block-end: 24px;
}

.register-check__container {
  margin-inline: auto;
  margin-block: 117px 162px;
  max-width: 500px;
  width: 90%;
}
@media screen and (max-width: 480px) {
  .register-check__container {
    margin: 72px auto 37px auto;
  }
}
.register-check__description {
  text-align: center;
  margin-block: 77px 48px;
  font-size: 0.9375rem;
}
.register-check__description br {
  display: none;
}
@media screen and (max-width: 768px) {
  .register-check__description {
    text-align: start;
    margin-block: 30px 10px;
    font-size: 0.875rem;
  }
  .register-check__description br {
    display: block;
  }
}

.register-comp__container {
  margin-inline: auto;
  margin-block: 117px 162px;
  max-width: 500px;
  width: 90%;
}
@media screen and (max-width: 480px) {
  .register-comp__container {
    margin: 50px auto 126.5px auto;
  }
}
.register-comp__description {
  text-align: center;
  margin-block: 77px 48px;
  font-size: 0.9375rem;
}
.register-comp__description br {
  display: block;
}
@media screen and (max-width: 768px) {
  .register-comp__description {
    text-align: start;
    margin-block: 30px 10px;
    font-size: 0.875rem;
  }
}

.contract__container {
  margin: 60px auto 100px auto;
  width: 90%;
  max-width: 1250px;
}
@media screen and (max-width: 768px) {
  .contract__container {
    margin: 10px auto 28px auto;
  }
}
.contract__wrapper {
  width: 100%;
  margin-inline: auto;
  padding-block: 70px;
  -webkit-margin-before: 18px;
          margin-block-start: 18px;
  background-color: #fff;
  border-radius: 5px;
}
@media screen and (max-width: 768px) {
  .contract__wrapper {
    padding-block: 50px;
    -webkit-margin-before: 12px;
            margin-block-start: 12px;
  }
}
.contract__inner {
  max-width: 1100px;
  width: 90%;
  margin: 0 auto;
}
.contract__title {
  -webkit-margin-after: 50px;
          margin-block-end: 50px;
}
@media screen and (max-width: 768px) {
  .contract__title {
    -webkit-margin-after: 40px;
            margin-block-end: 40px;
  }
}
.contract__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 50px;
}
@media screen and (max-width: 768px) {
  .contract__list {
    gap: 40px;
  }
}
.contract__unit {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
}
@media screen and (max-width: 768px) {
  .contract__unit {
    gap: 10px;
  }
}
.contract__table {
  display: grid;
  grid-template-columns: 160px 1fr;
  border-bottom: 1px solid #E5E5E5;
}
@media screen and (max-width: 768px) {
  .contract__table {
    display: block;
  }
}
.contract__name {
  padding: 18px 30px;
  border-top: 1px solid #E5E5E5;
  word-break: break-all;
  font-size: 0.75rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .contract__name {
    font-weight: normal;
    padding: 10px 13px 0 10px;
  }
}
.contract__content {
  padding: 18px 10px;
  border-top: 1px solid #E5E5E5;
  word-break: break-all;
  font-size: 0.875rem;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .contract__content {
    padding: 5px 10px 13px 10px;
    border-top: none;
  }
}

.edit-input__container {
  margin: 30px auto;
  padding: 100px 0;
  width: 100%;
  max-width: 1200px;
  background-color: #fff;
}
@media screen and (max-width: 480px) {
  .edit-input__container {
    margin: 30px auto 120px auto;
    padding: 80px 0;
  }
}
.edit-input__inner {
  width: 90%;
  margin: 0 auto;
}
.edit-input__wrapper {
  font-size: 0.8125rem;
  margin: 0 auto;
  max-width: 474px;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .edit-input__wrapper {
    font-size: 0.75rem;
  }
}
.edit-input__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  gap: 20px;
}
@media screen and (max-width: 480px) {
  .edit-input__btn {
    gap: 10px;
  }
}
.edit-input__input {
  -webkit-margin-after: 24px;
          margin-block-end: 24px;
}

.edit-comp__container {
  margin: 30px auto;
  padding: 100px 0;
  width: 100%;
  max-width: 1200px;
  background-color: #fff;
}
@media screen and (max-width: 480px) {
  .edit-comp__container {
    margin: 30px auto 120px auto;
    padding: 80px 0;
  }
}
.edit-comp__inner {
  width: 90%;
  margin: 0 auto;
}
.edit-comp__description {
  text-align: center;
}
.edit-comp__description p {
  font-size: 0.8125rem;
}
@media screen and (max-width: 768px) {
  .edit-comp__description p {
    font-size: 0.75rem;
  }
}
.edit-comp__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}

.edit-check__container {
  margin: 30px auto;
  padding: 100px 0;
  width: 100%;
  max-width: 1200px;
  background-color: #fff;
}
@media screen and (max-width: 480px) {
  .edit-check__container {
    margin: 30px auto 120px auto;
    padding: 80px 0;
  }
}
.edit-check__inner {
  width: 90%;
  margin: 0 auto;
}
.edit-check__wrapper {
  font-size: 0.8125rem;
  margin: 0 auto;
  max-width: 474px;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .edit-check__wrapper {
    font-size: 0.75rem;
  }
}
.edit-check__description {
  font-size: 0.8125rem;
  margin-bottom: 30px;
}
.edit-check__description br {
  display: none;
}
@media screen and (max-width: 768px) {
  .edit-check__description {
    font-size: 0.75rem;
  }
  .edit-check__description br {
    display: block;
  }
}
.edit-check__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  gap: 20px;
}
@media screen and (max-width: 480px) {
  .edit-check__btn {
    gap: 10px;
  }
}

.calendar__wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 300px;
}
@media screen and (max-width: 768px) {
  .calendar__wrapper {
    max-width: none;
  }
}
.calendar__wrapper .calendar {
  display: inline-block;
  position: relative;
  height: 40px;
}
.calendar__wrapper .calendar input[type=text] {
  width: 100%;
  height: 40px;
  outline: none;
  border-radius: 5px;
  border: 1px solid #E5E5E5;
  padding: 10px;
  position: relative;
  font-size: 1rem;
}
.calendar__wrapper .calendar input[type=text]:focus {
  border: 1px solid #4B4B4B;
}
.calendar__wrapper .calendar img {
  display: none;
}

.error-page__container {
  margin: 117px auto 362px auto;
  max-width: 474px;
  width: 90%;
}
@media screen and (max-width: 480px) {
  .error-page__container {
    margin: 72px auto 120px auto;
  }
}
.error-page__description {
  margin: 50px 0px;
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 5px;
  width: 100%;
  font-size: 0.8125rem;
  text-align: center;
}
@media screen and (max-width: 480px) {
  .error-page__description {
    font-size: 0.75rem;
    margin: 30px 0px;
  }
}
.error-page__btn {
  display: flex;
  justify-content: center;
}

.error__message {
  color: #D41E1E;
}
.error--server {
  background-color: #FFF8F8;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
}
.error--server span {
  color: #D41E1E;
  font-size: 0.8125rem;
}
.error--server br {
  display: none;
}
@media screen and (max-width: 768px) {
  .error--server {
    width: 100%;
  }
  .error--server br {
    display: block;
  }
}

.password__container {
  margin: 60px auto 100px auto;
  max-width: 1250px;
  width: 90%;
}
@media screen and (max-width: 768px) {
  .password__container {
    margin: 10px auto 31px auto;
  }
}
.password__inner {
  -webkit-margin-before: 18px;
          margin-block-start: 18px;
  padding-block: 70px;
  width: 100%;
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  .password__inner {
    -webkit-margin-before: 12px;
            margin-block-start: 12px;
    padding-block: 50px;
  }
}
.password__body {
  width: 90%;
  margin-inline: auto;
  max-width: 500px;
}
.password__title {
  -webkit-margin-after: 50px;
          margin-block-end: 50px;
}
@media screen and (max-width: 768px) {
  .password__title {
    -webkit-margin-after: 40px;
            margin-block-end: 40px;
  }
}
.password__wrapper {
  font-size: 0.8125rem;
}
@media screen and (max-width: 768px) {
  .password__wrapper {
    font-size: 0.75rem;
  }
}
.password__grid {
  display: grid;
  grid-template-columns: auto auto 1fr;
  width: 90%;
  margin: 0 auto;
}
.password__grid .name {
  margin: 8px 10px 8px 0;
}
.password__grid .essential {
  margin: 8px 10px 8px 0;
  color: #D41E1E;
}
.password__grid .content input {
  width: 100%;
  padding: 8px 13px;
  margin-bottom: 20px;
  border-bottom: 1px solid #E5E5E5;
}
@media screen and (max-width: 768px) {
  .password__grid {
    display: block;
    width: 100%;
  }
  .password__grid .name {
    display: inline-block;
  }
  .password__grid .essential {
    display: inline-block;
  }
  .password__grid .content {
    display: block;
  }
}
.password__description {
  margin-inline: auto;
  -webkit-margin-after: 40px;
          margin-block-end: 40px;
  text-align: center;
  font-size: 0.8125rem;
}
.password__description br {
  display: none;
}
@media screen and (max-width: 768px) {
  .password__description {
    -webkit-margin-after: 40px;
            margin-block-end: 40px;
  }
  .password__description br {
    display: block;
  }
}
.password__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  gap: 20px;
}
.password__btn .btn {
  width: 125px;
  height: 40px;
}
.password__btn .btn--input input {
  width: 125px;
  height: 40px;
}
@media screen and (max-width: 768px) {
  .password__btn {
    margin-bottom: 80px;
    gap: 10px;
  }
  .password__btn .btn {
    width: 120px;
    height: 36px;
  }
  .password__btn .btn--input input {
    width: 120px;
    height: 36px;
  }
}

.password-forget__container {
  margin: 115px auto 150px auto;
  max-width: 740px;
  width: 90%;
}
@media screen and (max-width: 1080px) {
  .password-forget__container {
    margin: 50px auto 120px auto;
  }
}
.password-forget__description {
  width: 100%;
  margin: 70px auto 50px auto;
  font-size: 0.9375rem;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .password-forget__description {
    margin: 40px auto;
    font-size: 0.875rem;
  }
}
.password-forget__form {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
@media screen and (max-width: 480px) {
  .password-forget__form {
    display: block;
  }
}
.password-forget__name {
  font-size: 0.9375rem;
  flex-shrink: 0;
  width: auto;
}
@media screen and (max-width: 480px) {
  .password-forget__name {
    margin-bottom: 10px;
  }
}
.password-forget__input {
  flex: 1;
  -webkit-margin-after: 0;
          margin-block-end: 0;
}
.password-forget__input input {
  width: 100%;
  padding: 10px 8px;
}
.password-forget__btn {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.my-page__container {
  margin: 60px auto 100px auto;
  max-width: 1250px;
  width: 90%;
}
@media screen and (max-width: 768px) {
  .my-page__container {
    margin: 10px auto 30px auto;
  }
}
.my-page__wrapper {
  -webkit-margin-before: 18px;
          margin-block-start: 18px;
  display: flex;
  flex-direction: column;
  gap: 35px;
}
@media screen and (max-width: 768px) {
  .my-page__wrapper {
    -webkit-margin-before: 12px;
            margin-block-start: 12px;
    gap: 30px;
  }
}

.my-page-head__container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
@media screen and (max-width: 1080px) {
  .my-page-head__container {
    flex-direction: column;
  }
}
.my-page-head__unit {
  width: 100%;
  min-height: 105px;
  background-color: #fff;
  border-radius: 5px;
}
@media screen and (max-width: 480px) {
  .my-page-head__unit {
    min-height: 88px;
  }
}
.my-page-head__unit.--profile {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 115px;
}
@media screen and (max-width: 480px) {
  .my-page-head__unit.--profile {
    height: auto;
  }
}
.my-page-head__unit.--news {
  display: flex;
  align-items: center;
  position: relative;
}
.my-page-head__unit.--important {
  position: relative;
  height: 115px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .my-page-head__unit.--important {
    height: auto;
  }
}
.my-page-head__text {
  font-size: 0.875rem;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .my-page-head__text {
    font-size: 0.75rem;
  }
}
.my-page-head__body {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 480px) {
  .my-page-head__body {
    flex-direction: column;
    align-items: baseline;
  }
}
.my-page-head__info {
  display: flex;
  align-items: center;
  gap: 5px;
}
@media screen and (max-width: 480px) {
  .my-page-head__info {
    -webkit-margin-after: 15px;
            margin-block-end: 15px;
  }
}
.my-page-head__icon {
  width: 36px;
  height: 36px;
}
.my-page-head__name {
  font-size: 1rem;
  color: #4B4B4B;
  font-weight: 400;
}
.my-page-head__mail {
  font-size: 0.875rem;
  color: #949494;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .my-page-head__mail {
    font-size: 0.75rem;
  }
}
.my-page-head__wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 18px 0px 18px 24px;
  position: absolute;
  top: 0;
  left: 0;
  text-decoration: none;
  justify-content: space-between;
  align-items: center;
}
.my-page-head__wrapper:hover {
  background-color: #E8E8E8;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .my-page-head__wrapper {
    position: inherit;
  }
}
.my-page-head__news {
  color: #D41E1E;
  font-size: 0.875rem;
  font-weight: 400;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.my-page-head__nav {
  width: 50px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
.my-page-head__nav-btn {
  display: block;
  width: 36px;
  height: 36px;
}

.my-page-product__container {
  background-color: #fff;
  border-radius: 5px;
}
.my-page-product__wrapper {
  height: 100%;
  width: 90%;
  margin-inline: auto;
  padding-block: 49px 57px;
}
@media screen and (max-width: 768px) {
  .my-page-product__wrapper {
    padding-block: 29px;
  }
}
.my-page-product__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-margin-after: 14px;
          margin-block-end: 14px;
}
@media screen and (max-width: 768px) {
  .my-page-product__head {
    -webkit-margin-after: 10px;
            margin-block-end: 10px;
  }
}
.my-page-product__lead {
  display: flex;
  align-items: center;
  gap: 7px;
}
@media screen and (max-width: 768px) {
  .my-page-product__lead {
    gap: 5px;
  }
}
.my-page-product__icon {
  width: 36px;
  height: 36px;
}
@media screen and (max-width: 768px) {
  .my-page-product__icon {
    width: 27px;
    height: 27px;
  }
}
.my-page-product__title {
  font-size: 1.0625rem;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .my-page-product__title {
    font-size: 0.9375rem;
  }
}
.my-page-product__link {
  font-size: 0.875rem;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .my-page-product__link {
    font-size: 0.75rem;
  }
}
.my-page-product__body {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.my-page-product__unit {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.my-page-product__info {
  display: flex;
  flex-direction: column;
  padding: 30px;
  gap: 25px;
  border-radius: 5px;
  background-color: #D8D8D8;
}
.my-page-product__state {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.my-page-product__name {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #4B4B4B;
}
@media screen and (max-width: 768px) {
  .my-page-product__name {
    font-size: 0.9375rem;
  }
}
.my-page-product__plan {
  font-size: 0.875rem;
  font-weight: 400;
  color: #4B4B4B;
}
.my-page-product__plan span {
  font-weight: 700;
  color: #4B4B4B;
}
.my-page-product__number {
  font-size: 0.875rem;
  font-weight: 400;
  color: #4B4B4B;
}
.my-page-product__number span {
  font-weight: 700;
  color: #4B4B4B;
}
.my-page-product__list {
  list-style: none;
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .my-page-product__list {
    flex-direction: column;
    gap: 8px;
  }
}
.my-page-product__item {
  background-color: #fff;
  flex: 1;
  padding: 20px;
  border-radius: 5px;
}
@media screen and (max-width: 768px) {
  .my-page-product__item {
    text-align: center;
    width: 100%;
  }
}
.my-page-product__caption {
  font-size: 0.875rem;
  font-weight: 400;
  -webkit-margin-after: 5px;
          margin-block-end: 5px;
}
@media screen and (max-width: 768px) {
  .my-page-product__caption {
    font-size: 0.75rem;
  }
}
.my-page-product__content {
  font-size: 1.0625rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .my-page-product__content {
    font-size: 0.9375rem;
  }
}
.my-page-product__nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .my-page-product__nav {
    justify-content: center;
  }
}
.my-page-product__link-icon {
  display: inline-block;
  width: 13px;
  height: 13px;
}

.my-page-news__container {
  background-color: #fff;
  border-radius: 5px;
}
.my-page-news__wrapper {
  height: 100%;
  width: 90%;
  margin-inline: auto;
  padding-block: 36px 49px;
}
@media screen and (max-width: 768px) {
  .my-page-news__wrapper {
    padding-block: 29px 33px;
  }
}
.my-page-news__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-margin-after: 16px;
          margin-block-end: 16px;
}
@media screen and (max-width: 768px) {
  .my-page-news__head {
    -webkit-margin-after: 11px;
            margin-block-end: 11px;
  }
}
.my-page-news__lead {
  display: flex;
  align-items: center;
  gap: 7px;
}
@media screen and (max-width: 768px) {
  .my-page-news__lead {
    gap: 5px;
  }
}
.my-page-news__icon {
  width: 36px;
  height: 36px;
}
@media screen and (max-width: 768px) {
  .my-page-news__icon {
    width: 27px;
    height: 27px;
  }
}
.my-page-news__title {
  font-size: 1.0625rem;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .my-page-news__title {
    font-size: 0.9375rem;
  }
}
.my-page-news__title__important {
  font-size: 0.875rem;
  font-weight: 400;
}
.my-page-news__link {
  font-size: 0.875rem;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .my-page-news__link {
    font-size: 0.75rem;
  }
}
.my-page-news__body {
  width: 100%;
}
.my-page-news__list {
  width: 100%;
}
.my-page-news__important__wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  width: 90%;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .my-page-news__important__wrapper {
    padding-block: 29px 33px;
  }
}
.my-page-news__important__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.my-page-news__important__body {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .my-page-news__important__body {
    flex-direction: column;
    gap: 0;
    align-items: start;
  }
}

.my-page-info__container {
  background-color: #fff;
  border-radius: 5px;
}
.my-page-info__wrapper {
  height: 100%;
  width: 90%;
  margin-inline: auto;
  padding-block: 42px 54px;
}
@media screen and (max-width: 768px) {
  .my-page-info__wrapper {
    padding-block: 28px 47px;
  }
}
.my-page-info__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-margin-after: 22px;
          margin-block-end: 22px;
}
@media screen and (max-width: 768px) {
  .my-page-info__head {
    -webkit-margin-after: 19px;
            margin-block-end: 19px;
  }
}
.my-page-info__lead {
  display: flex;
  align-items: center;
  gap: 7px;
}
@media screen and (max-width: 768px) {
  .my-page-info__lead {
    gap: 5px;
  }
}
.my-page-info__icon {
  width: 36px;
  height: 36px;
}
@media screen and (max-width: 768px) {
  .my-page-info__icon {
    width: 27px;
    height: 27px;
  }
}
.my-page-info__title {
  font-size: 1.0625rem;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .my-page-info__title {
    font-size: 0.9375rem;
  }
}
.my-page-info__link {
  font-size: 0.875rem;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .my-page-info__link {
    font-size: 0.75rem;
  }
}
.my-page-info__body {
  width: 100%;
}
.my-page-info__list {
  list-style: none;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 20px;
}
@media screen and (max-width: 768px) {
  .my-page-info__list {
    gap: 30px;
    width: 260px;
    margin: 0 auto;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }
}
.my-page-info__item {
  max-width: 260px;
  flex: 1;
}
@media screen and (max-width: 768px) {
  .my-page-info__item {
    min-width: 190px;
    width: 100%;
    max-width: 260px;
  }
}
.my-page-info__nav {
  width: 100%;
  transition: opacity 0.3s;
}
.my-page-info__nav:hover {
  opacity: 0.7;
}
.my-page-info__thumbnail {
  width: 100%;
  -webkit-margin-after: 15px;
          margin-block-end: 15px;
  border-radius: 5px;
  max-width: 260px;
  max-height: 166px;
  aspect-ratio: 260/166;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (max-width: 768px) {
  .my-page-info__thumbnail {
    -webkit-margin-after: 10px;
            margin-block-end: 10px;
  }
}
.my-page-info__name {
  width: 100%;
  font-size: 0.875rem;
  font-weight: 700;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media screen and (max-width: 768px) {
  .my-page-info__name {
    font-size: 0.9375rem;
  }
}

.my-page-other__container {
  background-color: #fff;
  border-radius: 5px;
}
.my-page-other__wrapper {
  height: 100%;
  width: 90%;
  margin-inline: auto;
  padding-block: 42px 49px;
}
@media screen and (max-width: 768px) {
  .my-page-other__wrapper {
    padding-block: 23px 52px;
  }
}
.my-page-other__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-margin-after: 20px;
          margin-block-end: 20px;
}
@media screen and (max-width: 768px) {
  .my-page-other__head {
    -webkit-margin-after: 16px;
            margin-block-end: 16px;
  }
}
.my-page-other__lead {
  display: flex;
  align-items: center;
  gap: 7px;
}
@media screen and (max-width: 768px) {
  .my-page-other__lead {
    gap: 5px;
  }
}
.my-page-other__icon {
  width: 36px;
  height: 36px;
}
@media screen and (max-width: 768px) {
  .my-page-other__icon {
    width: 27px;
    height: 27px;
  }
}
.my-page-other__title {
  font-size: 1.0625rem;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .my-page-other__title {
    font-size: 0.9375rem;
  }
}
.my-page-other__body {
  width: 100%;
}
.my-page-other__list {
  list-style: none;
  width: 100%;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(4, 1fr);
}
@media screen and (max-width: 768px) {
  .my-page-other__list {
    justify-content: center;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 480px) {
  .my-page-other__list {
    justify-content: center;
    grid-template-columns: repeat(1, 1fr);
  }
}
.my-page-other__thumbnail {
  width: 100%;
  height: 100%;
  max-width: 260px;
  aspect-ratio: 260/100;
  border-radius: 5px;
  -o-object-fit: cover;
     object-fit: cover;
  vertical-align: middle;
}
.my-page-other__name {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1rem;
  font-weight: 400;
  white-space: nowrap;
}
.my-page-other__item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 260px;
  flex: 1;
}
@media screen and (max-width: 768px) {
  .my-page-other__item {
    min-width: 200px;
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
  }
}
.my-page-other__item__nav {
  display: block;
  position: relative;
  transition: opacity 0.3s;
  border: solid 1px #E5E5E5;
  border-radius: 5px;
}
.my-page-other__item__nav:hover {
  opacity: 0.7;
}
.my-page-other__item__title {
  font-size: 0.875rem;
}

.bread__crumbs {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  margin: 0 auto;
  white-space: nowrap;
  overflow-x: scroll;
  scrollbar-width: none;
  position: relative;
}
.bread__crumbs li {
  list-style-type: none;
  display: flex;
  align-items: center;
  font-size: 0.8125rem;
  height: 24px;
}
.bread__crumbs li::after {
  content: "";
  height: 24px;
  width: 24px;
  background-image: url(../image/front/icon/arrow.svg);
  background-repeat: no-repeat;
  margin: 0 7px;
}
.bread__crumbs li:last-child::after {
  display: none;
}
.bread__crumbs li a {
  font-size: 0.8125rem;
}
.bread__crumbs li a:hover {
  cursor: pointer;
}
@media screen and (max-width: 1080px) {
  .bread__crumbs {
    margin-top: 20px;
  }
  .bread__crumbs li {
    font-size: 0.75rem;
  }
  .bread__crumbs li a {
    font-size: 0.75rem;
  }
}
.bread__crumbs.manual {
  width: 100%;
  max-width: 100%;
}

.manual-top__head {
  background-color: #F9F9F9;
  height: 75px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .manual-top__head {
    display: none;
  }
}
.manual-top__crumbs {
  max-width: 1200px;
  width: 90%;
  margin-inline: auto;
}
.manual-top__container {
  margin: 60px auto 100px auto;
  width: 90%;
  max-width: 1250px;
}
@media screen and (max-width: 768px) {
  .manual-top__container {
    margin-block: 10px 28px;
    width: 90%;
  }
}
.manual-top__inner {
  width: 90%;
  margin: 0 auto;
}
.manual-top__wrapper {
  width: 100%;
  margin-inline: auto;
  padding-block: 70px;
  -webkit-margin-before: 18px;
          margin-block-start: 18px;
  background-color: #fff;
  border-radius: 5px;
}
@media screen and (max-width: 768px) {
  .manual-top__wrapper {
    padding-block: 50px;
    -webkit-margin-before: 12px;
            margin-block-start: 12px;
  }
}
.manual-top__icon {
  display: block;
  text-align: center;
  width: 62px;
  height: 54px;
  margin-inline: auto;
  -webkit-margin-after: 17px;
          margin-block-end: 17px;
}
.manual-top__title {
  -webkit-margin-after: 37px;
          margin-block-end: 37px;
}
@media screen and (max-width: 768px) {
  .manual-top__title {
    -webkit-margin-after: 40px;
            margin-block-end: 40px;
  }
}
.manual-top__search {
  max-width: 634px;
  width: 90%;
  height: 40px;
  margin-inline: auto;
  -webkit-margin-after: 84px;
          margin-block-end: 84px;
}
@media screen and (max-width: 768px) {
  .manual-top__search {
    -webkit-margin-after: 74px;
            margin-block-end: 74px;
  }
}
.manual-top__list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  justify-content: center;
}
.manual-top__list:has(> :nth-child(3))::before {
  content: "";
  display: block;
  width: 32%;
  order: 1;
}
@media screen and (max-width: 1080px) {
  .manual-top__list:has(> :nth-child(3))::before {
    width: 49%;
    min-width: auto;
  }
}
@media screen and (max-width: 480px) {
  .manual-top__list:has(> :nth-child(3))::before {
    width: 90%;
  }
}
.manual-top__list:has(> :nth-child(3))::after {
  content: "";
  display: block;
  width: 32%;
}
@media screen and (max-width: 1080px) {
  .manual-top__list:has(> :nth-child(3))::after {
    width: 49%;
    min-width: auto;
  }
}
@media screen and (max-width: 480px) {
  .manual-top__list:has(> :nth-child(3))::after {
    width: 90%;
  }
}
.manual-top__item {
  border: 1px solid #E5E5E5;
  width: 32%;
  border-radius: 5px;
}
@media screen and (max-width: 1080px) {
  .manual-top__item {
    width: 49%;
    min-width: auto;
  }
}
@media screen and (max-width: 480px) {
  .manual-top__item {
    width: 90%;
  }
}
.manual-top__link {
  text-decoration: none;
  transition: opacity 0.3s;
  padding: 20px 30px;
  display: block;
}
.manual-top__link:hover {
  opacity: 0.7;
}
.manual-top__name {
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  -webkit-margin-after: 10px;
          margin-block-end: 10px;
}
.manual-top__description {
  font-size: 1rem;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.manual-top__user_product {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-bottom: 50px;
}
@media screen and (max-width: 480px) {
  .manual-top__user_product {
    gap: 10px;
    margin-bottom: 30px;
  }
}

.manual-search {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #F2F2F2;
  border-radius: 50px;
  transition: opacity 0.3s;
}
.manual-search--head {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 50px;
  transition: opacity 0.3s;
  cursor: pointer;
}
.manual-search:hover {
  opacity: 0.7;
  cursor: pointer;
}
.manual-search__icon {
  height: 70%;
  margin-inline: 10px;
}
.manual-search__placeholder {
  font-size: 0.8125rem;
  color: #B8B8B8;
}
@media screen and (max-width: 768px) {
  .manual-search__placeholder {
    font-size: 0.75rem;
  }
}

.manual-modal {
  display: none;
  position: fixed;
  margin: auto;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
  z-index: 16;
  max-width: 976px;
  width: 90%;
  border-radius: 5px;
  background-color: #fff;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  border: none;
  height: 70vh;
}
.manual-modal::-webkit-scrollbar {
  display: none;
}
.manual-modal__detail {
  display: none;
  position: fixed;
  margin: auto;
  bottom: 0;
  right: 0;
  left: 0;
  top: 70px;
  z-index: 16;
  max-width: 976px;
  width: 90%;
  border-radius: 5px;
  background-color: #fff;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  border: none;
  height: 65vh;
}
.manual-modal__inner {
  max-width: 800px;
  width: 90%;
  margin-inline: auto;
  padding-block: 72px 102px;
}
@media screen and (max-width: 768px) {
  .manual-modal__inner {
    padding-block: 42px 77px;
  }
}
.manual-modal__form {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  max-width: 660px;
  width: 100%;
  margin-inline: auto;
  -webkit-margin-after: 50px;
          margin-block-end: 50px;
}
@media screen and (max-width: 768px) {
  .manual-modal__form {
    flex-direction: column;
    gap: 20px;
    -webkit-margin-after: 36px;
            margin-block-end: 36px;
  }
}
.manual-modal__search {
  position: relative;
  flex: 1;
  height: 40px;
}
.manual-modal__input input {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  background-color: #F8F8F8;
  padding: 10px 45px;
  font-size: 1rem;
}
.manual-modal__input input::-moz-placeholder {
  color: #B8B8B8;
  font-size: 1rem;
}
.manual-modal__input input::placeholder {
  color: #B8B8B8;
  font-size: 1rem;
}
.manual-modal__icon {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(7px, -50%);
  width: 32px;
  height: 32px;
}
.manual-modal__btn {
  flex-shrink: 0;
}
.manual-modal__list {
  list-style: none;
  width: 100%;
  border-top: 1px solid #E5E5E5;
}
.manual-modal__item {
  border-bottom: 1px solid #E5E5E5;
  padding-block: 20px;
}
.manual-modal__link {
  text-decoration: none;
  transition: opacity 0.3s;
}
.manual-modal__link:hover {
  opacity: 0.7;
}
.manual-modal__headline {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 1.125rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .manual-modal__headline {
    font-size: 0.9375rem;
  }
}
.manual-modal__description {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 0.8125rem;
  font-weight: 400;
  margin-block: 5px;
}
@media screen and (max-width: 768px) {
  .manual-modal__description {
    font-size: 0.75rem;
    margin-block: 15px;
  }
}
.manual-modal__publish {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 0.875rem;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .manual-modal__publish {
    gap: 10px;
    font-size: 0.75rem;
  }
}
.manual-modal__pager {
  -webkit-margin-before: 47px;
          margin-block-start: 47px;
}
@media screen and (max-width: 768px) {
  .manual-modal__pager {
    -webkit-margin-before: 78px;
            margin-block-start: 78px;
  }
}
.manual-modal__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 640px;
  width: 100%;
  margin-inline: auto;
  -webkit-margin-before: 77px;
          margin-block-start: 77px;
}
@media screen and (max-width: 768px) {
  .manual-modal__foot {
    -webkit-margin-before: 57px;
            margin-block-start: 57px;
  }
}
.manual-modal__nav {
  text-decoration: none;
  padding: 10px;
  border: 1px solid #E5E5E5;
  border-radius: 5px;
  font-size: 1.0625rem;
  font-weight: 700;
  width: 200px;
  text-align: center;
  transition: opacity 0.3s;
}
.manual-modal__nav:hover {
  opacity: 0.7;
}
@media screen and (max-width: 768px) {
  .manual-modal__nav {
    font-size: 0.9375rem;
    width: 155px;
  }
}
.manual-modal__background {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 15;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  overflow: hidden;
}

.manual-look__head--pc {
  background-color: #F9F9F9;
  height: 75px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .manual-look__head--pc {
    display: none;
  }
}
.manual-look__head--sp {
  display: none;
  background-color: #F9F9F9;
  height: 62px;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  justify-content: center;
}
.manual-look__head--sp::-webkit-scrollbar {
  display: none;
}
@media screen and (max-width: 768px) {
  .manual-look__head--sp {
    display: flex;
    align-items: flex-end;
  }
}
.manual-look__crumbs {
  max-width: 1000px;
  width: 90%;
  margin-inline: auto;
}
.manual-look__nav {
  display: flex;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 10px;
  list-style: none;
  height: 100%;
}
.manual-look__pageLink {
  display: block;
  padding: 10px 12px;
  width: 100%;
  height: 100%;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #8D8D8D;
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  transition: opacity 0.3s;
}
.manual-look__pageLink:hover {
  opacity: 0.7;
}
.manual-look__pageLink.--current {
  color: #4B4B4B;
}
.manual-look__pageLink.--current::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #4B4B4B;
}
.manual-look__container {
  margin: 30px auto 122px auto;
  width: 90%;
  max-width: 1000px;
}
.manual-look__return {
  display: none;
}
@media screen and (max-width: 768px) {
  .manual-look__return {
    display: block;
    width: 40px;
    height: 40px;
    background-color: #E2E2E2;
    padding: 10px;
    border-radius: 50px;
    -webkit-margin-after: 20px;
            margin-block-end: 20px;
    transition: opacity 0.3s;
  }
  .manual-look__return:hover {
    opacity: 0.7;
  }
  .manual-look__return img {
    width: 100%;
    height: 100%;
  }
}
.manual-look__title {
  font-size: 1.375rem;
  font-weight: 700;
  -webkit-margin-after: 15px;
          margin-block-end: 15px;
}
@media screen and (max-width: 768px) {
  .manual-look__title {
    font-size: 1.25rem;
  }
}
.manual-look__lead {
  font-size: 0.875rem;
  font-weight: 400;
  -webkit-margin-after: 100px;
          margin-block-end: 100px;
}
@media screen and (max-width: 768px) {
  .manual-look__lead {
    font-size: 0.75rem;
    -webkit-margin-after: 63px;
            margin-block-end: 63px;
  }
}
.manual-look__list {
  list-style: none;
  width: 100%;
  border-top: 1px solid #E5E5E5;
}
.manual-look__item {
  border-bottom: 1px solid #E5E5E5;
  padding-block: 20px;
}
.manual-look__link {
  text-decoration: none;
  transition: opacity 0.3s;
}
.manual-look__link:hover {
  opacity: 0.7;
}
.manual-look__headline {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 1.125rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .manual-look__headline {
    font-size: 0.9375rem;
  }
}
.manual-look__description {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 0.875rem;
  font-weight: 400;
  margin-block: 5px;
}
@media screen and (max-width: 768px) {
  .manual-look__description {
    font-size: 0.75rem;
    margin-block: 15px;
  }
}
.manual-look__publish {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 0.875rem;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .manual-look__publish {
    gap: 10px;
    font-size: 0.75rem;
  }
}
.manual-look__pager {
  -webkit-margin-before: 97px;
          margin-block-start: 97px;
}
@media screen and (max-width: 768px) {
  .manual-look__pager {
    -webkit-margin-before: 86px;
            margin-block-start: 86px;
  }
}

.manual-toc {
  flex-shrink: 0;
}
.manual-toc__body {
  position: fixed;
  top: 220px;
  right: 30px;
  width: 210px;
  padding-left: 1rem;
}
@media screen and (max-width: 1250px) {
  .manual-toc__body {
    position: static;
    padding: 30px;
    width: 100%;
    border-radius: 5px;
    background-color: #FAFAFA;
    margin-bottom: 50px;
  }
}
.manual-toc__title {
  font-size: 1.125rem;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .manual-toc__title {
    font-size: 0.8125rem;
  }
}
.manual-toc__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.manual-toc__list li {
  font-size: 0.9375rem;
}
.manual-toc__list li a {
  opacity: 0.7;
  font-weight: 400;
  text-decoration: none;
  transition: all 0.3s;
}
.manual-toc__list li a:hover {
  font-weight: 700;
  opacity: 1;
}
@media screen and (max-width: 1080px) {
  .manual-toc__list {
    gap: 15px;
  }
  .manual-toc__list li {
    font-size: 0.8125rem;
  }
}

.manual-detail__container {
  margin: 0 auto;
  word-break: break-all;
  width: calc(100% - 300px);
  padding: 50px;
  max-height: calc(100dvh - 180px);
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.manual-detail__container::-webkit-scrollbar {
  display: none;
}
@media screen and (max-width: 1250px) {
  .manual-detail__container {
    max-height: none;
  }
}
@media screen and (max-width: 480px) {
  .manual-detail__container {
    padding: 0 20px 50px;
  }
}
.manual-detail__wrapper {
  width: 100%;
  max-width: 620px;
}
@media screen and (max-width: 1250px) {
  .manual-detail__wrapper {
    padding: 0px;
    width: auto;
    margin: 0 auto;
  }
}
.manual-detail__return {
  display: none;
}
@media screen and (max-width: 768px) {
  .manual-detail__return {
    display: block;
    width: 40px;
    height: 40px;
    background-color: #E2E2E2;
    padding: 10px;
    border-radius: 50px;
    -webkit-margin-after: 20px;
            margin-block-end: 20px;
    transition: opacity 0.3s;
  }
  .manual-detail__return:hover {
    opacity: 0.7;
  }
  .manual-detail__return img {
    width: 100%;
    height: 100%;
  }
}
.manual-detail__body {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
@media screen and (max-width: 1250px) {
  .manual-detail__body {
    flex-direction: column-reverse;
  }
}
.manual-detail__section {
  margin: 0 0 50px 0;
}
@media screen and (max-width: 480px) {
  .manual-detail__section {
    margin: 35px 0 65px 0;
  }
}
.manual-detail__title {
  font-weight: 700;
}
.manual-detail__article {
  display: flex;
  flex-direction: column;
  gap: 50px;
}
@media screen and (max-width: 768px) {
  .manual-detail__article {
    gap: 35px;
  }
}
.manual-detail__heading {
  font-size: 1.2rem;
  margin-bottom: 15px;
}
.manual-detail__date {
  font-size: 0.875rem;
}
.manual-detail__date time {
  margin-left: 10px;
}
@media screen and (max-width: 768px) {
  .manual-detail__date {
    font-size: 0.75rem;
  }
}
.manual-detail__description {
  font-size: 1rem;
  margin-top: 50px;
}
@media screen and (max-width: 768px) {
  .manual-detail__description {
    margin-top: 30px;
  }
}
.manual-detail__btn {
  -webkit-margin-after: 170px;
          margin-block-end: 170px;
}
.manual-detail__btn .btn--white {
  width: 227px;
  height: 40px;
}
@media screen and (max-width: 480px) {
  .manual-detail__btn {
    margin-inline: auto;
    -webkit-margin-after: 70px;
            margin-block-end: 70px;
    text-align: center;
  }
  .manual-detail__btn .btn--white {
    margin-inline: auto;
    width: 203px;
    height: 40px;
  }
}
.manual-detail__toPageTop {
  display: none;
  position: fixed;
  bottom: 45px;
  right: 40px;
  z-index: 6;
}
@media screen and (max-width: 1250px) {
  .manual-detail__toPageTop {
    bottom: 70px;
    right: 20px;
  }
}
.manual-detail__toPageTopInner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background-color: #787878;
}
.manual-detail__toPageTopInner img {
  width: 25px;
  height: 25px;
}
@media screen and (max-width: 1250px) {
  .manual-detail__toPageTopInner {
    width: 40px;
    height: 40px;
    border-radius: 20px;
  }
}
.manual-detail__wysiwyg .se-component > figure {
  padding-bottom: 10px !important;
}

.manual-sidebar__container {
  width: 300px;
  background-color: #F2F2F2;
  max-height: calc(100dvh - 180px);
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.manual-sidebar__container::-webkit-scrollbar {
  display: none;
}
@media screen and (max-width: 1250px) {
  .manual-sidebar__container {
    position: fixed;
    top: 140px;
    background: #fff;
    height: calc(100dvh - 195px);
    transform: translateX(-100vw);
    transition: all 0.3s;
    display: block !important;
    z-index: 15;
    overflow-y: auto;
  }
  .manual-sidebar__container.js-isShow {
    transform: translateX(0);
  }
}
@media screen and (max-width: 480px) {
  .manual-sidebar__container {
    top: 110px;
    height: calc(100dvh - 165px);
    max-height: calc(100dvh - 165px);
  }
}
.manual-sidebar__background {
  display: none;
}
@media screen and (max-width: 1080px) {
  .manual-sidebar__background {
    display: block;
    position: fixed;
    background: rgba(0, 0, 0, 0.3);
    height: calc(100dvh - 55px);
    transform: translateX(-100vw);
    width: 100vw;
    transition: opacity 0.3s;
    cursor: pointer;
    opacity: 0;
    z-index: 14;
    overflow-y: auto;
  }
  .manual-sidebar__background.js-isShow {
    opacity: 1;
    transform: translateX(0);
  }
}
.manual-sidebar__details {
  overflow: hidden;
}
.manual-sidebar__details[open] .manual-sidebar__summary .manual-sidebar__inner .open__button {
  background-image: url(../image/front/icon/minus_white.svg);
}
.manual-sidebar__summary {
  cursor: pointer;
  display: block;
  border-bottom: 1px solid #E5E5E5;
  padding: 10px 20px;
}
.manual-sidebar__summary::-webkit-details-marker {
  display: none;
}
.manual-sidebar__iframe {
  border: none;
}
.manual-sidebar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.manual-sidebar__inner span {
  font-size: 0.8125rem;
  font-weight: 700;
  position: relative;
  color: #fff;
}
.manual-sidebar__inner .open__button {
  display: block;
  width: 25px;
  height: 25px;
  background-image: url(../image/front/icon/plus_white.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.manual-sidebar__group {
  list-style: none;
}
.manual-sidebar__list {
  list-style: none;
}
.manual-sidebar__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  transition: all 0.3s;
}
.manual-sidebar__content:hover {
  background-color: #F2F2F2;
}
.manual-sidebar__text {
  font-size: 0.8125rem;
}

.manual-head {
  top: 70px;
  z-index: 19;
}
@media screen and (max-width: 480px) {
  .manual-head {
    top: 55px;
  }
  .manual-head .header__logo {
    margin-left: 55px;
  }
}
.manual-head__header__logo {
  margin-left: 33px;
  display: flex;
  align-items: center;
  gap: 10px;
}
@media screen and (max-width: 1250px) {
  .manual-head__header__logo {
    margin-left: 70px;
  }
}
@media screen and (max-width: 480px) {
  .manual-head__header__logo {
    margin-left: 55px;
  }
}
.manual-head__head--pc {
  background-color: #F9F9F9;
  height: 75px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .manual-head__head--pc {
    display: none;
  }
}
.manual-head__head--sp {
  display: none;
  background-color: #F9F9F9;
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow: auto;
}
.manual-head__head--sp::-webkit-scrollbar {
  display: none;
}
@media screen and (max-width: 768px) {
  .manual-head__head--sp {
    display: flex;
    align-items: flex-end;
  }
}
.manual-head__crumbs {
  width: 90%;
  margin-inline: auto;
}
.manual-head__crumbs--detail {
  max-width: none;
  width: 90%;
  margin-inline: auto;
}
.manual-head__nav {
  display: flex;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 10px;
  list-style: none;
  height: 100%;
}
.manual-head__pageLink {
  display: block;
  padding: 10px 12px;
  width: 100%;
  height: 100%;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #8D8D8D;
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  transition: opacity 0.3s;
}
.manual-head__pageLink:hover {
  opacity: 0.7;
}
.manual-head__pageLink.--current {
  color: #4B4B4B;
}
.manual-head__pageLink.--current::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #4B4B4B;
}
.manual-head__menu--sp {
  display: none;
  cursor: pointer;
}
@media screen and (max-width: 1250px) {
  .manual-head__menu--sp {
    position: fixed;
    top: 70px;
    left: 0;
    display: flex;
    height: 70px;
    width: 70px;
    justify-content: center;
    align-items: center;
    z-index: 90;
  }
  .manual-head__menu--sp span, .manual-head__menu--sp span:before, .manual-head__menu--sp span:after {
    content: "";
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #4B4B4B;
    position: absolute;
  }
  .manual-head__menu--sp span:before {
    bottom: 8px;
  }
  .manual-head__menu--sp span:after {
    top: 8px;
  }
  .manual-head__menu--sp.js-isShow span, .manual-head__menu--sp.js-isShow span:before, .manual-head__menu--sp.js-isShow span:after {
    content: "";
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #4B4B4B;
    position: absolute;
  }
  .manual-head__menu--sp.js-isShow span {
    transform: rotate(45deg);
  }
  .manual-head__menu--sp.js-isShow span:before {
    opacity: 0;
  }
  .manual-head__menu--sp.js-isShow span:after {
    top: 0px;
    transform: rotate(90deg);
  }
}
@media screen and (max-width: 480px) {
  .manual-head__menu--sp {
    top: 55px;
    height: 55px;
    width: 55px;
  }
}

.main--default {
  padding: 70px 0 40px 0;
  min-height: calc(100dvh - 40px);
}
@media screen and (max-width: 1250px) {
  .main--default {
    padding: 70px 0 95px 0;
  }
}
@media screen and (max-width: 768px) {
  .main--default {
    padding: 70px 0 145px 0;
  }
}
@media screen and (max-width: 480px) {
  .main--default {
    padding: 55px 0 145px 0;
  }
}
.main--aside {
  padding: 140px 0 0 0;
  min-height: calc(100dvh - 40px);
  display: flex;
}
.main--aside aside {
  flex-shrink: 0;
}
@media screen and (max-width: 1080px) {
  .main--aside aside {
    display: none;
  }
}
.main--aside article {
  flex: 1;
}
@media screen and (max-width: 1250px) {
  .main--aside {
    padding: 140px 0 0 0;
    position: relative;
  }
}
@media screen and (max-width: 768px) {
  .main--aside {
    padding: 110px 0 0 0;
  }
}

.wysiwyg {
  word-break: break-all;
  /*
  インデントの深さを基にol,ulのlist-styleが変化
  ol > ul > olとul > ul > olのスタイルが当たっていないけどこれは仕様？
  */
}
.wysiwyg div {
  font-size: 1em;
  margin: 0;
  padding: 0;
}
.wysiwyg p {
  font-size: 1em;
  margin-bottom: 20px;
  color: unset;
}
.wysiwyg strong {
  font-weight: bolder;
  color: unset;
}
.wysiwyg u {
  text-decoration: underline;
  color: unset;
}
.wysiwyg del {
  text-decoration: line-through;
  color: unset;
}
.wysiwyg sub {
  bottom: -0.25em;
}
.wysiwyg sup {
  top: -0.5em;
  color: unset;
}
.wysiwyg code {
  font-family: monospace;
  color: #666;
  background-color: rgba(27, 31, 35, 0.05);
  border-radius: 6px;
  padding: 0.2em 0.4em;
}
.wysiwyg pre {
  display: block;
  color: #666;
  background-color: #f9f9f9;
  padding: 8px;
  border: 1px solid #e1e1e1;
  border-radius: 2px;
  font-family: monospace;
  max-height: 400px;
  overflow: auto;
  scrollbar-width: thin;
  margin: 1em 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.wysiwyg hr {
  margin-top: 20px;
  margin-bottom: 20px;
}
.wysiwyg hr.__se__solid {
  border-style: solid none none;
}
.wysiwyg hr.__se__dashed {
  border-style: dashed none none;
}
.wysiwyg hr.__se__dotted {
  border-style: dotted none none;
}
.wysiwyg h1,
.wysiwyg h2,
.wysiwyg h3,
.wysiwyg h4,
.wysiwyg h5,
.wysiwyg h6 {
  font-family: inherit;
  font-weight: 700;
  line-height: 1.1;
  color: inherit;
}
.wysiwyg h1 {
  font-size: 2em;
  -webkit-margin-before: 0.67em;
          margin-block-start: 0.67em;
  -webkit-margin-after: 0.67em;
          margin-block-end: 0.67em;
}
.wysiwyg h2 {
  font-size: 1.5em;
  -webkit-margin-before: 0.83em;
          margin-block-start: 0.83em;
  -webkit-margin-after: 0.83em;
          margin-block-end: 0.83em;
  border-bottom: 1px solid #eee;
  padding: 5px 0 10px;
}
.wysiwyg h3 {
  font-size: 1.17em;
  -webkit-margin-before: 1em;
          margin-block-start: 1em;
  -webkit-margin-after: 1em;
          margin-block-end: 1em;
}
.wysiwyg h4 {
  font-size: 1em;
  -webkit-margin-before: 1.33em;
          margin-block-start: 1.33em;
  -webkit-margin-after: 1.33em;
          margin-block-end: 1.33em;
}
.wysiwyg h5 {
  font-size: 0.83em;
  -webkit-margin-before: 1.67em;
          margin-block-start: 1.67em;
  -webkit-margin-after: 1.67em;
          margin-block-end: 1.67em;
}
.wysiwyg h6 {
  font-size: 0.67em;
  -webkit-margin-before: 2.33em;
          margin-block-start: 2.33em;
  -webkit-margin-after: 2.33em;
          margin-block-end: 2.33em;
}
.wysiwyg blockquote {
  display: block;
  font-family: inherit;
  font-size: inherit;
  color: #999;
  -webkit-margin-before: 1em;
          margin-block-start: 1em;
  -webkit-margin-after: 1em;
          margin-block-end: 1em;
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  -webkit-margin-end: 0;
          margin-inline-end: 0;
  padding: 0 5px 0 20px;
  border: solid #b1b1b1;
  border-width: 0 0 0 5px;
}
.wysiwyg img {
  width: 100%;
  max-width: 620px;
}
.wysiwyg iframe {
  width: 100%;
  max-width: 620px;
  aspect-ratio: 16/9;
}
.wysiwyg a {
  text-decoration: none;
  color: #004ccf;
}
.wysiwyg a:hover {
  cursor: pointer;
  color: #0093ff;
  text-decoration: underline;
}
.wysiwyg ol {
  list-style-position: outside;
  list-style-type: decimal;
  display: block;
  -webkit-margin-before: 1em;
          margin-block-start: 1em;
  -webkit-margin-after: 1em;
          margin-block-end: 1em;
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  -webkit-margin-end: 0;
          margin-inline-end: 0;
  -webkit-padding-start: 40px;
          padding-inline-start: 40px;
}
.wysiwyg ol ol {
  list-style-type: lower-alpha;
}
.wysiwyg ol ol ol {
  list-style-type: upper-roman;
}
.wysiwyg ol ol ul {
  list-style-type: square;
}
.wysiwyg ol ul {
  list-style-type: circle;
}
.wysiwyg ol ul ul {
  list-style-type: square;
}
.wysiwyg ul {
  list-style-type: disc;
  list-style-position: outside;
  display: block;
  -webkit-margin-before: 1em;
          margin-block-start: 1em;
  -webkit-margin-after: 1em;
          margin-block-end: 1em;
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  -webkit-margin-end: 0;
          margin-inline-end: 0;
  -webkit-padding-start: 40px;
          padding-inline-start: 40px;
}
.wysiwyg ul ol {
  list-style-type: lower-alpha;
}
.wysiwyg ul ol ol {
  list-style-type: upper-roman;
}
.wysiwyg ul ul {
  list-style-type: circle;
}
.wysiwyg ul ul ul {
  list-style-type: square;
}
.wysiwyg li {
  display: list-item;
  text-align: -webkit-match-parent;
  margin-bottom: 5px;
  list-style: inherit;
}
.wysiwyg table {
  display: table;
  border: 1px solid #ccc;
  width: 100%;
  max-width: 100%;
  margin: 0 0 10px;
  background-color: transparent;
  border-spacing: 0;
  border-collapse: collapse;
  clear: both;
  text-indent: initial;
}
.wysiwyg table td,
.wysiwyg table th {
  border: 1px solid #e1e1e1;
  padding: 0.4em;
  background-clip: padding-box;
  display: table-cell;
  text-align: initial;
  width: auto;
}
.wysiwyg table th {
  background-color: #f3f3f3;
}
.wysiwyg table tr {
  display: table-row;
  border: 1px solid #efefef;
}
.wysiwyg table thead {
  border-bottom: 2px solid #333;
}
.wysiwyg table.se-table-layout-auto {
  table-layout: auto !important;
}
.wysiwyg table.se-table-layout-fixed {
  table-layout: fixed !important;
}
.wysiwyg table.se-table-size-auto {
  width: auto !important;
}

.form__item {
  display: block;
  font-size: 0.875rem;
  -webkit-margin-after: 13px;
          margin-block-end: 13px;
}
.form__example {
  display: block;
  font-size: 0.875rem;
}
.form__input {
  position: relative;
}
.form__input input[type=text] {
  padding: 10px 8px;
  width: 100%;
  border-radius: 5px;
  background-color: #fff;
  font-size: 1rem;
}
.form__input input[type=text]:focus {
  background-color: #F3F8FA;
}
.form__input input[type=text].error {
  border: 1px solid #D41E1E;
  background-color: #FFF8F8;
}
.form__input input[type=text]::-moz-placeholder {
  color: #949494;
}
.form__input input[type=text]::placeholder {
  color: #949494;
}
.form__serial-input {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.form__serial-input input::-moz-placeholder {
  color: #B8B8B8;
}
.form__serial-input input::placeholder {
  color: #B8B8B8;
}
.form__serial-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0px;
}
.form__serial-input-wrapper:has(input:disabled) {
  display: none;
}
.form__agreement {
  align-items: baseline;
  padding: 10px 0;
  font-size: 0.875rem;
}
.form__btn--serial {
  margin-bottom: 22px;
}
.form__essential {
  display: inline-block;
  font-size: 0.8125rem;
  color: #D41E1E;
  -webkit-margin-start: 10px;
          margin-inline-start: 10px;
}
@media screen and (max-width: 768px) {
  .form__essential {
    font-size: 0.6875rem;
  }
}

.article-useful__container {
  display: flex;
  flex-wrap: wrap;
  row-gap: 50px;
  justify-content: space-between;
  list-style: none;
  word-break: break-all;
}
.article-useful__container::after {
  content: "";
  display: block;
  width: 350px;
}
@media screen and (max-width: 768px) {
  .article-useful__container::after {
    width: 330px;
  }
}
@media screen and (min-width: 1250px) {
  .article-useful__container.type_list {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
  }
  .article-useful__container.type_list .article-useful__scale_list {
    width: 100%;
  }
  .article-useful__container.type_list .article-useful__item {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
  }
  .article-useful__container.type_list .article-useful__image {
    width: 350px;
    margin-bottom: 0;
  }
  .article-useful__container.type_list .article-useful__contents {
    margin-left: 30px;
    width: 100%;
  }
  .article-useful__container.type_list .article-useful__title {
    -webkit-line-clamp: 1;
    height: auto;
  }
}
.article-useful__container li {
  width: 31%;
}
@media screen and (max-width: 1080px) {
  .article-useful__container li {
    width: 47%;
  }
}
@media screen and (max-width: 480px) {
  .article-useful__container li {
    width: 100%;
  }
}
.article-useful__item {
  display: block;
}
.article-useful__hover {
  transition: opacity 0.3s;
}
.article-useful__hover:hover {
  opacity: 0.7;
}
.article-useful__counts {
  font-size: 0.8125rem;
}
.article-useful__image {
  width: 100%;
  height: 100%;
  aspect-ratio: 350/223;
  margin-bottom: 30px;
  flex-shrink: 0;
  border-radius: 5px;
  -o-object-fit: cover;
     object-fit: cover;
  object-fit: cover;
}
@media screen and (max-width: 768px) {
  .article-useful__image {
    margin-bottom: 25px;
  }
}
.article-useful__date {
  font-size: 0.875rem;
  margin-bottom: 25px;
}
.article-useful__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 25px;
  letter-spacing: 0.9px;
  margin-bottom: 15px;
}
@media screen and (max-width: 768px) {
  .article-useful__title {
    font-size: 0.9375rem;
    margin-bottom: 10px;
  }
}
.article-useful__description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 25px;
  margin-bottom: 25px;
}
@media screen and (max-width: 768px) {
  .article-useful__description {
    margin-bottom: 20px;
    -webkit-line-clamp: 2;
  }
}
.article-useful__category {
  font-size: 0.875rem;
  font-weight: 400;
  margin-bottom: 15px;
}
@media screen and (max-width: 768px) {
  .article-useful__category {
    font-size: 0.75rem;
    margin-bottom: 20px;
  }
}
.article-useful__category--mypage {
  margin-top: 15px;
  font-size: 0.875rem;
}
.article-useful__tags {
  font-size: 0.875rem;
  margin-bottom: 25px;
}
@media screen and (max-width: 768px) {
  .article-useful__tags {
    font-size: 0.75rem;
    margin-bottom: 20px;
  }
}

.information {
  margin: 0 auto;
  width: 100%;
  list-style: none;
  border-top: 1px solid #E5E5E5;
}
.information a {
  text-decoration: none;
}
.information__unit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  border-bottom: 1px solid #E5E5E5;
  transition: background-color 0.3s;
  width: 100%;
  padding-block: 15px;
}
.information__unit:hover {
  background-color: #FAFAFA;
}
@media screen and (max-width: 768px) {
  .information__unit {
    padding-block: 10px;
  }
}
.information__unit--important {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  border-bottom: 1px solid #E5E5E5;
  transition: background-color 0.3s;
  width: 100%;
  padding-block: 10px;
}
.information__unit--important:hover {
  background-color: #FAFAFA;
}
@media screen and (max-width: 768px) {
  .information__unit--important {
    padding-block: 10px;
  }
}
.information__body {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .information__body {
    display: block;
    margin: 17px 0;
  }
}
.information__body--important {
  display: flex;
  align-items: center;
  gap: 10px;
}
.information__lead {
  display: flex;
  align-items: center;
}
.information__date {
  flex-shrink: 0;
}
.information__date__important {
  font-size: 0.875rem;
}
.information__tag {
  display: block;
  text-align: center;
  flex-shrink: 0;
  width: 75px;
  height: 24px;
  padding-inline: 10px;
  padding-block: 1px 4px;
  margin: 0 30px 0 20px;
  border: 1px solid;
  border-radius: 5px;
  background-color: #fff;
  color: #949494;
  border-color: #949494;
  font-size: 0.8125rem;
}
.information__tag.--important {
  background-color: #D41E1E;
  color: #fff;
  border-color: #D41E1E;
}
@media screen and (max-width: 768px) {
  .information__tag {
    margin: 0 7px;
  }
}
.information__heading {
  margin-right: 20px;
  flex: 1;
  min-width: 0;
}
.information__heading p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .information__heading {
    margin: 0;
  }
}

.tooltip {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 6px;
  position: relative;
  cursor: pointer;
}
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  font-size: 0.6875rem;
  opacity: 0;
  display: block;
  padding: 10px;
  width: 400px;
  background-color: #4B4B4B;
  color: #fff;
  transition: all 0.3s;
  z-index: 1;
  transform: translate(22px, -87px);
  border-radius: 5px;
  white-space: pre-wrap;
  text-align: start;
  pointer-events: none;
  font-size: 0.875rem;
}
@media screen and (max-width: 768px) {
  .tooltip::after {
    width: 200px;
    transform: translate(-40px, -150px);
  }
}
.tooltip:hover::after {
  opacity: 1;
}
.tooltip img {
  width: 20px;
  height: 20px;
}

.useful-info__container {
  margin: 60px auto 100px auto;
  max-width: 1250px;
  width: 90%;
}
@media screen and (max-width: 768px) {
  .useful-info__container {
    margin-block: 10px 28px;
  }
}
.useful-info__inner {
  background-color: #fff;
  -webkit-margin-before: 18px;
          margin-block-start: 18px;
  padding-block: 70px;
  border-radius: 5px;
}
@media screen and (max-width: 768px) {
  .useful-info__inner {
    -webkit-margin-before: 12px;
            margin-block-start: 12px;
    padding-block: 50px;
  }
}
.useful-info__title {
  -webkit-margin-after: 50px;
          margin-block-end: 50px;
  font-size: 1.375rem;
}
@media screen and (max-width: 768px) {
  .useful-info__title {
    -webkit-margin-after: 40px;
            margin-block-end: 40px;
    font-size: 1.25rem;
  }
}
.useful-info__body {
  width: 90%;
  max-width: 1100px;
  margin-inline: auto;
}
.useful-info__nav {
  width: 90%;
  max-width: 1200px;
  margin-inline: auto;
  -webkit-margin-after: 95px;
          margin-block-end: 95px;
}
@media screen and (max-width: 768px) {
  .useful-info__nav {
    -webkit-margin-after: 65px;
            margin-block-end: 65px;
  }
}
.useful-info__foot {
  margin-inline: auto;
  margin-block: 58px 50px;
}
.useful-info__foot p {
  font-size: 1.375rem;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .useful-info__foot {
    margin-block: 72px 36px;
  }
  .useful-info__foot p {
    font-size: 1.25rem;
  }
}

.privacy__container {
  margin: 100px auto;
  width: 90%;
  max-width: 1200px;
}
@media screen and (max-width: 1080px) {
  .privacy__container {
    margin: 70px auto;
  }
}
.privacy__title {
  -webkit-margin-after: 50px;
          margin-block-end: 50px;
}
@media screen and (max-width: 768px) {
  .privacy__title {
    -webkit-margin-after: 40px;
            margin-block-end: 40px;
  }
}
.privacy__wysiwyg {
  font-size: 0.8125rem;
}
@media screen and (max-width: 768px) {
  .privacy__wysiwyg {
    font-size: 0.75rem;
  }
}
.privacy__btn {
  margin-top: 40px;
}
.privacy__btn .btn {
  margin-inline: auto;
  width: 143px;
  height: 40px;
}
@media screen and (max-width: 768px) {
  .privacy__btn {
    margin-top: 40px;
  }
  .privacy__btn .btn {
    margin-inline: auto;
    width: 132px;
    height: 36px;
  }
}

.tag--useful-info {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
}
.tag--useful-info a {
  text-decoration: none;
  opacity: 1;
}
.tag--useful-info li {
  width: auto;
  height: 30px;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid #999;
  font-size: 0.75rem;
  line-height: 27px;
  background-color: #fff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #797979;
}

.hint-modal, .hint-modal--nobody {
  z-index: 10;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
}
@media screen and (max-width: 1250px) {
  .hint-modal, .hint-modal--nobody {
    bottom: 55px;
  }
}
@media screen and (max-width: 768px) {
  .hint-modal, .hint-modal--nobody {
    -webkit-font-smoothing: none;
    -webkit-font-smoothing: antialiased;
    -webkit-font-smoothing: subpixel-antialiased;
  }
}
.hint-modal__container {
  width: 100%;
  max-width: 440px;
  max-height: 800px;
  position: absolute;
  right: 40px;
  bottom: 40px;
  background-color: #fff;
  overflow: hidden;
  border: none;
  border-radius: 5px;
  box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 768px) {
  .hint-modal__container {
    right: 20px;
    bottom: 20px;
  }
}
@media screen and (max-width: 480px) {
  .hint-modal__container {
    width: auto;
    margin: 20px;
    right: 0;
    bottom: 0;
  }
}
.hint-modal__menu {
  background-color: #F2F2F2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px 5px 20px;
}
.hint-modal__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
}
.hint-modal__icon img {
  width: 25px;
}
.hint-modal__title {
  font-size: 0.875rem;
}
.hint-modal__buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.hint-modal__button--minimize, .hint-modal__button--close {
  display: block;
  height: 100%;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s;
  cursor: pointer;
}
.hint-modal__button--minimize img, .hint-modal__button--close img {
  width: 100%;
  height: 100%;
}
.hint-modal__button--minimize:hover, .hint-modal__button--close:hover {
  background-color: #ccc;
}
.hint-modal__button--close {
  border: none;
  background: none;
}
.hint-modal__button--close img {
  transform: rotate(45deg);
}
.hint-modal__body {
  padding: 20px;
  padding-top: 13px;
}
.hint-modal__text {
  font-size: 0.875rem;
  line-height: 1.8em;
}

@media screen and (max-width: 1250px) {
  .hint-modal--nobody {
    bottom: 0px;
  }
}

.hint-mini-modal {
  background-color: #fff;
  height: 55px;
  width: 55px;
  position: absolute;
  right: 40px;
  bottom: 40px;
  border-radius: 5px;
  display: none;
  box-shadow: 5px 5px 12px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  -webkit-font-smoothing: none;
  -webkit-font-smoothing: antialiased;
  -webkit-font-smoothing: subpixel-antialiased;
}
@media screen and (max-width: 768px) {
  .hint-mini-modal {
    right: 20px;
    bottom: 20px;
  }
}
.hint-mini-modal__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  -webkit-font-smoothing: none;
  -webkit-font-smoothing: antialiased;
  -webkit-font-smoothing: subpixel-antialiased;
}
.hint-mini-modal__btn {
  position: absolute;
  top: -12px;
  left: 38px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  background-color: #F2F2F2;
  border: none;
  cursor: pointer;
}
.hint-mini-modal__btn img {
  transform: rotate(45deg);
}
.hint-mini-modal:hover {
  background-color: #ccc;
}

.dialog-user {
  display: block;
  position: fixed;
  z-index: -1;
  top: calc(70px - 100%);
  left: auto;
  right: 25px;
  border: none;
  opacity: 0;
  transition: opacity 0.3s;
  background-color: #fff;
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
  max-width: 345px;
  min-width: 345px;
  border-radius: 5px;
}
@media screen and (max-width: 1250px) {
  .dialog-user[open] {
    -webkit-margin-before: 60px;
            margin-block-start: 60px;
    margin-inline: auto;
    top: 0;
    opacity: 1;
  }
}
@media screen and (max-width: 480px) {
  .dialog-user {
    -webkit-margin-before: 70px;
            margin-block-start: 70px;
    width: 90%;
  }
  .dialog-user[open] {
    -webkit-margin-before: 50px;
            margin-block-start: 50px;
    margin-inline: auto;
    top: 0;
    opacity: 1;
    right: 15px;
  }
}
.dialog-user__body {
  width: 100%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding-inline: 23px;
  padding-block: 27px 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media screen and (max-width: 480px) {
  .dialog-user__body {
    gap: 20px;
  }
}
.dialog-user__profile {
  display: flex;
  align-items: center;
  -webkit-margin-after: 15px;
          margin-block-end: 15px;
}
.dialog-user__icon {
  width: 32px;
  height: 32px;
  -webkit-margin-end: 5px;
          margin-inline-end: 5px;
}
.dialog-user__profile-name {
  font-size: 0.875rem;
}
.dialog-user__profile-mail {
  font-size: 0.875rem;
  color: #949494;
}
.dialog-user__btn {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dialog-user__title {
  font-size: 0.875rem;
  -webkit-margin-after: 12px;
          margin-block-end: 12px;
}
.dialog-user__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  list-style: none;
}
.dialog-user__unit {
  width: 100%;
  overflow: hidden;
  padding: 23px;
  background-color: #F8F8F8;
  border-radius: 5px;
}
.dialog-user__unit h3 {
  font-size: 0.875rem;
}
.dialog-user__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
}
.dialog-user__text span {
  font-weight: 700;
}
.dialog-user__link {
  display: block;
  font-size: 0.875rem;
  text-align: end;
  -webkit-margin-before: 12px;
          margin-block-start: 12px;
}

.useful-detail__container {
  margin: 60px auto 100px auto;
  max-width: 1250px;
  width: 90%;
}
@media screen and (max-width: 768px) {
  .useful-detail__container {
    margin-block: 10px 28px;
  }
}
.useful-detail__article {
  background-color: #fff;
  -webkit-margin-before: 18px;
          margin-block-start: 18px;
  padding-block: 70px;
  border-radius: 5px;
}
@media screen and (max-width: 768px) {
  .useful-detail__article {
    padding-block: 50px;
  }
}
.useful-detail__inner {
  max-width: 620px;
  width: 90%;
  margin-inline: auto;
}
.useful-detail__image {
  margin-bottom: 30px;
}
.useful-detail__image img {
  height: 100%;
  width: 100%;
  border-radius: 5px;
  max-width: 620px;
  max-height: 395px;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 350/223;
}
@media screen and (max-width: 768px) {
  .useful-detail__image {
    margin-bottom: 24px;
  }
}
.useful-detail__title {
  font-size: 1.375rem;
  font-weight: 400;
  margin-bottom: 15px;
}
@media screen and (max-width: 768px) {
  .useful-detail__title {
    font-size: 1.25rem;
  }
}
.useful-detail__description {
  font-size: 0.875rem;
  margin-top: 15px;
}
.useful-detail__list {
  width: 100%;
  margin-top: 50px;
  list-style: none;
}
.useful-detail__unit {
  border-bottom: 1px solid #E5E5E5;
}
.useful-detail__unit:first-child {
  border-top: 1px solid #E5E5E5;
}
.useful-detail__item {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .useful-detail__item {
    flex-direction: column;
    align-items: baseline;
    font-size: 0.75rem;
    gap: 10px;
    padding-inline: 13px;
    padding-block: 10px 15px;
  }
}
.useful-detail__item dt {
  padding: 18px 30px;
  font-weight: 700;
  width: 160px;
}
@media screen and (max-width: 768px) {
  .useful-detail__item dt {
    width: 100%;
    padding: 0;
  }
}
.useful-detail__item dd {
  padding: 18px 10px;
  max-width: 72%;
}
@media screen and (max-width: 768px) {
  .useful-detail__item dd {
    width: 100%;
    max-width: none;
    padding: 0;
  }
}
.useful-detail__wysiwyg {
  margin-top: 50px;
  width: 100%;
  font-size: 0.875rem;
}
@media screen and (max-width: 768px) {
  .useful-detail__wysiwyg {
    margin-top: 40px;
  }
}
.useful-detail__wysiwyg .se-component > figure {
  padding-bottom: 10px !important;
}
.useful-detail__btn {
  -webkit-margin-before: 50px;
          margin-block-start: 50px;
}
.useful-detail__btn .btn {
  margin-inline: auto;
  width: 214px;
  height: 40px;
}
@media screen and (max-width: 768px) {
  .useful-detail__btn {
    margin-top: 40px;
  }
}
.useful-detail__pdf {
  -webkit-margin-after: 170px;
          margin-block-end: 170px;
}
.useful-detail__pdf .btn--white {
  width: 227px;
  height: 40px;
}
@media screen and (max-width: 480px) {
  .useful-detail__pdf {
    margin-inline: auto;
    -webkit-margin-after: 70px;
            margin-block-end: 70px;
    text-align: center;
  }
  .useful-detail__pdf .btn--white {
    margin-inline: auto;
    width: 203px;
    height: 40px;
  }
}

.pdf-download__container {
  margin: 60px auto 100px auto;
  width: 90%;
  max-width: 1250px;
}
@media screen and (max-width: 768px) {
  .pdf-download__container {
    margin: 10px auto 31px auto;
  }
}
.pdf-download__wrapper {
  width: 100%;
  margin-inline: auto;
  padding-block: 70px;
  -webkit-margin-before: 18px;
          margin-block-start: 18px;
  background-color: #fff;
  border-radius: 5px;
}
@media screen and (max-width: 768px) {
  .pdf-download__wrapper {
    padding-block: 50px;
    -webkit-margin-before: 12px;
            margin-block-start: 12px;
  }
}
.pdf-download__inner {
  width: 90%;
  margin: 0 auto;
}
.pdf-download__title {
  -webkit-margin-after: 50px;
          margin-block-end: 50px;
}
@media screen and (max-width: 768px) {
  .pdf-download__title {
    -webkit-margin-after: 40px;
            margin-block-end: 40px;
  }
}
.pdf-download__list {
  border-top: 1px solid #E5E5E5;
  -webkit-margin-after: 50px;
          margin-block-end: 50px;
  max-width: 740px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .pdf-download__list {
    -webkit-margin-after: 40px;
            margin-block-end: 40px;
  }
}
.pdf-download__text {
  text-align: center;
}
.pdf-download__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid #E5E5E5;
  padding-block: 20px;
}
@media screen and (max-width: 768px) {
  .pdf-download__item {
    align-items: flex-start;
    padding-block: 23px;
  }
}
.pdf-download__icon {
  width: 40px;
  height: 40px;
}
@media screen and (max-width: 768px) {
  .pdf-download__icon {
    width: 30px;
    height: 30px;
  }
}
.pdf-download__navi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 25px;
}
@media screen and (max-width: 768px) {
  .pdf-download__navi {
    flex-direction: column;
    justify-content: flex-start;
    align-items: baseline;
    gap: 13px;
  }
}
.pdf-download__name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 1rem;
}
.pdf-download__btn {
  flex-shrink: 0;
}
.pdf-download__btn--back {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pdf-download__user_product {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-bottom: 50px;
}
@media screen and (max-width: 480px) {
  .pdf-download__user_product {
    gap: 10px;
    margin-bottom: 30px;
  }
}

.user-info__container {
  max-width: 1250px;
  width: 90%;
  margin-inline: auto;
  margin-block: 60px 52px;
}
@media screen and (max-width: 768px) {
  .user-info__container {
    margin-block: 10px 56px;
  }
}
.user-info__wrapper {
  width: 100%;
  background-color: #fff;
  padding-block: 70px;
  border-radius: 5px;
  -webkit-margin-before: 18px;
          margin-block-start: 18px;
}
@media screen and (max-width: 768px) {
  .user-info__wrapper {
    padding-block: 50px;
    -webkit-margin-before: 12px;
            margin-block-start: 12px;
  }
}
.user-info__title {
  -webkit-margin-after: 50px;
          margin-block-end: 50px;
}
@media screen and (max-width: 768px) {
  .user-info__title {
    -webkit-margin-after: 40px;
            margin-block-end: 40px;
  }
}
.user-info__body {
  max-width: 745px;
  width: 90%;
  margin-inline: auto;
}
.user-info__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  -webkit-margin-before: 50px;
          margin-block-start: 50px;
}

.user-edit-input__wrapper {
  width: 100%;
  background-color: #fff;
  padding-block: 70px;
  -webkit-margin-before: 18px;
          margin-block-start: 18px;
  border-radius: 5px;
}
@media screen and (max-width: 768px) {
  .user-edit-input__wrapper {
    -webkit-margin-before: 12px;
            margin-block-start: 12px;
    padding-block: 50px;
  }
}
.user-edit-input__title {
  -webkit-margin-after: 50px;
          margin-block-end: 50px;
}
@media screen and (max-width: 768px) {
  .user-edit-input__title {
    -webkit-margin-after: 40px;
            margin-block-end: 40px;
  }
}
.user-edit-input__body {
  max-width: 500px;
  width: 90%;
  margin-inline: auto;
}
.user-edit-input__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  -webkit-margin-before: 50px;
          margin-block-start: 50px;
}
.user-edit-input__btn .btn {
  width: 130px;
  height: 40px;
}
.user-edit-input__btn .btn--input input {
  width: 130px;
  height: 40px;
}
@media screen and (max-width: 480px) {
  .user-edit-input__btn .btn {
    width: 120px;
    height: 36px;
  }
  .user-edit-input__btn .btn--input input {
    width: 120px;
    height: 36px;
  }
}
.user-edit-input__input {
  -webkit-margin-after: 25px;
          margin-block-end: 25px;
}
.user-edit-input__input:last-child {
  -webkit-margin-after: 0px;
          margin-block-end: 0px;
}
.user-edit-input__select {
  width: 100%;
  max-width: none;
}
.user-edit-input__select select {
  width: 100%;
  max-width: none;
  font-size: 0.9375rem;
}

.user-edit-check__wrapper {
  width: 100%;
  background-color: #fff;
  padding-block: 70px;
  -webkit-margin-before: 18px;
          margin-block-start: 18px;
  border-radius: 5px;
}
@media screen and (max-width: 768px) {
  .user-edit-check__wrapper {
    -webkit-margin-before: 12px;
            margin-block-start: 12px;
    padding-block: 50px;
  }
}
.user-edit-check__title {
  -webkit-margin-after: 50px;
          margin-block-end: 50px;
}
@media screen and (max-width: 768px) {
  .user-edit-check__title {
    -webkit-margin-after: 40px;
            margin-block-end: 40px;
  }
}
.user-edit-check__body {
  max-width: 500px;
  width: 90%;
  margin-inline: auto;
}
.user-edit-check__btn {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  gap: 20px;
}
.user-edit-check__btn .btn {
  width: 130px;
  height: 40px;
}
.user-edit-check__btn .btn--input input {
  width: 130px;
  height: 40px;
}
@media screen and (max-width: 480px) {
  .user-edit-check__btn {
    margin: 40px 0 120px 0;
  }
  .user-edit-check__btn .btn {
    width: 120px;
    height: 36px;
  }
  .user-edit-check__btn .btn--input input {
    width: 120px;
    height: 36px;
  }
}

.user-edit-comp__wrapper {
  width: 100%;
  background-color: #fff;
  padding-block: 70px;
  -webkit-margin-before: 18px;
          margin-block-start: 18px;
  border-radius: 5px;
}
@media screen and (max-width: 768px) {
  .user-edit-comp__wrapper {
    -webkit-margin-before: 12px;
            margin-block-start: 12px;
    padding-block: 50px;
  }
}
.user-edit-comp__title {
  -webkit-margin-after: 50px;
          margin-block-end: 50px;
}
@media screen and (max-width: 768px) {
  .user-edit-comp__title {
    -webkit-margin-after: 40px;
            margin-block-end: 40px;
  }
}
.user-edit-comp__body {
  max-width: 500px;
  width: 90%;
  margin-inline: auto;
}
.user-edit-comp__description {
  text-align: center;
  margin-block: 77px 48px;
  font-size: 0.875rem;
}
.user-edit-comp__description br {
  display: block;
}
@media screen and (max-width: 768px) {
  .user-edit-comp__description {
    margin-block: 30px 10px;
    font-size: 0.75rem;
  }
}
.user-edit-comp__btn {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  gap: 20px;
}
@media screen and (max-width: 480px) {
  .user-edit-comp__btn {
    margin: 40px 0 120px 0;
  }
}

.welcome {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 20;
}
.welcome__modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 350px;
  height: auto;
  background-color: #fff;
  border-radius: 5px;
  padding: 30px;
}
.welcome__modal__title {
  font-size: 1.1875rem;
  color: #364254;
  font-weight: bold;
}
.welcome__modal__text {
  font-size: 1rem;
}
.welcome__modal__image {
  width: 100%;
}
.welcome__modal__btn {
  margin: 0 auto;
}
/*# sourceMappingURL=style.css.map */