@charset "UTF-8";
:root {
  --font150: #1f65d7;
  --font100: #2c2d42;
  --font50: #6f7597;
  --font50: #6a6a6a;
  --font25: #a2a6c8;
  --font0: #ffffff;
  --gray10: #f9fafb;
  --gray20: #f2f4f7;
  --gray40: #d0d5dd;
  --bland100: #35318e;
  --bland150: #201d6e;
  --line25: #f2f4f7;
  --line40: #e7e8ef;
  --line50: #666666;
  --line80: #d8dae7;
  --line100: #9ca3af;
  --btn100: #5495ff;
  --btn150: #1f65d7;
  --bg0: #ffffff;
  --bgs: #17b26a;
  --bgred: #f04438;
  --bggray: #6f7597;
  --uniq10: #eef4ff;
  --uniq20: #ddeaff;
  --error10: #fef3f2;
  --error100: #f04438;
  --success10: #ecfdf3;
  --success100: #17b26a;
  --warning100: #f79009;
}

/* common
======================================== */
html {
  font-size: 10px;
}

body {
  font-family: 'Noto Sans JP', sans-serif !important;
  margin: 0 !important;
  padding: 0;
  color: var(--font100);
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.4;
  background-image: linear-gradient(225.37deg, rgba(84, 149, 255, 0.5) 0%, rgba(84, 149, 255, 0.5) 43.06%, rgba(148, 118, 255, 0.5) 95.68%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
  background-size: cover;
  background-repeat: no-repeat;
  background: #abcaff !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: 'Noto Sans JP', sans-serif !important;
}

form {
  margin: 0;
}

input[type='text'],
input[type='number'],
input[type='email'],
input[type='tel'],
input[type='password'],
textarea,
select {
  width: 100%;
  display: inline-block;
  margin: 0;
  padding: 0.6rem 1.2rem;
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--font100);
  line-height: 1.6;
  background-color: var(--bg0);
  border: solid 2px var(--line50);
  border-radius: 0.6rem;
  box-shadow: none;
}

.tel-is-invalid input,
input[type='text'].is-invalid,
input[type='number'].is-invalid,
input[type='email'].is-invalid,
input[type='tel'].is-invalid,
input[type='password'].is-invalid,
textarea.is-invalid,
select.is-invalid {
  border-color: var(--error100);
}

input[readonly],
input[disabled] {
  background-color: var(--gray20);
  border-width: 1px;
  cursor: default;
}

::placeholder {
  color: var(--gray40);
}

.guid-attention {
  color: var(--bgred);
}

.group-tel .w3-col {
  float: none;
}

.account .title,
.contract .title,
.contract-detail .title,
.contract-confirm .title,
.contract-plan .title,
.contract-payment .title,
.contract-edit .title {
  text-align: inherit;
  font-size: inherit;
  padding: inherit;
  color: inherit;
  border-bottom: inherit;
  margin: inherit;
}

/* header
------------------------------ */
header .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 7rem;
  margin-left: 25rem;
  padding: 0 2rem;
  background-color: var(--bg0);
}
header.login .header {
  margin-left: 0;
}

header .header a.logo {
  display: none;
  padding: 1.8rem;
}

header.login a.logo {
  display: block;
}

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

header .w3-button {
  width: 25rem;
  text-align: center;
}

header .w3-button img {
  height: 3.4rem;
}

#mySidebar {
  width: 25rem;
  z-index: 1038;
  overflow-y: hidden;
}

.header-auth {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 6rem 0;
  padding: 1.8rem;
  text-align: center;
}

.header-auth a {
  display: inline-block;
}

.header-auth a img {
  height: 3.4rem;
}

header .header .btn-wrapper {
  margin-left: auto;
  margin-right: 2rem;
}

header .header .btn-wrapper.group-button a.btn.bg-white.btn-manual span em {
  font-style: normal;
}

header .user-info {
  text-align: right;
}

header .user-info .pharmacy {
  margin: 0;
  font-size: 1.2rem;
  color: var(--font50);
}

header .user-info .name {
  margin: 0.5rem 0 0 0;
  font-size: 1.4rem;
}

header .user-info .name .sp-disp {
  display: none;
}

header .user-info .name span {
  margin: 0 0 0 0.5rem;
  font-size: 1.3rem;
}

header .user-info .dropdown-menu {
  position: relative;
  display: none;
  visibility: hidden;
  opacity: 0;
  transform: scaleY(0);
  z-index: 1031;
}

header .user-info .dropdown-menu.open {
  display: block;
  visibility: visible;
  opacity: 1;
  transform: scaleY(1);
  transition: all 0.3s;
}

@media (min-width: 901px) {
  header .user-info .name:hover ~ .dropdown-menu,
  header .user-info .dropdown-menu:hover {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: scaleY(1);
    transition: all 0.3s;
  }
}

header .user-info .dropdown-menu-wrap {
  position: absolute;
  list-style-type: none;
  width: 15rem;
  margin: 0;
  padding: 0;
  top: 0;
  left: auto;
  right: 0;
  border-radius: 0.6rem;
  background-color: var(--bg0);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
  transform-origin: center top;
  transition: all 0.3s;
  overflow: hidden;
}

header .user-info .user-info-item {
  display: none;
  padding: 1rem;
  text-align: center;
}

header .user-info .dropdown-menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 1rem;
  cursor: pointer;
}

header .user-info .dropdown-menu-item:hover {
  background-color: var(--uniq20);
}

header .user-info .dropdown-menu-item:not(:first-child) {
  border-top: solid 1px var(--line50);
}

header .user-info .dropdown-menu-item a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--font100);
  text-decoration: none;
  position: relative;
}

header .user-info .name .sp-disp .btn {
  padding: 0.8rem 1.5rem;
}

.toggle-btn {
  display: none;
  position: relative;
  width: 3rem;
  height: 3rem;
  transition: all 0.5s;
  cursor: pointer;
}

.toggle-btn span {
  display: block;
  position: absolute;
  left: 0;
  width: 3rem;
  height: 0.2rem;
  background-color: var(--font100);
  border-radius: 0.4rem;
  /* transition: all 0.5s; */
}

#nav-mask .toggle-btn span {
  transition: all 0.5s;
}

.toggle-btn span:nth-child(1) {
  top: 0.4rem;
}

.toggle-btn span:nth-child(2) {
  top: 1.4rem;
}

.toggle-btn span:nth-child(3) {
  bottom: 0.4rem;
}

.sp-nav-open .toggle-btn span:nth-child(1) {
  -webkit-transform: translateY(1rem) rotate(-315deg);
  transform: translateY(1rem) rotate(-315deg);
}

.sp-nav-open .toggle-btn span:nth-child(2) {
  opacity: 0;
}

.sp-nav-open .toggle-btn span:nth-child(3) {
  -webkit-transform: translateY(-1rem) rotate(315deg);
  transform: translateY(-1rem) rotate(315deg);
}

#nav-mask {
  display: none;
  transition: all 0.5s;
}

.sp-nav-open #nav-mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--font100);
  opacity: 0.8;
  z-index: 1031;
  cursor: pointer;
}

#nav-mask .toggle-btn {
  display: block;
  position: absolute;
  background-color: var(--bg0);
  top: 2rem;
  right: 2rem;
}

@media (max-width: 900px) {
  header.login .btn-wrapper {
    margin-right: 0;
    gap: 1.2rem;
  }

  .btn-wrapper.group-button a.btn.bg-white {
    display: none;
  }

  #mySidebar {
    left: -25rem;
    opacity: 0;
    transition: all 0.3s linear;
  }

  .sp-nav-open #mySidebar {
    left: 0;
    opacity: 1;
  }

  header .header .btn-wrapper .btn i.ma-icons-o {
    font-size: 2.4rem;
  }

  .header-auth {
    margin: 0;
  }

  header .header {
    margin-left: 0;
  }

  header .header a.logo {
    display: block;
    padding: 1.8rem 1rem 1.8rem 0;
  }

  header .toggle-btn {
    display: block;
  }

  header .btn-wrapper .pamphlet span {
    display: none;
  }

  header .user-info .user-info-item {
    display: block;
  }

  header .user-info .user-info-item .name {
    cursor: default;
  }

  header .user-info .user-info-item .name:hover {
    color: var(--font100);
  }

  header .user-info .dropdown-menu-wrap {
    right: -4rem;
  }

  header .user-info > .pharmacy {
    display: none;
  }

  header .user-info > .name .pc-disp {
    display: none;
  }

  header .user-info > .name .sp-disp {
    display: block;
  }

  header .user-info .user {
    margin: 0.5rem 0 0 0;
    font-size: 1.4rem;
    cursor: pointer;
  }

  header.mypage .btn-wrapper.group-button a.btn.bg-gradient-blue {
    display: none;
  }

  header .btn-wrapper.group-button a.btn.bg-white.btn-manual {
    display: flex;
    gap: 0.2rem;
    padding: 0.8rem;
  }

  header .btn-wrapper.group-button a.btn.bg-white.btn-manual span {
    display: block;
    font-size: 1.2rem;
    white-space: nowrap;
  }
  header .btn-wrapper.group-button a.btn.bg-white.btn-manual span em {
    display: none;
  }
  header .btn-wrapper.group-button a.btn.bg-white.btn-manual i {
    font-size: 1.6rem;
  }
}

