@charset "UTF-8";

/* --------------------------------------------------
  top
-------------------------------------------------- */
.top header {
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
}

.top article.main_section {
  margin-top: 60px;
}

@media (min-width: 768px) {
  .top article.main_section {
    margin-top: 80px;
  }
}
/* --------------------------------------------------
  hero
-------------------------------------------------- */

#hero.section .inner {
  padding: 128px 0 53px;
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
}

#hero.section::before {
  position: absolute;
  content: "";
  display: block;
  width: 522px;
  height: 214px;
  background-image: url(/assets/img/common/bg-wave-left.png);
  background-repeat: no-repeat;
  background-size: contain;
  z-index: -1;
}

#hero.section::after {
  position: absolute;
  right: 0;
  content: "";
  display: block;
  width: 529px;
  height: 320px;
  background-image: url(/assets/img/common/bg-wave-right.png);
  background-position: right;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: -1;
}

#hero.section video {
  position: absolute;
  top: 160px;
  right: -180px;
  max-width: 1200px;
  width: 80vw;
  z-index: -2;
  filter: blur(0.1px); /* Windowsの黒枠対策（サブピクセルぼかし） */
}

#hero.section h2 {
  font-size: 3rem;
  line-height: 1.6;
  font-weight: bold;
}

#hero.section .service-achievement-wrap .separate {
  display: block;
  width: 1px;
  background-color: #D5D9DB;
}
@media (min-width: 1500px) {
  #hero.section .inner {
    padding-bottom: 92px;
  }
  #hero.section video {
    right: 30%;
    transform: translateX(50%);
  }
}
@media (min-width: 768px) {
  #hero.section .title-content-wrapper {
    min-width: 29.875rem;
    margin-left: 10vw;
  }
}
@media screen and (max-width: 767px) {
  #hero.section video {
    width: 130%;
    top: 460px;
    left: 50%;
    transform: translateX(-50%);
  }
  #hero.section::before {
    display: none;
  }
  #hero.section::after {
    width: 370px;
    top: 760px;
  }
  #hero.section .inner {
    padding: 60px 20px 160px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  #hero.section h2 {
    font-size: 2.125rem;
    line-height: 1.5;
  }
  #hero.section .btn-wrapper {
    padding-top: 300px;
  }
}
/* --------------------------------------------------
  service
-------------------------------------------------- */
#service.section {
  padding: 3.75rem 1.25rem;
}
#service.section .inner {
  max-width: 1020px;
  margin: auto;
}
#service.section .inner a:hover {
  opacity: .7;
}
#service.section .inner .card-wrapper {
  display: block;
  background-color: #EAF8F7;
  border-radius: 5px;
  padding: 1.75rem;
  flex: 1;
}
#service.section .inner .circle {
  border-radius: 50%;
  background-color: rgba(0, 188, 174, 1);
  width: 32px;
  height: 32px;
}
#service.section .inner img {
  width: 12px;
  height: 13px;
}
/*sp style*/
@media screen and (max-width: 768px) {
  #service.section .inner .mb-sm-28px {
    margin-bottom: 1.75rem;
  }
  #service.section .inner .mb-sm-60px {
    margin-bottom: 3.75rem !important;
  }
}

/* --------------------------------------------------
  platform
-------------------------------------------------- */

#platform.section .inner .gap-40px {
  gap: 2.5rem;
}

#platform.section {
  padding: 3.75rem 1.25rem;
  background-color: #FAFAFA;
}

#platform.section .inner {
  max-width: 980px;
  margin: 0 auto;
}

#platform.section .inner a:hover {
  opacity: .6;
}

#platform.section .inner .platform-content-wrapper {
  gap: 2.5rem;
  padding-bottom: 3.75rem;
}

#platform.section .inner .res-mw {
  max-width: 350px;
}

#platform.section .inner .platform-img {
  max-width: 300px;
  margin: 0 auto 1rem auto;
}

