.feature {
  --feat-main: #17366C;
  --feat-accent: #1C40AD;
  --feat-text: #232427;
  --feat-white: #ffffff;
  --feat-light-gray: #F1F5F9;
  --feat-cv: #FF3300;
  --feat-img: var(--feat-light-gray);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 600;
  --fw-black: 900;
  --spacing-reg: min(7.4666666667vw, 4rem);
  --spacing-med: min(10.6666666667vw, 5.7142857143rem);
  --spacing-lg: min(13.3333333333vw, 7.1428571429rem);
  --section-width: min(90vw, 70rem);
  font-family: "Noto Sans JP", sans-serif;
  color: var(--feat-text);
  padding-top: 40px;
}
@media print, screen and (min-width: 769px) {
  .feature {
    padding-top: 0;
  }
}
.feature * {
  margin: 0;
  padding: 0;
  font-family: inherit;
  color: inherit;
}
.feature .section {
  width: var(--section-width);
  margin-inline: auto;
}
.feature .hero {
  background-color: var(--feat-main);
}
.feature .hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(100%, 85.7142857143rem);
  aspect-ratio: 1;
  margin-inline: auto;
  padding: 0 1rem;
  color: var(--feat-white);
  text-align: center;
  border-image: fill 1 linear-gradient(rgba(23, 54, 108, 0.52), rgba(23, 54, 108, 0.52));
  background-size: cover;
  background-position: center;
}
.feature .hero-content h1,
.feature .hero-content p {
  color: inherit;
}
.feature .hero-content h1 {
  font-size: min(6vw, 2.8571428571rem);
  line-height: 170%;
  font-weight: var(--fw-black);
}
.feature .hero-content p {
  margin-bottom: 0.9285714286em;
  font-size: min(5vw, 2rem);
  font-weight: var(--fw-bold);
}
@media (min-width: 48rem) {
  .feature .hero-content {
    aspect-ratio: 1200/456;
  }
}
.feature .introduction {
  padding: var(--spacing-reg) 0 0;
}
.feature .introduction h2 {
  margin-block-end: 2em;
  font-size: min(4.5vw, 1.7142857143rem);
  font-weight: var(--fw-black);
  line-height: 200%;
  padding-inline-start: 1.6666666667em;
  border-left: 0.6666666667em solid var(--feat-main);
}
.feature .introduction p {
  margin-block-end: var(--spacing-reg);
  font-size: min(4vw, 1.4285714286rem);
  font-weight: var(--fw-bold);
  line-height: 200%;
}
.feature .introduction figure {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4/3;
  background-color: var(--feat-img);
}
.feature .introduction img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.feature .introduction figure {
  width: min(100%, 50rem);
  margin-inline: auto;
}
.feature .benefit {
  display: grid;
  gap: 1.1428571429rem;
  margin-block: var(--spacing-lg) var(--spacing-lg);
  padding: min(5.3333333333vw, 2.8571428571rem);
  border: 2px solid var(--feat-accent);
  border-radius: 1.1428571429rem;
}
.feature .benefit figure {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4/3;
  background-color: var(--feat-img);
}
.feature .benefit img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.feature .benefit h2 {
  margin-block-end: 1em;
  color: var(--feat-accent);
  font-size: min(4.5vw, 1.7142857143rem);
  line-height: 200%;
  font-weight: var(--fw-black);
}
.feature .benefit p {
  font-size: min(3.7333333333vw, 1.1428571429rem);
  line-height: 187.5%;
  font-weight: var(--fw-medium);
}
.feature .benefit b {
  font-size: inherit;
}
@media (min-width: 48rem) {
  .feature .benefit {
    grid-template-columns: 42.857142857% auto;
    gap: 2.2857142857rem;
  }
}
.feature .seminars {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-med) 0 var(--spacing-lg);
  background-color: var(--feat-light-gray);
  border-bottom: 1px solid var(--feat-main);
}
.feature .seminars h2 {
  margin-block-end: var(--spacing-reg);
  font-size: min(6vw, 2.2857142857rem);
  font-weight: var(--fw-bold);
}
.feature .seminars .seminar-list {
  display: grid;
  gap: var(--spacing-reg) 0;
  width: var(--section-width);
}
.feature .seminar {
  padding: min(5.3333333333vw, 2.2857142857rem);
  background-color: var(--feat-white);
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.16);
}
.feature .seminar-main {
  display: grid;
  gap: 1.4285714286rem 1.7142857143rem;
  margin-bottom: 1.4285714286rem;
  transition: opacity 0.25s ease;
}
.feature .seminar figure {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4/3;
  background-color: var(--feat-img);
}
.feature .seminar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.feature .seminar-detail {
  display: grid;
}
.feature .seminar h3 {
  margin-block-end: 1em;
  color: var(--feat-accent);
  font-size: min(4.8vw, 1.7142857143rem);
  line-height: 150%;
}
.feature .seminar dl {
  margin-block-start: auto;
}
.feature .seminar .dl-wrap {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 5.3571428571em;
  align-items: center;
  font-size: 1rem;
  background-image: linear-gradient(var(--feat-accent), var(--feat-accent)), linear-gradient(#CAD5E2, #CAD5E2);
  background-position: left bottom;
  background-size: 5.3571428571em 3px, 100% 1px;
}
.feature .seminar .dl-wrap b {
  font-size: 1.2857142857em;
}
.feature .seminar .dl-wrap dt,
.feature .seminar .dl-wrap dd {
  padding: 0.6428571429em 0 0.5714285714em;
}
.feature .seminar .dl-wrap dd {
  padding-inline-start: 1.7142857143em;
}
.feature .seminar-push {
  padding: 1.4285714286rem;
  background-color: var(--feat-light-gray);
  border-radius: 4px;
}
.feature .seminar-push h4 {
  margin-block-end: 0.6666666667em;
  color: var(--feat-accent);
  font-size: min(4.2666666667vw, 1.2857142857rem);
}
.feature .seminar-push p {
  font-size: min(3.7333333333vw, 1.1428571429rem);
  line-height: 180%;
}
.feature .seminar-push b {
  font-size: inherit;
}
.feature .seminar-footer {
  grid-column: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 min(3.2vw, 1.7142857143rem);
}
.feature .seminar-button {
  padding: 1.0625em 0;
  font-size: 1.1428571429rem;
  font-weight: var(--fw-bold);
  text-align: center;
  line-height: 1;
  border: 2px solid transparent;
  border-radius: 4px;
}
.feature .seminar-button.apply {
  width: min(60%, 14.2857142857rem);
  color: var(--feat-white);
  background-color: var(--feat-cv);
  border-color: var(--feat-cv);
}
.feature .seminar-button.see-details {
  width: min(40%, 14.2857142857rem);
  color: var(--feat-accent);
  background-color: var(--feat-white);
  border-color: var(--feat-accent);
}
.feature .seminar-button.is-disabled {
  pointer-events: none;
  opacity: 0.2;
}
@media (min-width: 48rem) {
  .feature .seminar-main {
    grid-template-columns: 4fr 6fr;
  }
  .feature .seminar-push {
    grid-column: span 2;
  }
}

.modal-select-date * {
  font-family: "Noto Sans JP", sans-serif;
}
.modal-select-date-submit {
  width: 14.2857142857rem;
  padding: 1.0625em 0;
  color: #ffffff;
  font-size: 1.1428571429rem;
  font-weight: 700;
  text-align: center;
  line-height: 1;
  background-color: rgb(255, 51, 0);
  border-color: rgb(255, 51, 0);
  border-radius: 4px;
}
.modal-select-date-radio {
  padding: 1em 0;
}
.modal-select-date-radio input {
  margin-right: 0.75em;
}
.modal-select-date-radio label {
  display: flex;
  align-items: center;
  font-size: 1.0714285714rem;
}
.modal-select-date .modal-select-date-radio + .modal-select-date-radio {
  border-top: 1px solid #e5e5e5;
}
.modal-select-date .uk-radio {
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0;
}
.modal-select-date .uk-radio:checked {
  background-color: rgb(28, 64, 173);
  background-size: 150% 150%;
}
.modal-select-date .uk-modal-dialog {
  border-radius: 1.1428571429rem;
}
.modal-select-date .uk-modal-footer {
  border-radius: 0 0 1.1428571429rem 1.1428571429rem;
}