footer .footer {
  display: none;
}

@media (max-width: 900px) {
  footer .footer {
    display: block;
    width: 100%;
    max-width: 37rem;
    margin: 0 auto;
    padding: 1rem 1rem 2rem 1rem;
  }

  footer .footer ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  footer .footer li p {
    margin: 0;
    font-size: 1.2rem;
  }
}

/* pamphlet-download-menu
------------------------------ */
.main-header {
  height: 3.2rem;
  margin-left: 25rem;
  padding: 0.36rem 2rem;
  text-align: center;
  border-top: solid 1px var(--line40);
  background-color: var(--uniq10);
}

.main-header .pamphlet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bland100);
}

.main-header .pamphlet:hover {
  text-decoration: underline;
  cursor: pointer;
}

.main-header .pamphlet span {
  margin-right: 0.4rem;
  font-size: 1.3rem;
  font-weight: 600;
  white-space: nowrap;
}

.main-header .pamphlet i {
  font-size: 1.6rem;
}

.pamphlet-download-menu {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  width: 45rem;
  top: 14rem;
  left: 25rem;
  right: 0;
  margin: 0 auto;
  transform: scaleY(0);
  z-index: 1031;
  transition: all 0.2s;
}

.pamphlet-open .pamphlet-download-menu {
  visibility: visible;
  opacity: 1;
  transform: scaleY(1);
  transition: all 0.3s;
}

.pamphlet-open #nav-mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--font100);
  opacity: 0.5;
  z-index: 1029;
  cursor: pointer;
}

.pamphlet-open #nav-mask .toggle-btn {
  display: none;
}

.pamphlet-download-menu-wrap {
  border-radius: 0.6rem;
  background-color: var(--bg0);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
  transform-origin: center top;
  transition: all 0.3s;
  overflow: hidden;
}

.pamphlet-download-menu-wrap .title {
  padding: 2rem;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--bland150);
}

.pamphlet-download-menu-wrap ul {
  margin: 0 2rem 2rem;
  padding: 0 1rem;
  list-style-type: none;
  border: solid 1px var(--line50);
  border-radius: 0.6rem;
  background-color: var(--gray10);
}

.pamphlet-download-menu li {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 1rem;
  width: 100%;
  margin: 0;
  padding: 1rem 0;
}

.pamphlet-download-menu li:not(:first-child) {
  border-top: solid 1px var(--line50);
}

.pamphlet-download-menu li a:hover {
  text-decoration: underline;
}

.pamphlet-download-menu li a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--font100);
  text-decoration: none;
  position: relative;
}

.pamphlet-download-menu li img {
  height: 2.4rem;
  margin-left: 0.5rem;
}

@media (max-width: 900px) {
  .main-header {
    margin-left: 0;
  }
  .main-header .pamphlet span {
    font-size: 1.2rem;
    letter-spacing: -0.1rem;
  }
  .pamphlet-download-menu {
    width: calc(100vw - 2rem);
    max-width: 45rem;
    top: 14rem;
    left: 0;
    right: 0;
  }
}

/* main.wrapper
------------------------------ */
main.wrapper {
  margin-top: 10rem;
  height: calc(100vh - 10rem);
}

header.login + main.wrapper {
  margin-top: 7rem;
  height: calc(100vh - 7rem);
}

@media (max-width: 900px) {
  main.wrapper {
    height: 100% !important;
  }
}

/* btn-wrapper btn
------------------------------ */
.btn-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.admin-user {
  background-color: #96d56e !important;
}

.button-submit-search {
  margin-left: 10px !important;
  height: fit-content !important;
  padding: 8px 10px !important;
}

.btn-wrapper .btn,
.button-submit,
.button-success {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 1rem 1.8rem;
  font-size: 1.4rem;
  line-height: 1.6;
  border: 1px solid transparent;
  border-radius: 0.6rem;
  transition: all 0.5s ease;
}

.btn-wrapper .btn:not(:disabled):not(.disabled) {
  cursor: pointer;
}

.btn-wrapper .btn.button-submit:disabled,
.btn-wrapper .btn.button-submit[disabled] {
  color: var(--font0);
  border-color: var(--gray40);
  background: none !important;
  background-color: var(--gray40) !important;
  cursor: default;
}

.btn-wrapper .btn:hover {
  opacity: 0.8;
}

.btn-wrapper.btn-wide .btn {
  width: 100%;
}

.btn-wrapper:not(.btn-wide) .btn {
  width: fit-content;
}

.btn-wrapper.btn-size-l .btn {
  min-width: 12rem;
  padding: 1.6rem 2rem;
}

.btn-wrapper .btn span {
  line-height: 1.6;
}

.btn-wrapper .btn i {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.6rem;
  height: 1.6rem;
}

.btn-wrapper .btn i.ma-icons-o {
  font-size: 1.6rem;
  line-height: 1.6rem;
}

.btn-wrapper .btn.bg-white {
  color: var(--font50);
  border-color: var(--line50);
  background-color: var(--bg0) !important;
}

.btn-wrapper .btn.bg-blue {
  color: var(--font0);
  border-color: var(--btn100);
  background-color: var(--btn100) !important;
}