#platform.section .inner .text-with-separate {
  display: flex;
  align-items: center;
  justify-content: center;
}

#platform.section .inner .text-with-separate::before,
#platform.section .inner .text-with-separate::after {
  content: '';
  display: block;
  height: 1px;
  flex-grow: 1;
  background-color: #D5D9DB;
}

#platform.section .inner .text-with-separate::before {
  margin-right: 1.75rem;
}

#platform.section .inner .text-with-separate::after {
  margin-left: 1.75rem;
}

#platform.section .inner ul {
  max-width: 980px;
  margin: 0 auto 3.75rem 0;
}

#platform.section .inner li {
  width: 100%;
  max-width: 350px;
}

#platform.section .inner .guide a {
  display: block;
  position: relative;
  height: 100%;
  background-color: #ffffff;
  border-radius: 5px;
  text-decoration: none;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}

#platform.section .inner .guide a:hover {
  opacity: 0.6;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
}

#platform.section .inner .guide a:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 90% auto;
}

#platform.section .inner li.talent a,
#platform.section .inner li.project a,
#platform.section .inner li.freelance a {
  padding-top: calc(234 / 300 * 100%);
}

#platform.section .inner li.talent a:before {
  background-image: url(/assets/img/top/find_illust_talent.png);
}

#platform.section .inner li.project a:before {
  background-image: url(/assets/img/top/find_illust_project.png);
}

#platform.section .inner li.freelance a:before {
  background-image: url(/assets/img/top/find_illust_freelance.png);
}

#platform.section .inner .text {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.025em;
}

#platform.section .inner li .text {
  padding: 0 0.75rem 1.75rem 0.75rem;
}

/* sp style */
@media (max-width: 767px) {
  #platform.section .inner .res-mw {
    max-width: 300px;
  }
  #platform.section .inner .platform-content-wrapper {
    align-items: center;
    gap: 3.75rem;
  }
  #platform.section .inner .text-with-separate::before,
  #platform.section .inner .text-with-separate::after {
    display: none;
  }
  #platform.section .inner ul {
    margin: 0 auto 2.5rem 0;
  }
  #platform.section .inner .gap-sm-28px {
    gap: 1.75rem;
  }
}

@media (min-width: 820px) {
  #platform.section .inner .platform-content-wrapper {
    gap: 5rem;
  }
}

/* --------------------------------------------------
  event
-------------------------------------------------- */
#event.section {
  padding: 3.75rem 1.25rem;
}

#event.section .inner {
  max-width: 980px;
  margin: auto;
}

#event.section .inner .mw-350px {
  max-width: 350px;
}

#event.section .inner .event-content-wrapper {
  gap: 2.5rem;
}

#event.section .inner a.btn {
  padding: 10px;
  font-size: 18px;
  line-height: 1.8;
}

/* sp style */
@media (max-width: 767px) {
  #event.section .inner .event-content-wrapper {
    gap: 3.75rem;
    align-items: center;
  }
}

/* --------------------------------------------------
  matching
-------------------------------------------------- */
#matching.section {
  background-color: #FAFAFA;
  padding: 3.75rem 1.25rem;
}
#matching.section .inner {
  padding: 0;
  max-width: 980px;
  margin: 0 auto;
}
#matching.section .inner .gap {
  gap: 2.5rem;
}
#matching.section .inner .case-warapper {
  background-color: #fff;
  padding: 1.75rem;
  border-radius: 5px;
}
#matching.section .inner .case-warapper .position-offset {
  top: -16px;
  left: 24px;
}
#matching.section .inner .case-warapper .text-size {
  font-size: 1.25rem;
  line-height: 1.6;
}
#matching.section .inner .case-warapper .case-arrow {
  background-image: url(/assets/img/top/matching_arrow_down.png);
  background-repeat: no-repeat;
  background-size: 87px 98px;
  background-position: center;
  min-height: 98px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 1rem;
}
/* sp style */
@media screen and (max-width: 767px) {
  #matching.section .inner .gap {
    gap: 3.75rem;
  }
  #matching.section .inner .case-warapper {
    max-width: 350px;
    margin: 0 auto;
  }
  #matching.section .inner .case-warapper .mb-sm-12px {
    margin-bottom: .75rem !important;
  }
  #matching.section .inner .case-warapper .text-size {
    font-size: 1rem;
    line-height: 1.8;
  }
}

