.hero-card {
  margin-top: 50px;
}

.hero-card > a {
  align-items: center;
  border: 1px solid #08287f;
  color: #08287f;
  display: flex;
  gap: 0 30px;
  transition: color 700ms cubic-bezier(0.23, 1, 0.32, 1), border-color 700ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hero-card figure {
  flex-shrink: 0;
  min-height: 180px;
  overflow: hidden;
  width: 180px;
}

.hero-card figure img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  transition: transform 700ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hero-card .hero-card_box {
  flex: 1;
  padding-right: 80px;
  position: relative;
}

.hero-card .hero-card_box .hero-card_title {
  font-family: "Outfit", "Noto Sans JP", sans-serif;
  font-size: 28px;
  letter-spacing: 0.025em;
  margin-bottom: 6px;
}

.hero-card .hero-card_box > i {
  align-items: center;
  background: linear-gradient(120deg, #3a64cc, #08287f) #285ae1;
  border-radius: 50%;
  color: #fff;
  display: flex;
  height: 45px;
  justify-content: center;
  width: 45px;
  position: absolute;
  right: 36px;
  top: 50%;
  transform: translateY(-50%);
}

.history {
  padding-top: 70px;
  padding-bottom: 100px;
  background-color: #f0f0f0;
}

.history h2 + p {
  letter-spacing: 0.05em;
}

.history h2 *[class*="title-0"] {
  display: inline-block;
}

.history-timeline {
  position: relative;
}

.history-timeline-list {
  display: flex;
  flex-direction: column;
  position: relative;
}

.history-timeline-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  padding-left: 15px;
  padding-bottom: 20px;
}

.history-timeline-item:first-child {
  padding-top: 5px;
}

.history-timeline-item:last-child {
  padding-bottom: 26px;
}

.history-timeline-item.blue-light::before,
.history-timeline-item.blue-light h3::before {
  background-color: #3a64cc;
}

.history-timeline-item.blue::before,
.history-timeline-item.blue h3::before {
  background-color: #08287f;
}

.history-timeline-item::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
}

.history-timeline-item h3 {
  display: flex;
  align-items: baseline;
  position: relative;
  width: 100%;
  line-height: 0.91667;
  letter-spacing: 0.06em;
}

.history-timeline-item h3::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: -20px;
  width: 10px;
  height: 10px;
  transform: translateY(-50%);
}

.history-timeline-item h3 span {
  line-height: inherit;
  letter-spacing: inherit;
}

.history-timeline-item h4 {
  display: flex;
  align-items: baseline;
  letter-spacing: 0.06em;
}

.history-timeline-item ul {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background-color: #FFF;
}

.history-timeline-item li {
  display: flex;
  align-items: baseline;
  gap: 0.2em;
  line-height: 2;
}

.history-timeline-item li .text-007 {
  flex-shrink: 1;
  position: relative;
}

.history-timeline-item li strong {
  font-size: 114.28571%;
  font-weight: 700;
}

.history-timeline-item li strong .bg {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 3px;
  background: #DDEAFF;
  line-height: 1;
}

.history-timeline-item li a {
  position: relative;
  text-decoration: none;
}

.history-timeline-item li a[target="_blank"] {
  padding-right: 25px;
}

.history-timeline-item li .bg a {
  color: #08287f;
  text-decoration: underline;
}

.history-timeline-item li a *[class*="icon-ic-"] {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  margin: -10px;
  font-size: 40px;
}