.btn-wrapper .btn.bg-gradient-blue,
.btn-wrapper .button-submit {
  margin: 0;
  color: var(--font0);
  background: linear-gradient(180deg, #9476ff 0%, #5495ff 55%, #5495ff 100%) !important;
}

.btn-wrapper .btn.bg-gradient-blue:hover,
.btn-wrapper .button-submit:hover {
  background: linear-gradient(180deg, #5495ff 0%, #9476ff 55%, #5495ff 100%) !important;
}

.btn-wrapper .btn.bg-gray,
.btn-wrapper .button-cancel {
  margin: 0;
  color: var(--font0);
  border-color: var(--bggray);
  background-color: var(--bggray) !important;
}

.btn-wrapper .button-cancel {
  /* padding: 1.6rem 1.6rem !important; */
  white-space: nowrap;
}

.btn-wrapper .btn.bg-red {
  color: var(--font0);
  border-color: var(--bgred);
  background-color: var(--bgred) !important;
}

.btn-danger {
  color: var(--font0);
  border-color: var(--bgred);
  background-color: var(--bgred) !important;
}

.btn-primary {
  color: var(--font0);
  background: linear-gradient(180deg, #9476ff 0%, #5495ff 55%, #5495ff 100%) !important;
  border: unset;
}

.btn-primary:hover {
  background: linear-gradient(180deg, #5495ff 0%, #9476ff 55%, #5495ff 100%) !important;
}

.button-submit,
.button-success {
  width: 100%;
  padding: 1.6rem 2rem;
  color: var(--font0);
  text-align: center;
  background: linear-gradient(-160deg, #9476ff 0%, #5495ff 55%, #5495ff 100%);
  cursor: pointer;
  opacity: 1;
}

.btn-wrapper .button-submit:disabled,
.btn-wrapper .button-submit[disabled] {
  background: var(--gray40) !important;
  color: var(--bg0);
  cursor: default;
}

/* w3-sidebar
======================================== */
.w3-sidebar .nav-sidebar-wrap {
}

.w3-sidebar .nav-sidebar-wrap ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.w3-sidebar .nav-sidebar-wrap li {
  padding: 0.4rem;
}

.w3-sidebar .nav-sidebar-wrap li.close-menu {
  display: none;
}

.w3-sidebar .nav-sidebar-wrap li a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem;
  border-radius: 0.4rem;
}
.w3-sidebar .nav-sidebar-wrap li a:hover {
  background-color: var(--uniq20);
}

.w3-sidebar .nav-sidebar-wrap li a p {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.w3-sidebar .footer {
  position: fixed;
  bottom: 0.4rem;
}

.w3-sidebar .footer ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.w3-sidebar .footer li {
  padding: 0.8rem 2rem;
}

.w3-sidebar .footer li a {
  width: 100%;
}

.w3-sidebar .footer li a p {
  margin: 0;
  font-size: 1.4rem;
  color: var(--font50);
}

/* center-content
======================================== */
.center-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.center-content-wrap {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  column-gap: 6rem;
}

@media (max-width: 900px) {
  .center-content {
    height: auto;
    align-items: flex-start;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .center-content-wrap {
    flex-direction: column-reverse;
    flex-wrap: wrap;
    row-gap: 2rem;
  }
}

/* main-section
======================================== */
.main-section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.main-section-wrap {
  display: grid;
  width: 100%;
  max-width: 86rem;
}

.main-section:has(.message-frame) {
  margin-top: 4rem;
}

.main-section-wrap.message-frame {
  max-width: 40rem;
}

.main-section .main-title {
  margin: 2.4rem 0;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--font100);
}

.main-content {
  display: grid;
  gap: 2rem;
  padding: 4rem;
  border-radius: 0.8rem;
  background-color: var(--bg0);
}

.main-content-wrap {
  display: grid;
  gap: 4rem;
}

.main-content-wrap .guid {
  margin: 0;
  padding: 0;
  font-size: 1.4rem;
  color: var(--font50);
}

.main-head-wrap .head-icon {
  width: 100%;
  margin-bottom: 2rem;
  text-align: center;
}

.main-head-wrap .head-icon img {
  width: 64px;
}

.main-head-wrap .head-title {
  margin: 0 0 2rem 0;
  font-size: 1.6rem;
  font-weight: 500;
  text-align: center;
}

.main-head-wrap .head-message {
  margin: 0;
  font-size: 1.2rem;
  color: var(--font50);
  text-align: center;
}

.article-box-wrap {
  display: grid;
  gap: 2rem;
}

.article-box-wrap.error10 {
  padding: 2rem;
  background-color: var(--error10);
  border-radius: 0.8rem;
}

.article-box-wrap .title {
  font-size: 1.4rem;
  color: var(--font50);
  text-align: center;
}

.article-box-wrap p {
  margin: 0;
  font-size: 1.2rem;
  color: var(--success100);
}

.article-box-wrap p.err {
  color: var(--error100);
  font-weight: 500;
}

.article-box-wrap p span {
  margin-right: 0.3rem;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--font100);
}

.main-section-wrap.message-frame .btn-wrapper {
  margin-top: 2rem;
}

@media (max-width: 900px) {
  .main-content {
    padding: 2rem;
    word-break: break-all;
  }
  .main-section .main-title {
    margin: 1.4rem 0;
  }
}

/* checkbox
======================================== */
.custom-control {
  display: block;
  position: relative;
  min-height: 1.8rem;
  padding-left: 2.6rem;
  z-index: 1;
  -webkit-print-color-adjust: exact;
}

.custom-control-inline {
  display: inline-block;
  margin-right: 1rem;
}

.custom-control-label {
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--font100);
  line-height: 1.5;
  cursor: pointer;
  position: relative;
  margin-bottom: 0;
  /* vertical-align: top; */
  display: inline-block;
}

.custom-control-label:hover {
  opacity: 0.8;
}

.custom-control-input {
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  position: absolute;
  left: 0;
  z-index: -1;
  width: 1rem;
  height: 1.25rem;
  opacity: 0;
}

.custom-control.custom-checkbox .custom-control-label:before {
  position: absolute;
  content: '';
  pointer-events: none;
  top: 0.4rem;
  left: -2.6rem;
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  background-color: var(--bg0);
  border: solid 2px var(--btn150);
  box-shadow: none;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.custom-control.custom-checkbox .custom-control-label:after {
  position: absolute;
  content: '';
  top: 0.8rem;
  transform: translateY(-50%);
  left: -2.2rem;
  display: block;
  width: 1rem;
  height: 0.6rem;
  border-left: solid 2px var(--bg0);
  border-bottom: solid 2px var(--bg0);
  transform: rotate(315deg);
}

.input-checkbox-wrap {
  display: grid;
  gap: 0.6rem;
  padding: 1rem;
  background-color: var(--bg0);
  border: solid 2px var(--line50);
  border-radius: 0.6rem;
}

.input-radio-wrap {
  padding-left: 2.6rem;
  background-color: var(--bg0);
  border: solid 2px var(--line50);
  border-radius: 0.6rem;
  box-shadow: none;
}

.custom-control.custom-radio {
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

.input-radio-wrap .custom-control.custom-radio {
  padding: 0.71rem 1.6rem;
}

.custom-control.custom-radio .custom-control-label:before {
  position: absolute;
  content: '';
  pointer-events: none;
  top: 50%;
  left: -2.6rem;
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  transform: translateY(-50%);
  background-color: var(--bg0);
  border: solid 2px var(--btn150);
  border-radius: 50%;
  box-shadow: none;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.custom-control.custom-radio .custom-control-label:after {
  position: absolute;
  content: '';
  top: 50%;
  left: -2.2rem;
  display: block;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  background: 50% / 50% 50% no-repeat;
  background-size: 100%;
}

.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  border-color: var(--btn150);
  background-color: var(--btn150);
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E");
}

.custom-control-input:disabled ~ .custom-control-label {
  color: var(--gray40);
  cursor: default;
}

/* content-box-wrap
======================================== */
.content-box-wrap {
  display: grid;
  gap: 2rem;
  width: 60rem;
  padding: 4rem;
  border-radius: 0.8rem;
  background-color: var(--bg0);
}

.content-box-wrap.small-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40rem;
}

.content-box-wrap.small-frame .title {
  text-align: center;
}

.content-box-wrap.small-frame .title span {
  font-size: 2rem;
  font-weight: 500;
}
.content-box-wrap.small-frame .title.long span {
  font-size: 1.6rem;
}

.content-box-wrap.small-frame .title p {
  margin: 1rem 0 1rem;
  font-size: 1.4rem;
  font-weight: 500;
}

@media (max-width: 900px) {
  .content-box-wrap.small-frame {
    width: 100%;
    height: auto;
    gap: 2rem !important;
  }
}

/* section-wrap
======================================== */
.section-wrap {
  display: grid;
  gap: 3rem;
  width: 100%;
}

/* mypage breadcrumb
======================================== */
.content-breadcrumb {
  margin-bottom: 2.4rem;
}

.content-breadcrumb .breadcrumb {
  margin: 0;
  padding: 0;
  background-color: transparent;
}

.content-breadcrumb .breadcrumb ul {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

.content-breadcrumb .breadcrumb li {
  display: inline-block;
  position: relative;
  padding-right: 1.2em;
  list-style-type: none;
  font-size: 1.2rem;
  color: var(--font50);
}
.content-breadcrumb .breadcrumb li:not(:last-child):after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 5px;
  height: 5px;
  border-top: 1px solid #666;
  border-right: 1px solid #666;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}

.content-breadcrumb .breadcrumb li a {
  color: var(--font50);
}

@media (max-width: 900px) {
  .content-breadcrumb {
    margin-bottom: 0rem;
  }

  .content-breadcrumb .breadcrumb ul {
    flex-wrap: wrap;
  }
}

/* form-input-wrap
======================================== */
.form-input-wrap {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

.form-input-wrap .group-input {
  margin-top: 0;
  align-items: flex-start;
}

.form-input-wrap .group-input .col-2 {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  gap: 1rem;
}

.form-input-wrap .group-input .col-2:has(.error) {
  grid-auto-flow: row;
}

.form-input-wrap .group-input label:not(.custom-control-label) {
  padding: 0.82rem 0;
  font-size: 1.4rem;
  color: var(--font100);
}

.form-input-wrap .error-placement {
  gap: 1rem;
}

.form-input-wrap .group-input label.error {
  width: 100%;
  margin-top: -0.5rem;
  font-size: 1.1rem;
  color: var(--bgred);
}

.form-input-wrap .group-input-in-label {
  position: relative;
  padding: 1rem;
  background-color: var(--gray10);
  border: 1px solid var(--gray20);
  border-radius: 0.6rem;
  line-height: 1.5;
}

.form-input-wrap .group-input-in-label label {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  color: var(--font25);
  font-weight: 300;
}

.form-input-wrap .group-input-in-label input {
  margin: 0;
  padding: 0;
  font-size: 1.4rem;
  color: var(--font100);
  border-color: transparent;
  background-color: var(--gray10);
  border-radius: 0;
}

.form-input-wrap .group-input-in-label label.error {
  margin-top: -0.5rem;
  font-size: 1.1rem;
  color: var(--bgred);
}

.form-input-wrap .group-input-in-label input:-webkit-autofill {
  box-shadow: 0 0 0 10rem var(--gray10) inset;
  -webkit-text-fill-color: var(--font100) !important;
}

.forgot-passowrd .form-input-wrap .group-input-in-label label.error {
  position: absolute;
  bottom: -2.5rem;
  left: 0;
}

.form-input-wrap .group-input select {
  position: relative;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-position: calc(100% - 0.3rem) center;
  background-size: 24px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 -960 960 960" width="100%" fill="%2398a2b3"><path d="M480-346.85 253.85-573 291-610.15l189 189 189-189L706.15-573 480-346.85Z"/></svg>');
  background-repeat: no-repeat;
  cursor: pointer;
}

.form-input-wrap .group-input select:focus {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 -960 960 960" width="100%" fill="%2398a2b3"><path d="m480-538.85-189 189L253.85-387 480-613.15 706.15-387 669-349.85l-189-189Z"/></svg>');
}

.input-unit-wrap {
  margin-left: 0.4rem;
  margin-right: 0.4rem;
}

.input-guid {
  margin: 0.4rem 0 0.4rem 0.1rem;
  font-size: 1.2rem;
  color: var(--font50);
}

.input-guid a {
  display: flex;
  align-items: center;
}

.input-guid i {
  margin-left: 0.5rem;
}

.input-guid i.ma-icons-o {
  font-size: 1.6rem;
}

.input-guid.inline-gap {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* form-button-wrap
======================================== */
.form-button-wrap {
  display: grid;
  grid-auto-flow: column;
  gap: 1.6rem;
}

/* guid
======================================== */
.guid-wrap p {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-bottom: 0.6rem;
}

.text-color-main {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  color: var(--bland100) !important;
}

.text-color-main i {
  margin-left: 0.4rem;
  font-size: 1.6rem;
}

.guid-wrap .guid {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  color: var(--font50);
}

.guid-wrap .guid.center {
  text-align: center;
}

.guid-wrap .guid.important {
  padding: 0.4rem;
  font-size: 1.4rem;
  color: var(--font100);
  background-color: var(--warning100);
}

.guid-wrap .guid.indent {
  text-indent: -1.2rem;
  margin-left: 1.2rem;
}

.guid-wrap .actionlink {
  margin: 0 0.5rem;
  text-decoration: underline;
}

/* list-guid
------------------------------ */
.list-guid {
  margin: 0;
  padding-inline-start: 2rem;
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--font50);
}

.list-guid li + li {
  margin-top: 1rem;
}

/* pickup-guid
------------------------------ */
.pickup-guid {
  margin-top: 1rem;
  text-align: center;
}
.pickup-guid .title {
  margin: 0;
  font-size: 1.2rem;
  color: var(--font50);
}

.pickup-guid .item {
  margin: 0.8rem 0;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 500;
  padding-bottom: 0.5rem;
  border-bottom: solid 1px var(--line100);
}

/* mypage content-box-wrap register
======================================== */
.content-box-wrap.register {
  width: 60rem;
}

.content-box-wrap.register .form-input-wrap {
  display: grid;
  gap: 1rem;
  padding: 0 0 3rem;
}

.content-box-wrap.register div.title {
  font-size: 2rem;
  font-weight: 600;
  color: var(--bland100);
}

.content-box-wrap.register .guid {
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--font50);
}

.content-box-wrap.register .guid-center {
  text-align: center;
}

.content-box-wrap.register .guid-center .item-title {
  font-size: 1.2rem;
  color: var(--font50);
}

.content-box-wrap.register .guid-center .item-label {
  margin-left: 1rem;
  font-size: 1.4rem;
  color: var(--font100);
}

.form-input-wrap.register .btn-wrapper .btn {
  padding: 1.8rem 2rem;
}

@media (max-width: 900px) {
  .content-box-wrap.register {
    width: 100%;
  }

  .content-box-wrap.register div.title {
    font-size: 1.8rem;
  }
}

/* mypage home
======================================== */
.container.home {
  height: 100%;
}

.home .center-content {
  height: calc(100% - 3rem);
  gap: 2rem;
}

.home .btn-wrapper {
  width: 100%;
}

.home .content-box-wrap {
  gap: 0;
}

.avatar-icon-wrap {
  display: grid;
  width: 100%;
  height: 100%;
  place-content: center;
}

.apply-insurance .avatar,
.membership-card .avatar {
  display: grid;
  place-content: center;
  width: 180px;
  height: 180px;
  margin: auto;
  background-color: var(--uniq20);
  border-radius: 100%;
}

.avatar .ma-icons-o {
  font-size: 140px;
  color: var(--font50);
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

p.contract {
  margin-top: 0;
}

@media (max-width: 900px) {
  .home .center-content {
    flex-direction: column;
  }
}

/* mypage transaction-law
======================================== */
.transaction-law table {
  border-collapse: collapse;
}

.transaction-law table th,
.transaction-law table td {
  padding: 1rem;
  border: solid 1px var(--line25);
}

.transaction-law table th {
  background-color: var(--uniq20);
}

.transaction-law table td {
  background-color: var(--bg0);
}

.transaction-law table td a {
  color: var(--font150);
}

.transaction-law .btn-wrapper {
  margin-top: 2rem;
}

/* mypage terms
======================================== */
.terms .main-content {
  gap: 4rem;
}

.terms .main-content-wrap {
  display: inline;
  gap: 0;
}

.terms .head-message {
  margin: 0 0 0 0;
  padding: 0;
  font-size: 1.4rem;
  font-weight: 300;
}

.terms h2 {
  margin: 4rem 0 0 0;
  padding: 0;
  font-size: 1.8rem;
  font-weight: 700;
}

.terms h3 {
  margin: 2rem 0 0 0;
  padding: 0;
  font-size: 1.6rem;
  font-weight: 700;
}

.terms p {
  margin: 2rem 0 0 0;
  padding: 0;
  font-size: 1.4rem;
  font-weight: 300;
}

.terms p.comment {
  margin-top: 1rem;
  margin-left: 3em;
}

.terms p.indent1 {
  text-indent: -1.5rem;
  margin-left: 1.5rem;
}

.terms p.indent2 {
  text-indent: -4.5rem;
  margin-left: 4.5rem;
}

.terms p a {
  color: var(--font50);
}

/* mypage contact-input
======================================== */
.main-section.contact-input .btn-wrapper {
  margin-top: 3rem;
}

/* mypage policy
======================================== */
.policy-confirm {
  max-height: 12rem;
  margin: 0;
  padding: 1.6rem;
  line-height: 1.7;
  border: 1px solid var(--line50);
  border-radius: 0;
  overflow-y: auto;
}

.policy-confirm p {
  margin: 0;
  font-size: 1.4rem;
  color: var(--font50);
}
.policy-confirm p.title {
  margin-bottom: 0.5rem;
}

.confirm-all-wrap {
  text-align: center;
}

.confirm-all-wrap .custom-control-label {
  padding: 1rem 2rem 1rem 6rem;
  font-size: 1.6rem;
}

.confirm-all-wrap .custom-control {
  padding-right: 2.6rem;
}

.confirm-all-wrap .custom-control.custom-checkbox .custom-control-label:before {
  top: 2.2rem;
  left: 3rem;
  transform: translateY(-50%);
}

.confirm-all-wrap .custom-control.custom-checkbox .custom-control-label:after {
  top: 1.8rem;
  left: 3.4rem;
}

@media (max-width: 900px) {
  .confirm-all-wrap .custom-control {
    padding-left: 0;
    padding-right: 0;
  }
}

/* mypage application-register
======================================== */
.application-register .form-button-wrap {
  margin-top: 4rem;
}

/* mypage application-index
======================================== */
.application-index .section-wrap {
  padding: 2rem;
  border-radius: 1.2rem;
  background-color: var(--gray10);
}

.application-index .person-section {
  padding: 2rem;
  background-color: var(--gray10);
  border-radius: 0.8rem;
}

.application-index .person-section .guid-wrap {
  margin-bottom: 2rem;
}

.application-index .person-section .form-input-wrap {
  gap: 1rem;
}

.application-index .person-section .form-input-wrap .group-input input[type='text'] {
  border-width: 1px;
  border-color: #e7e8ef;
}

.application-index .form-button-wrap {
  margin-top: 2rem;
}

.application-index .content-group-wrap .form-button-wrap {
  margin-top: 3rem;
  margin-bottom: 0;
  justify-content: center;
  grid-template-columns: 1fr 1fr;
}

.application-index .form-button-wrap .btn-wrapper {
  align-items: flex-start;
}

.application-index .form-button-wrap .btn-wrapper + .btn-wrapper {
  flex-direction: column;
  gap: 0.4rem;
}

@media (max-width: 900px) {
  .application-index .content-group-wrap .form-button-wrap {
    justify-content: flex-start;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }
}

/* mypage application-plan
======================================== */
.application-plan .main-content-wrap {
  gap: 2rem;
}

.application-plan .section-wrap {
  gap: 2rem;
}

.application-plan .title-section {
  padding-left: 2rem;
  border-left: solid 4px var(--bland100);
}

.application-plan .title-section .title {
  margin: 0;
  padding: 2px 0;
  font-size: 2rem;
  font-weight: 700;
  color: var(--bland100);
}

.application-plan .person-section {
  padding: 2rem;
  background-color: var(--gray10);
  border-radius: 0.8rem;
}

.application-plan .person-section .title {
  margin: 0;
  padding: 0 0 2rem 0;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--bland100);
}

.application-plan .person-section .form-input-wrap .group-input {
  align-items: center;
}

.application-plan .person-section .form-input-wrap .group-input input[type='text'] {
  border-width: 1px;
  border-color: #e7e8ef;
}

.application-plan .download-section {
  display: none;
}

.application-plan .download-section a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem;
  border: 1px solid var(--line50);
  border-radius: 0.8rem;
  background-color: var(--uniq10);
}

.application-plan .group-input label.item-label {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--bland100);
}

.order-section .form-input-wrap {
  gap: 2rem;
}

.application-plan .order-section .group-input .guid {
  margin-top: 0.5rem;
}

.application-plan .order-section .group-input.limit-guid {
  margin-top: -1rem;
  color: var(--font50);
}

.application-plan .order-section .group-input .insurance-period {
  padding: 2rem;
  background-color: var(--gray10);
  border: solid 2px var(--line50);
  border-radius: 0.8rem;
}

.application-plan .order-section .group-input .insurance-period p.guid-attention {
  margin: 0 0 0 2rem;
  text-indent: -1.9rem;
}

.application-plan .order-section .group-input .insurance-period p.guid-attention:not(:first-of-type) {
  display: none;
}

.insurance-period .custom-control.custom-radio .custom-control-label:before {
  border-width: 2px;
}

.application-plan .order-section .group-input .insurance-period .custom-control {
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: 1px solid var(--line50);
}

.application-plan .order-section .group-input .insurance-period label {
  padding: 0.8rem 0;
  font-size: 1.4rem;
  color: var(--font100);
}

.application-plan .plan-select-section {
  display: grid;
  gap: 2rem;
}

.application-plan .plan-select-section .insurance-category {
  margin: 2rem 0 0;
  color: var(--font50);
}

.application-plan .plan-select-section .insurance-category .mark-new {
  margin-left: 0.6rem;
  padding: 0.2rem 0.8rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--font0);
  background-color: var(--bgred);
  border-radius: 1.2rem;
}

.application-plan .plan-select-section .insurance-plan-wrap tbody tr {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line50);
}

.application-plan .plan-select-section .insurance-plan-list {
  width: 100%;
  border-collapse: collapse;
}

.application-plan .plan-select-section .insurance-plan-list th:nth-child(1),
.application-plan .plan-select-section .insurance-plan-list td:nth-child(1) {
  width: 30%;
}

.application-plan .plan-select-section .insurance-plan-list th:nth-child(2),
.application-plan .plan-select-section .insurance-plan-list td:nth-child(2) {
  width: 50%;
}

.application-plan .plan-select-section .insurance-plan-list th:nth-child(3),
.application-plan .plan-select-section .insurance-plan-list td:nth-child(3) {
  width: 20%;
}

.application-plan .plan-select-section .insurance-plan-list th:nth-child(2),
.application-plan .plan-select-section .insurance-plan-list th:nth-child(3),
.application-plan .plan-select-section .insurance-plan-list td:nth-child(3) {
  text-align: right;
}

.application-plan .plan-select-section .insurance-plan-list th {
  padding-bottom: 1rem;
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--font50);
}

