@charset "utf-8";
/* トランスコスモス株式会社 エンジニア新卒採用LP エントリー Style CSS */

body {
  background-color: var(--color-white);
}
#main-area {
  color: var(--color-mono100);
}
#main-area .area__inner:has(+ .line-lead) {
  padding-bottom: 100px;
}
@media screen and (max-width: 750px) {
  #main-area .area__inner:has(+ .line-lead) {
    padding-bottom: 50px;
  }
}
/* エントリーボタンエリア Style ========*/
.entry-btn-area {
  display: flex;
  gap: 40px;
  justify-content: center;
  padding-block: 20px 50px;
}
.entry-btn-area__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: clamp(430px,33.33vw, 480px);
  min-height: clamp(200px,20.83vw, 300px);
  padding: 32px 40px;
  gap: 24px;
  border-radius: 4px;
  background: conic-gradient(from 58deg at 50% 50%, #EEEEEE 0deg, #E5E5E5 360deg);
}
#main-area .entry-btn-area__inner h2 {
  margin-bottom: 0;
  border-bottom: var(--color-mono100) 1px solid;
  font-weight: 500;
  font-size: 2.8rem;
  line-height: 140%;
  color: #333333;
}
#main-area .entry-btn-area__inner h2 + p {
  display: flex;
}
#main-area .entry-btn-area__inner h2 + p span {
  position: relative;
  display: flex;
  flex-direction: column;
  font-weight: 600;
  font-size: 2rem;
  margin-right: 3px;
}
#main-area .entry-btn-area__inner h2 + p span::after {
  background-color: #333;
  width: 100%;
  height: 1px;
  content: "";
  animation: UnderLine 1.5s ease;
}
@keyframes UnderLine {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
.entry-btn-area__inner .btn {
  max-width: initial;
}
@media screen and (max-width: 1440px) {
  #main-area .entry-btn-area__inner h2 {
    font-size: clamp(1.6rem, 1.39vw, 2rem);
  }
}
@media screen and (max-width: 1024px) {
  .entry-btn-area {
    gap: clamp(16px, 2.93vw, 30px);
  }
  .entry-btn-area__inner {
    min-width: initial;
    padding: clamp(15px, 3.13vw,32px) clamp(20px, 3.91vw, 40px);
  }
}
@media screen and (max-width: 750px) {
  .entry-btn-area {
    flex-direction: column;
    gap: 32px;
    align-items: center;
    justify-content: center;
  }
  .entry-btn-area__inner {
    padding: 25px 20px;
    width: 100%;
    align-items: center;
    justify-content: center;
  }
  .entry-btn-area__inner p {
    width: 100%;
    text-align: center;
  }
  .entry-btn-area__inner .btn {
    width: 100%;
    max-width: 240px;
    min-height: 60px;
    padding: 15px 56px 15px 20px;
    min-height: auto;
    margin-inline: auto;
  }
}
@media screen and (max-width: 445px) {
  .entry-btn-area__inner .btn .sp-none {
    display: block;
  }
}