.member {
  background: #08287f;
  background: linear-gradient(300deg, #3a64cc 0%, #08287f 100%);
}

.member-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.member-block-inner {
  padding: 100px 20px;
}

.member-block p {
  letter-spacing: 0.05em;
}

.member-img picture {
  height: 100%;
}

.member-img img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.materials {
  padding-top: 100px;
  padding-bottom: 50px;
}

.materials h2 {
  letter-spacing: 0.06em;
}

.materials h2 + p {
  letter-spacing: 0.05em;
}

.materials-list {
  display: grid;
  gap: 30px;
}

.materials-item {
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(102, 102, 102, 0.5);
}

.materials-item p {
  letter-spacing: 0.06em;
}

@media screen and (min-width: 768px) {
  .history {
    padding-top: 140px;
    padding-bottom: 140px;
  }

  .history-timeline-list {
    width: 114.11765%;
    margin-left: -7.05882%;
  }

  .history-timeline-item {
    width: 47.42268%;
    padding-left: 0;
    padding-bottom: 6px;
  }

  .history-timeline-item:first-child {
    padding-top: 20px;
  }

  .history-timeline-item:last-child {
    padding-bottom: 40px;
  }

  .history-timeline-item:nth-child(odd) {
    margin-left: 52.57732%;
  }

  .history-timeline-item:nth-child(odd)::before {
    left: -5.65217%;
  }

  .history-timeline-item:nth-child(odd) h3::before {
    left: -6.84783%;
  }

  .history-timeline-item:nth-child(even) {
    align-items: flex-end;
  }

  .history-timeline-item:nth-child(even)::before {
    right: -5.43478%;
  }

  .history-timeline-item:nth-child(even) h3 {
    justify-content: flex-end;
  }

  .history-timeline-item:nth-child(even) h3::before {
    left: auto;
    right: -6.84783%;
  }

  .history-timeline-item::before {
    left: auto;
  }

  .history-timeline-item h3::before {
    width: 13px;
    height: 13px;
  }

  .history-timeline-item ul {
    padding: 20px;
  }

  .history-timeline-item li {
    letter-spacing: 0.06em;
  }

  .member-box {
    display: grid;
    grid-template-columns: 45.71429% 1fr;
    max-width: 1960px;
    margin-left: auto;
    margin-right: auto;
  }

  .member-block {
    align-items: flex-end;
  }

  .member-block-inner {
    max-width: 640px;
    padding: 14.0625%;
  }

  .member-block .btn {
    width: 100%;
    max-width: 280px;
    margin-left: 0;
  }

  .materials {
    padding-top: 140px;
    padding-bottom: 0;
  }

  .materials-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 4.59016%;
  }

  .materials-item {
    display: flex;
    flex-direction: column;
  }

  .materials-item .btn {
    margin-top: auto;
  }
}

@media screen and (min-width: 1366px) {
  .member-block-inner {
    padding: 90px;
  }
}

@media screen and (max-width: 966.8px) {
  .hero-card > a {
    gap: 0 2.92969vw;
  }

  .hero-card figure {
    min-height: 17.57812vw;
    width: 17.57812vw;
  }

  .hero-card .hero-card_box {
    padding-right: 7.8125vw;
  }

  .hero-card .hero-card_box .hero-card_title {
    font-size: clamp(20px, calc(28 / 1024 * 100vw), 28px);
  }

  .hero-card .hero-card_box .hero-card_title + p {
    font-size: clamp(13px, calc(16 / 1024 * 100vw), 16px);
  }

  .hero-card .hero-card_box > i {
    height: 4.39453vw;
    width: 4.39453vw;
    right: 3.51562vw;
  }

  .member-block h2 br {
    display: none;
  }
}

@media screen and (max-width: 767.8px) {
  .hero-card {
    margin-top: 40px;
  }

  .hero-card > a {
    gap: 0 15px;
  }

  .hero-card figure {
    height: auto;
    min-height: 100px;
    width: 100px;
  }

  .hero-card .hero-card_box {
    padding-right: 80px;
  }

  .hero-card .hero-card_box p {
    font-size: 13px;
  }

  .hero-card .hero-card_box .hero-card_title {
    font-size: 20px;
    margin-bottom: 5px;
  }

  .hero-card .hero-card_box > i {
    height: 40px;
    width: 40px;
    right: 15px;
  }
}

@media (hover: hover) {
  .hero-card > a:hover {
    border-color: #285ae1;
    color: #285ae1;
    opacity: 1;
  }

  .hero-card > a:hover figure img {
    transform: scale(1.07);
  }

  .hero-card > a:hover .hero-card_box > i {
    background-image: none;
  }

  .hero-card > a:hover .hero-card_box > i::before {
    animation: arrow-right 700ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
  }
}

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .hero-card > a:hover {
    border-color: #285ae1;
    color: #285ae1;
    opacity: 1;
  }

  .hero-card > a:hover figure img {
    transform: scale(1.07);
  }

  .hero-card > a:hover .hero-card_box > i {
    background-image: none;
  }

  .hero-card > a:hover .hero-card_box > i::before {
    animation: arrow-right 700ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
  }
}