.application-plan .plan-select-section .insurance-plan-list td {
  padding: 0.6rem 0;
  font-size: 1.5rem;
  font-weight: 300;
}

.application-plan .plan-select-section .insurance-plan-list .compensation {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.application-plan .plan-select-section .insurance-plan-list .premium {
  white-space: nowrap;
}

.application-plan .plan-select-section .insurance-plan-list td:nth-child(1) {
  vertical-align: top;
}

.application-plan .plan-select-section .insurance-plan-list td:nth-child(2) {
  color: var(--font150);
}

.application-plan .plan-select-section .insurance-plan-list .insurance-unit-apply td > div {
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  white-space: nowrap;
  justify-content: flex-end;
  margin-right: 1rem;
}

.application-plan .plan-select-section .insurance-plan-list .insurance-unit-apply td > div .unit-apply-quantity {
  width: 6rem;
  margin: 0 1rem;
}

.application-plan .plan-select-section .selected-total-premium {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem;
  border-radius: 0.8rem;
  background-color: var(--uniq20);
}

.application-plan .plan-select-section .selected-total-premium .title {
  margin: 0;
  padding: 0;
  font-size: 1.4rem;
  font-weight: 500;
  border-bottom: none;
}

.application-plan .plan-select-section .disp-total-wrap .spacer:before {
  display: block;
  content: '';
  height: 1rem;
}

.application-plan .plan-select-section .selected-total-premium .premium {
  margin: 0;
  padding: 0;
  font-size: 1.6rem;
  font-weight: 500;
}

.application-plan .plan-select-section .selected-total-premium .premium span {
  margin: 0 0.5rem;
  padding: 0;
  font-size: 2rem;
  font-weight: 700;
}

.application-plan .section-wrap .form-button-wrap {
  margin-top: 2rem;
}

@media (max-width: 900px) {
  .application-plan .plan-select-section .insurance-plan-list .insurance-unit-apply td > div {
    white-space: wrap;
  }
  .application-plan .plan-select-section .insurance-plan-list .compensation {
    flex-direction: column;
    font-size: 1.5rem;
  }
}

/* mypage application-confirm
======================================== */
.application-confirm .main-content-wrap {
  gap: 1rem;
}

.application-confirm .main-content-wrap .btn-wrapper {
  margin-top: 2rem;
}

/* mypage application-cart
======================================== */
.application-cart .cart-wrap {
  overflow: hidden;
}

.application-cart .cart-item-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 2rem;
  list-style-type: none;
  border-radius: 1.2rem;
  background-color: var(--gray20);
}