@media (min-width: 1020px) {
  #matching.section .inner .gap {
    gap: 3.75rem;
  }
}

/* --------------------------------------------------
  seminar
-------------------------------------------------- */
#seminar.section {
  padding: 3.75rem 1.25rem;
}
#seminar.section .inner {
  max-width: 980px;
  padding: 0;
  margin: 0 auto;
}
#seminar.section .inner .text-vertical {
  writing-mode: vertical-rl;
  transform: translateX(-5%);
}
#seminar.section .inner .content-card {
  background-color: #F4F4F4;
  border-radius: 5px;
  padding: 1.5rem;
}
#seminar.section .inner .content-card .category-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 251px;
  min-height: 58px;
  padding-right: 1.5rem;
  border-right: 1px solid #E6EAEC;
  text-align: center;
}
#seminar.section .inner .content-card .seminar-description {
  padding-left: 1.5rem;
}
#seminar.section .inner .grid-container {
  display: grid;
  grid-template-columns: 48px auto;
  grid-template-rows: auto;
  column-gap: 1rem;
  row-gap: 0.5rem;
}
#seminar.section .inner .grid-span-3 {
  grid-row: span 3 / span 3;
}
#seminar.section .inner .grid-span-2 {
  grid-row: span 2 / span 2;
}
/* sp style */
@media screen and (max-width: 767px) {
  #seminar.section .inner .mb-sm-60px {
    margin-bottom: 3.75rem !important;
  }
  #seminar.section .inner .content-card .category-label {
    justify-content: initial;
    width: 100%;
    min-height: auto;
    padding-right: initial;
    padding-bottom: 0.5rem;
    border-right: initial;
    border-bottom: 1px solid #E6EAEC;
    text-align: initial;
  }
  #seminar.section .inner .content-card .seminar-description {
    padding-top: 1rem;
    padding-left: initial;
  }
  #seminar.section .inner .grid-container {
    grid-template-columns: 40px auto;
    gap: 0.75rem;
  }
}

/* --------------------------------------------------
  information
-------------------------------------------------- */
#information.section {
  background-color: #FAFAFA;
  border-top: #E6EAEC solid 1px;
}
#information.section .inner {
  margin: auto;
  padding: 0;
  width: auto;
}
#information.section .information-panel-link-wrapper {
  transition: 400ms ease;
}
#information.section .information-panel-link-wrapper:hover {
  opacity: .6;
  text-decoration: none;
}
#information.section .information-panel {
  padding: 1.75rem;
  gap: 12px;
  box-shadow: none;
  border-radius: 0px;
}
#information.section .information-panel .information-panel-img {
  width: 60px;
  height: 60px;
}
#information.section a h3 {
  color: #00A79C;
}
#information.section a p {
  color: #141414;
  text-align: center;
}
@media screen and (min-width: 768px) {
  #information.section .information-panel-border {
    border-right: #E6EAEC solid 1px;
  }
  #information.section .information-panel-link-wrapper {
    width: 50%;
  }
}
@media screen and (max-width: 767px) {
  #information.section {
    padding-bottom: 0px;
  }
  #information.section .information-panel-border {
    border-bottom: #E6EAEC solid 1px;
  }
}

/* --------------------------------------------------
  contact
-------------------------------------------------- */
#contact.section {
  position: relative;
  padding: 3.75rem 1.25rem;
}
#contact.section .contact_btn_wrap .btn-fill {
  margin-top: 30px;;
}