.application-cart .cart-item-wrap li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.application-cart .cart-item-wrap li.plan-names .value {
  width: 16rem;
}

.application-cart .cart-item-wrap.premium-total {
  flex-direction: column;
  align-items: flex-end;
}

.application-cart .cart-item-wrap .title {
  font-size: 1.2rem;
  color: var(--font50);
}

.application-cart .cart-item-wrap .buttons {
  width: 6.4rem;
  justify-content: flex-end;
}

.application-cart .person-name {
  width: 11rem;
}

.application-cart .person-name span {
  display: block;
  font-size: 1.1rem;
}

.application-cart .plan-names span {
  font-size: 1.2rem;
}

.application-cart .premium {
  width: 15rem;
  font-size: 1.6rem;
}

.application-cart .premium span {
  margin-left: 0.2rem;
  font-size: 1.2rem;
}

.application-cart .cart-item-wrap.premium-total .title {
  font-size: 1.4rem;
}

.application-cart .cart-item-wrap.premium-total .premium {
  width: 8rem;
  font-size: 1.6rem;
  text-align: right;
}

@media (max-width: 900px) {
  .application-cart .cart-item-wrap {
    flex-wrap: wrap;
    gap: 2rem;
  }
  .application-cart .cart-item-wrap li.plan-names .value {
    width: auto;
  }
  .application-confirm .main-content-wrap .btn-wrapper {
    flex-wrap: wrap;
  }
  .application-confirm .btn-wrapper .button-cancel {
    order: 2;
  }
}

/* mypage application-cart-total
======================================== */
.application-cart-total {
  margin-bottom: 2rem;
}

.application-cart-total .cart-wrap {
  overflow: hidden;
}

.application-cart-total .cart-item-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 2rem;
  list-style-type: none;
  border-radius: 1.2rem;
  background-color: var(--uniq20);
}

.application-cart-total .cart-item-wrap li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.application-cart-total .cart-item-wrap.premium-total {
  flex-direction: column;
  align-items: flex-end;
}

.application-cart-total .cart-item-wrap.premium-total .title {
  font-size: 1.4rem;
  color: var(--font100);
}

.application-cart-total .cart-item-wrap.premium-total .premium {
  width: 10rem;
  font-size: 2rem;
  font-weight: 500;
  text-align: right;
}

.application-cart-total .premium span {
  margin-left: 0.2rem;
  font-size: 1.4rem;
}

/* mypage application-cart-payment
======================================== */
.application-payment .main-content-wrap {
  gap: 0;
}

.application-payment .box-content.detail {
  padding: 0;
}

.application-cart-payment + .btn-wrapper {
  margin-top: 2rem;
}

.application-cart-payment .input-radio-wrap {
  padding: 2rem;
}

.application-cart-payment .input-radio-wrap .group-input {
  margin-top: 0;
}

.application-cart-payment .input-radio-wrap .group-input + .group-input {
  padding-top: 0.5rem;
}

.application-cart-payment .input-radio-wrap .custom-control-label {
  display: block;
  margin: 0;
  padding: 0.5rem 0;
  font-size: 1.4rem;
  border-bottom: solid 1px var(--line50);
}

.application-cart-payment .input-radio-wrap .payment-description {
  padding: 1rem 0;
}
.application-cart-payment .input-radio-wrap .payment-description p {
  margin: 0;
  padding: 0;
  font-size: 1.2rem;
  color: var(--font50);
}

.application-cart-payment .input-radio-wrap .payment-description img {
  width: 80%;
  padding: 2rem 0 0;
}

.application-cart-payment .input-radio-wrap .custom-control.custom-radio {
  width: 100%;
  margin-left: 1rem;
}

@media (max-width: 900px) {
  .application-payment .box-content {
    flex-wrap: wrap;
    gap: 2rem;
  }
  .application-payment .main-content-wrap .btn-wrapper {
    flex-wrap: wrap;
  }
  .application-payment .btn-wrapper .button-cancel {
    order: 2;
  }
  .box-content {
    padding: 0;
  }
  .application-cart-payment .input-radio-wrap .payment-description img {
    width: 100%;
  }
  .box-content .contract:empty {
    margin: 0;
  }
}

/* mypage contract-list
======================================== */
.main-section.contract .main-content {
  padding: 0;
  gap: 0;
}

.main-section.contract .main-content > .title {
  padding: 2rem;
  font-size: 2rem;
  font-weight: 500;
  color: var(--font100);
  border-bottom: 1px solid var(--line40);
}

.main-section.contract .main-content .status-guid-wrap {
  padding: 1rem 2rem;
  font-size: 1.2rem;
}
.main-section.contract .main-content .status-guid-wrap ul {
  margin: 0;
  padding: 0;
}
.main-section.contract .main-content .status-guid-wrap li {
  margin-left: 5em;
  margin-bottom: 0.4rem;
  text-indent: -5em;
  list-style-type: none;
}
.main-section.contract .main-content .status-guid-wrap .application-status span {
  display: inline-block;
  min-width: 6rem;
  margin-right: 1rem;
  padding: 0.4rem;
  font-size: 1rem;
  color: var(--font0);
  text-indent: 0;
  text-align: center;
  border-radius: 0.4rem;
}
.main-section.contract .main-content .status-guid-wrap .application-status:has(.status-1) span {
  background-color: var(--bg0) !important;
}
.main-section.contract .main-content .status-guid-wrap .application-status:has(.status-2) span {
  background-color: var(--warning100) !important;
}
.main-section.contract .main-content .status-guid-wrap .application-status:has(.status-3) span {
  background-color: var(--success100) !important;
}
.main-section.contract .main-content .status-guid-wrap .application-status:has(.status-4) span {
  background-color: var(--btn100) !important;
}
.main-section.contract .main-content .status-guid-wrap .application-status:has(.status-5) span {
  background-color: var(--font50) !important;
}
.main-section.contract .main-content .status-guid-wrap .application-status:has(.status-6) span {
  background-color: var(--error100) !important;
}

.main-section.contract .main-content .main-content-wrap {
  padding: 2rem;
}

.main-section.contract .contract-list {
  border-collapse: collapse;
}

.main-section.contract .contract-list tbody {
  background-color: transparent;
}

.main-section.contract .contract-list .toggle-detail td {
  background-color: var(--gray20);
}

.main-section.contract .contract-list th:nth-child(4),
.main-section.contract .contract-list td:nth-child(4) {
  text-align: right;
}

.main-section.contract .contract-list th:nth-child(5),
.main-section.contract .contract-list td:nth-child(5) {
  width: 10rem;
  text-align: center;
}

.main-section.contract .contract-list th:nth-child(6),
.main-section.contract .contract-list td:nth-child(6) {
  width: 4.2rem;
}

.main-section.contract .contract-list .toggle-detail td:first-child {
  border-radius: 0.8rem 0 0 0.8rem;
}
.main-section.contract .contract-list .toggle-detail td:last-child {
  border-radius: 0 0.8rem 0.8rem 0;
}

.main-section.contract .contract-list th,
.main-section.contract .contract-list td {
  padding: 1.2rem 1rem;
  font-size: 1.4rem;
}

.main-section.contract .contract-list th {
  font-size: 1.2rem;
  color: var(--font50);
  text-align: left;
}

.main-section.contract .contract-list th p,
.main-section.contract .contract-list td p {
  margin: 0;
  padding: 0;
}

.main-section.contract .contract-list td span.label {
  display: none;
  margin-left: 0.4rem;
  font-size: 1.2rem;
}

.main-section.contract .contract-list td .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0;
  padding: 4px;
  font-size: 2.4rem;
}
.main-section.contract .contract-list .toggle-detail td .application-status {
  display: inline-block;
  width: 100%;
  padding: 0.8rem 1.8rem;
  font-size: 1.3rem;
  color: var(--bg0);
  text-align: center;
  white-space: nowrap;
  border-width: 0.1rem;
  border-radius: 0.6rem;
  background-color: var(--uniq20);
}

.main-section.contract .contract-list .toggle-detail td .application-status:has(.status-1) {
  background-color: var(--bg0) !important;
}
.main-section.contract .contract-list .toggle-detail td .application-status:has(.status-2) {
  background-color: var(--warning100) !important;
}
.main-section.contract .contract-list .toggle-detail td .application-status:has(.status-3) {
  background-color: var(--success100) !important;
}
.main-section.contract .contract-list .toggle-detail td .application-status:has(.status-4) {
  background-color: var(--btn100) !important;
}
.main-section.contract .contract-list .toggle-detail td .application-status:has(.status-5) {
  background-color: var(--font50) !important;
}
.main-section.contract .contract-list .toggle-detail td .application-status:has(.status-6) {
  background-color: var(--error100) !important;
}

.main-section.contract .contract-list .detail td {
  padding: 5px 0;
}

.main-section.contract .contract-list .detail-data-wrap {
  display: none;
  padding-bottom: 2rem;
}

.main-section.contract .contract-list .detail-data-wrap .title {
  margin-bottom: 1rem;
  padding: 0.4rem 0 0.4rem 0.4rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--bland100);
  border: none;
  border-left: solid 4px var(--bland100);
}

.main-section.contract .contract-list .detail-data-wrap .sub-title {
  margin-bottom: 1rem;
  padding: 0.4rem 0 0.4rem 0.4rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--font50);
  border: none;
}

.main-section.contract .contract-list .detail-data-wrap .contract-section {
  padding: 1rem;
}

.main-section.contract .contract-list .colomn-data-list {
  display: grid;
  column-gap: 3rem;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.main-section.contract .contract-list .colomn-data-list.person {
  padding: 1.6rem;
  border-radius: 0.8rem;
  background-color: var(--uniq10);
}

.main-section.contract .contract-list .colomn-data-list.plan {
  grid-template-columns: 1fr;
  padding: 1.6rem;
  border-radius: 0.8rem;
  background-color: var(--uniq10);
}

.main-section.contract .contract-list .colomn-data-list li {
  display: flex;
}

.main-section.contract .contract-list .colomn-data-list li label {
  width: 14.4rem;
  margin: 0;
  padding: 0.6rem 0;
  font-size: 1.2rem;
}

.main-section.contract .contract-list .colomn-data-list li p {
  width: 100%;
  margin: 0;
  padding: 0.6rem 0;
  font-size: 1.2rem;
  border-bottom: solid 1px var(--line80);
}

.main-section.contract .contract-list .colomn-data-list li p span + span {
  margin-left: 1rem;
}

.main-section.contract .detail-data-wrap .contract-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.main-section.contract .detail-data-wrap .contract-buttons .cancel {
  color: var(--font50);
}

@media (max-width: 900px) {
  .main-section.contract .contract-list thead th {
    display: block;
    width: 100%;
    padding: 0.2rem 0;
    margin: 0;
  }

  .main-section.contract .contract-list .toggle-detail {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background-color: var(--gray20);
    border-radius: 0.6rem;
  }

  .main-section.contract .contract-list .toggle-detail td {
    display: block;
    width: 100%;
    margin: 0;
  }

  .main-section.contract .contract-list .toggle-detail td .label {
    display: block;
    margin: 0 0 0.4rem 0;
    font-size: 1.1rem;
    color: var(--font50);
  }

  .main-section.contract .toggle-detail td + td span.label {
    margin-top: 1rem;
  }

  .main-section.contract .contract-list .toggle-detail td {
    padding: 0 1.2rem;
    background-color: transparent;
    order: 1;
  }

  .main-section.contract .contract-list .toggle-detail td:has(.application-status) {
    position: absolute;
    width: max-content;
    right: 0;
    padding: 1.2rem 1.2rem 0;
    order: 0;
  }

  .main-section.contract .contract-list .toggle-detail td:first-child {
    padding: 1.2rem 1.2rem 0;
    border-radius: 0;
  }

  .main-section.contract .contract-list .toggle-detail td:last-child {
    margin-left: auto;
    padding: 0 1.2rem 1.2rem;
    width: 100%;
    border-radius: 0 0 0.6rem 0.6rem;
    order: 10;
  }

  .main-section.contract .contract-list td span {
    display: inline;
  }

  .main-section.contract .contract-list th:nth-child(4),
  .main-section.contract .contract-list td:nth-child(4) {
    text-align: left;
  }

  .main-section.contract .contract-list th:nth-child(5),
  .main-section.contract .contract-list td:nth-child(5) {
    width: 100%;
    text-align: right;
    order: 1;
  }

  .main-section.contract .contract-list td .button {
    margin: 0 0 0 auto;
  }

  .contract-list thead {
    display: none;
  }
  .main-section.contract .contract-list .colomn-data-list {
    grid-template-columns: 1fr;
  }

  .main-section.contract .detail-data-wrap .contract-buttons {
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
  }

  .main-section.contract .detail-data-wrap .contract-buttons .btn-wrapper {
    flex-wrap: wrap;
  }

  .main-section.contract .detail-data-wrap .contract-buttons .cancel {
    padding: 1rem 0;
  }
}

/* mypage contract-detail
======================================== */
.main-section.contract-detail .main-content {
  padding: 0;
  gap: 0;
}

.main-section.contract-detail .main-content > .title {
  padding: 2rem;
  font-size: 2rem;
  font-weight: 500;
  color: var(--font100);
  border-bottom: 1px solid var(--line50);
}

.main-section.contract-detail .main-content .main-content-wrap {
  padding: 2rem 4rem 4rem;
  gap: 2rem;
}

.main-section.contract-detail .main-content-wrap .contet-title {
  padding: 2rem;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  background-color: var(--uniq10);
  border-radius: 0.6rem;
}

.main-section.contract-detail .main-content-wrap .desc {
  padding: 0;
}

.main-section.contract-detail .main-content-wrap .desc p {
  margin: 0;
  padding: 0.4rem 0;
  font-size: 1.4rem;
}

.main-section.contract-detail .main-content-wrap .attention {
  padding: 2rem;
  font-size: 1.2rem;
  background-color: var(--success10);
}

.main-section.contract-detail .main-content-wrap .attention p {
  margin: 0;
  padding: 0.4rem 0;
}

.main-section.contract-detail .btn-wrapper {
  padding-top: 2rem;
}

.contract-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 4rem;
}

.contract-info-header > div > span {
  margin-right: 0.5rem;
  font-size: 1.2rem;
  color: var(--font50);
}

.contract-info-header .status {
  margin: 0;
  padding: 0.8rem 1.6rem;
  font-size: 1.2rem;
  color: var(--bg0);
  line-height: 1.5;
  background-color: var(--btn100);
  border-radius: 0.6rem;
}

.contract-main-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  padding: 2rem;
  background-color: var(--gray10);
  border-radius: 0.6rem;
}

.contract-main-info.sub-head {
  padding: 0;
  background-color: var(--bg0);
  border-radius: 0;
}

.contract-main-info.col-4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2rem;
}

.contract-main-info.col-4 .button-submit {
  margin-top: auto;
  padding: 1rem;
  font-size: 1.2rem;
}

.contract-main-info-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.contract-main-info-wrap .data-column {
  width: 100%;
  max-width: none;
  flex: none;
  border-bottom: solid 1px var(--line50);
}

.contract-main-info-wrap .data-column p {
  margin: 0;
  padding: 0.2rem 0;
}

.contract-main-info-wrap .data-column p.label {
  font-size: 1.2rem;
  color: var(--font50);
}

.contract-main-info-wrap .data-column p.value {
  font-size: 1.4rem;
  padding: 0.2rem 0 0.6rem;
  min-height: 2.8rem;
}

.contract-main-info-wrap .data-column p.value span.block {
  display: block;
}

@media (max-width: 900px) {
  .main-section.contract-detail .main-content .main-content-wrap {
    padding: 2rem 2rem 4rem;
  }

  .contract-main-info {
    grid-template-columns: 1fr;
  }

  .contract-main-info.sub-head {
    gap: 2rem;
  }

  .contract-main-info.col-4 {
    grid-template-columns: 1fr;
  }

  .contract-info-header {
    position: relative;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem 2rem;
  }
  .contract-info-header > div > span {
    min-width: 7rem;
    display: inline-block;
  }

  .contract-info-header p {
    margin: 0.4rem 0;
  }

  .contract-info-header .status {
    position: absolute;
    right: 2rem;
  }

  .main-section.contract-detail .button {
    width: 100% !important;
  }

  .main-section.contract-detail .btn-wrapper {
    flex-direction: column;
  }
}

/* mypage contract-confirm
======================================== */
.main-section.contract-confirm .main-content {
  padding: 0;
  gap: 0;
}

.main-section.contract-confirm .main-content > .title {
  padding: 2rem;
  font-size: 2rem;
  font-weight: 500;
  color: var(--font100);
  border-bottom: 1px solid var(--line50);
}

.main-section.contract-confirm .main-content .main-content-wrap {
  padding: 2rem 4rem 4rem 4rem;
  gap: 2rem;
}

.main-section.contract-confirm .main-content .type-title-wrap {
  padding: 1rem 4rem;
  text-align: center;
  background-color: var(--uniq10);
  border-radius: 0.6rem;
}

.main-section.contract-confirm .main-content .type-title-wrap {
  padding: 2rem;
}

.main-section.contract-confirm .main-content .type-title-wrap .type-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
}

.main-section.contract-confirm .main-content .contet-title-wrap {
  display: grid;
  gap: 1rem;
}

.main-section.contract-confirm .main-content .contet-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--font100);
  text-align: center;
}

.main-section.contract-confirm .main-content .contet-title-sub {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--font50);
  text-align: center;
}

.main-section.contract-confirm .main-content .person-data {
  padding: 1rem 2rem 2rem;
  background-color: var(--gray10);
  border-radius: 0.6rem;
}

.main-section.contract-confirm .btn-wrapper {
  padding: 0 4rem 4rem;
}

@media (max-width: 900px) {
  .main-section.contract-confirm .main-content .main-content-wrap {
    padding: 2rem;
  }
  .main-section.contract-confirm .main-content form#contract-form {
    padding: 0 2rem 2rem;
  }
  .main-section.contract-confirm .btn-wrapper {
    padding: 0 2rem 4rem;
  }
}

/* mypage contract-edit
======================================== */
.main-section.contract-edit .main-content {
  padding: 0;
  gap: 0;
}

.main-section.contract-edit .main-content > .title {
  padding: 2rem;
  font-size: 2rem;
  font-weight: 500;
  color: var(--font100);
  border-bottom: 1px solid var(--line50);
}

.main-section.contract-edit .main-content .main-content-wrap {
  padding: 2rem 4rem 4rem 4rem;
  gap: 2rem;
}

.main-section.contract-edit .main-content .contet-title {
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
}

.main-section.contract-edit .main-content .contet-title p {
  margin: 1rem 0 2rem;
  padding: 0;
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--font50);
}

.main-section.contract-edit .main-content form#contract-form {
  padding: 0 4rem 2rem;
}

.main-section.contract-edit .main-content .contract-data {
  margin: 0 0 2rem;
  padding: 2rem;
  background-color: var(--gray10);
  border-radius: 0.6rem;
}

.main-section.contract-edit .main-content .contract-data .group-input {
  margin-top: 0;
}

.main-section.contract-edit .cautionary-note {
  margin: 0 0 2rem;
  padding: 2rem;
  font-size: 1.4rem;
  color: var(--font50);
  border-radius: 0.6rem;
  border: 1px solid var(--line50);
}

.main-section.contract-edit .cautionary-note .title {
  margin: 0;
  padding: 0;
}

.main-section.contract-edit .cautionary-note ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.main-section.contract-edit .cautionary-note li {
  text-indent: -1em;
  margin-left: 1em;
}

.main-section.contract-edit .cautionary-note li + li {
  margin-top: 0.6rem;
}

.main-section.contract-edit .input-box-wrap {
  display: flex;
}

.main-section.contract-edit .btn-wrapper {
  padding: 2rem 2rem 4rem;
}

.main-section.contract-edit .checkbox-confirm {
  display: inline-block;
  max-width: none;
  margin: 0 auto;
  padding: 1rem 1rem 1rem 4rem;
  font-size: 1.6rem;
  text-align: center;
  color: var(--font100);
  line-height: inherit;
  background-color: var(--line80);
  border-radius: 0.6rem;
  border: solid 1px #9a98c6;
  cursor: pointer;
}

.main-section.contract-edit .checkbox-confirm .custom-control-label {
  font-size: 1.6rem;
}

.main-section.contract-edit .input-form {
  padding: 2rem;
  background-color: var(--uniq10);
  border-radius: 0.6rem;
}

@media (max-width: 900px) {
  .main-section.contract-edit .main-content .main-content-wrap {
    padding: 2rem;
  }
  .main-section.contract-edit .main-content form#contract-form {
    padding: 0 2rem 2rem;
  }
}

/* mypage contract-change
======================================== */
.main-section.contract-change .main-content {
  padding: 0;
  gap: 0;
}

.main-section.contract-change .main-content > .title {
  margin: 0;
  padding: 2rem;
  font-size: 2rem;
  font-weight: 500;
  color: var(--font100);
  border-bottom: 1px solid var(--line50);
}

.main-section.contract-change .main-content .main-content-wrap {
  padding: 2rem 4rem 4rem 4rem;
  gap: 2rem;
}

.contract-info-now {
  display: flex;
  gap: 4rem;
  padding: 2rem;
  background-color: var(--uniq10);
  border-radius: 0.6rem;
}

.contract-info-now .info-item-wrap {
  min-width: 10rem;
}

.contract-info-now .info-item-wrap.right {
  margin-left: auto;
}

.contract-info-now .info-item-wrap .label {
  font-size: 1.2rem;
  color: var(--font50);
}

.contract-info-now .info-item-wrap .value {
  font-size: 1.4rem;
  color: var(--font150);
}

@media (max-width: 900px) {
  .main-section.contract-change .main-content .main-content-wrap {
    padding: 2rem 2rem 4rem;
  }
  .contract-info-now {
    display: grid;
    gap: 1rem;
  }
  .contract-info-now .info-item-wrap.right {
    margin-left: 0;
  }
}

/* mypage contract-payment
======================================== */
.main-section.contract-payment .main-content {
  padding: 0;
  gap: 0;
}

.main-section.contract-payment .main-content > .title {
  margin: 0;
  padding: 2rem;
  font-size: 2rem;
  font-weight: 500;
  color: var(--font100);
  border-bottom: 1px solid var(--line50);
}

.main-section.contract-payment .main-content .main-content-wrap {
  padding: 2rem 4rem 4rem;
  gap: 2rem;
}

.main-section.contract-payment .box-content.detail {
  padding: 0;
}

@media (max-width: 900px) {
  .main-section.contract-payment .main-content .main-content-wrap {
    padding: 2rem 2rem 4rem;
  }
  .main-section.contract-payment .btn-wrapper {
    flex-wrap: wrap;
  }
}

/* mypage contract-delete
======================================== */
.main-section.contract-delete .main-content {
  padding: 0;
  gap: 0;
}

.main-section.contract-delete .policy-confirm {
  max-height: max-content;
}

.main-section.contract-delete .main-content > .title {
  margin: 0;
  padding: 2rem;
  font-size: 2rem;
  font-weight: 500;
  color: var(--font100);
  border-bottom: 1px solid var(--line50);
}

.main-section.contract-delete .main-content .main-content-wrap {
  padding: 2rem 4rem;
  gap: 2rem;
}

.main-section.contract-delete .main-content .contet-title {
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
}

.main-section.contract-delete .main-content .contet-title p {
  margin: 1rem 0 2rem;
  padding: 0;
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--font50);
}

.main-section.contract-delete .form-input-wrap {
  gap: 1rem;
  padding: 2rem;
  background-color: var(--uniq10);
  border-radius: 0.6rem;
}

.main-section.contract-delete .form-input-wrap .custom-control-label {
  line-height: 1.8;
}

.main-section.contract-delete .section-title .title {
  margin: 0 0 1rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--bland150);
}

.main-section.contract-delete .section-title .guid {
  font-size: 1.2rem;
}

.main-section.contract-delete .input-checkbox-sub-wrap {
  display: flex;
  width: 100%;
}

.main-section.contract-delete .input-checkbox-sub-wrap .indent-wrap:first-child {
  width: 10rem;
}
.main-section.contract-delete .input-checkbox-sub-wrap .indent-wrap:last-child {
  width: 100%;
}

.main-section.contract-delete .input-checkbox-sub-wrap .indent-wrap p {
  margin: 0;
  padding: 0.3rem 0;
  text-align: right;
}

.main-section.contract-delete .input-checkbox-sub-wrap .indent-wrap .custom-checkbox {
  line-height: 2rem;
}

.main-section.contract-delete select:read-only {
  color: var(--font100);
  background-color: var(--gray20);
  background-image: none;
  opacity: 1;
}

.main-section.contract-delete textarea:read-only {
  min-height: 3.6rem;
  border-width: 1px;
  background-color: var(--gray20);
  overflow-y: auto;
  field-sizing: content;
  resize: none;
}

.main-section.contract-delete textarea:read-only:focus {
  border-bottom: 1px solid var(--line50);
}

.main-section.contract-delete textarea:focus {
  border-bottom: 2px solid var(--line50);
}

.main-section.contract-delete .guid-free-note {
  padding: 0.82rem 0;
  color: #333333;
}

.main-section.contract-delete .name-example .guid {
  margin: 0.4rem 0;
}

.main-section.contract-delete .name-example table {
  width: 100%;
  font-size: 1.2rem;
  text-align: center;
  border-collapse: collapse;
  background-color: var(--bg0);
}

.main-section.contract-delete .name-example table thead {
  background-color: var(--gray10);
}

.main-section.contract-delete .name-example table td:first-child {
  white-space: nowrap;
}

.btn-inline {
  margin-left: 1rem;
  width: fit-content;
  height: fit-content;
  padding: 7px 16px;
  font-size: 1.2rem;
}

.main-section.contract-delete .btn-wrapper {
  padding: 2rem 2rem 4rem;
}

@media (max-width: 900px) {
  .main-section.contract-delete .main-content .main-content-wrap {
    padding: 2rem 2rem 4rem;
  }
}

/* mypage transfer
======================================== */
.main-section.transfer .guid-wrap .attention {
  color: var(--error100);
}

/* mypage account
======================================== */
.main-section.account .main-content {
  padding: 0;
  gap: 0;
}

.main-section.account .main-content > .title {
  padding: 2rem;
  font-size: 2rem;
  font-weight: 500;
  color: var(--font100);
  border-bottom: 1px solid var(--line40);
}

.main-section.account .main-content .main-content-wrap {
  padding: 2rem;
}

.main-section.account .section-wrap {
  padding: 2rem;
  gap: 1rem;
  border-radius: 1.2rem;
  background-color: var(--gray10);
}

.main-section.account .section-wrap .guid-wrap p.section-title {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--bland150);
}

.main-section.account .section-wrap .guid-wrap p.section-title + p {
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--font50);
}

/* mypage contact-input
======================================== */
.main-section.contact-input .main-content {
  padding: 0;
  gap: 0;
}

.main-section.contact-input .main-content > .title {
  margin: 0;
  padding: 2rem;
  font-size: 2rem;
  font-weight: 500;
  color: var(--font100);
  border-bottom: 1px solid var(--line50);
}

.main-section.contact-input .main-content .main-content-wrap {
  padding: 2rem;
}