/* ==================================================
  base
================================================== */

.main_content {
  line-height: 1.375;
}
.main_content img {
  height: auto;
}
.main_content.w_100vw {
  overflow-x: clip;
}



/* ----------------------------------------
  breadcrumbs, title
---------------------------------------- */

.page_title_area_aem {
  display: none;
}

@media screen and (max-width: 1023px) {
  .breadcrumbs.for_mobile {
    display: none;
  }
}

@media screen and (min-width: 1024px) {
  .breadcrumbs.for_pc {
    display: none;
  }
}



/* ----------------------------------------
  page_top
---------------------------------------- */

@media screen and (min-width: 1024px) {
  .page_top {
    padding: 0;
    border-top: none;
  }
  .page_top_text {
    display: none;
  }
}





/* ==================================================
  color
================================================== */

:root {
  --Electric-Blue: #024ad8;
  --Power-Storm: #568393;
  --Orange-Bloom: #ff5050;
  --Standard-gray: #e6e6e6;
  --Light-gray: #f2f2f2;
}

.fc_blue { color: var(--Electric-Blue) !important; }
.fc_power_storm { color: var(--Power-Storm) !important; }
.fc_orange { color: var(--Orange-Bloom) !important; }





/* ==================================================
  common
================================================== */

/* ----------------------------------------
  cont_wrap
---------------------------------------- */

.cont_wrap {
  padding: 30px 20px;
}

@media screen and (min-width: 768px) {
  .cont_wrap {
    padding: 50px 30px;
  }
}



/* ----------------------------------------
  button
---------------------------------------- */

/* critical */
.main_content .button.critical {
  background: var(--Electric-Blue);
}
.main_content .button.critical:hover {
  background: #0036c4;
}

/* c-button-link */
.main_content .c-button-link {
  padding: 0;
  border: none;
}
.main_content .c-button-link:not(.c-button-link--black, .c-button-link--light) .c-button__text {
  color: var(--Electric-Blue);
}
.main_content .c-button-link:not(.c-button-link--black, .c-button-link--light):hover .c-button__text {
  color: #013bac;
}





/* ==================================================
  badge
================================================== */

.badge {
  padding: 20px;
}
.badge_list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
}
.badge_list a:hover img {
  opacity: 1;
}

@media screen and (max-width: 767px) {
  .badge_list img {
    width: auto;
    height: 33px;
  }
}

@media screen and (min-width: 768px) {
  .badge {
    padding: 25px 30px;
  }
}





/* ==================================================
  cate_title
================================================== */

.cate_title {
  padding: 30px 20px;
}
.cate_title .inner {
  display: grid;
  gap: 20px 40px;
}

@media screen and (min-width: 1024px) {
  .cate_title {
    padding: 35px 30px;
  }
  .cate_title .inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 1280px) {
  .cate_title .inner {
    grid-template-columns: max-content 1fr;
  }
}

@media screen and (min-width: 1920px) {
  .cate_title .xl {
    font-size: 50px;
    line-height: 52px;
  }
}





/* ==================================================
  series
================================================== */

.series {
  background: #f7f7f9;
}
.series_list {
  display: grid;
  gap: 20px;
}
.series_list > li {
  display: grid;
  grid-template-rows: subgrid;
  gap: 0;
  grid-row: span 4;
  text-align: center;
  background: #fff;
}
.series_list .title,
.series_list .desc,
.series_list .cta {
  padding-right: 10px;
  padding-left: 10px;
}
.series_list .title {
  margin-top: 16px;
}
.series_list .title h3 {
  font-size: 20px;
  line-height: 24px;
}
.series_list .desc {
  margin-top: 20px;
  font-size: 14px;
  line-height: 18px;
}
.series_list .cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding-bottom: 20px;
  margin-top: 20px;
}
.series_list .cta [class*="button"] {
  font-size: 15px;
}
.series_list .cta .button {
  padding-right: 12px;
  padding-left: 12px;
  letter-spacing: -.06em;
  white-space: nowrap;
}

@media screen and (min-width: 768px) {
  .series_list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 1280px) {
  .series_list.v_col3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .series_list.v_col4 {
    grid-template-columns: repeat(4, 1fr);
  }
}





/* ==================================================
  productivity
================================================== */

.productivity {
  color: #fff;
  background: #000;
}



/* ----------------------------------------
  productivity_main
---------------------------------------- */

.productivity_main {
  position: relative;
}
.productivity_main .media img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.productivity_main .cont {
  position: absolute;
  left: 0;
  width: 100%;
  padding: 20px;
}

@media screen and (max-width: 767px) {
  .productivity_main .media img {
    height: 600px;
  }
  .productivity_main .cont {
    bottom: 0;
  }
}

@media screen and (min-width: 768px) {
  .productivity_main .media img {
    height: 635px;
  }
  .productivity_main .cont {
    top: 50%;
    transform: translateY(-50%);
  }
  .productivity_main .cont .inner {
    width: 50%;
  }
}



/* ----------------------------------------
  productivity_list
---------------------------------------- */

.productivity_list {
  display: grid;
  gap: 40px;
}
.productivity_list > li {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0;
}
.productivity_list .desc {
  margin-top: 10px;
}
.productivity_list .cta {
  margin-top: 20px;
}

@media screen and (min-width: 768px) {
  .productivity_list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 1024px) {
  .productivity_list {
    grid-template-columns: repeat(4, 1fr);
  }
}





/* ==================================================
  hybrid_ai_committee
================================================== */

.hybrid_ai_committee .inner {
  display: grid;
  gap: 30px 40px;
}
.hybrid_ai_committee .media img {
  width: 100%;
  border-radius: 16px;
  outline: 1px solid #000;
  outline-offset: -1px;
}

@media screen and (min-width: 768px) {
  .hybrid_ai_committee .inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .hybrid_ai_committee .cont {
    padding-top: 40px;
  }
}





/* ==================================================
  commit
================================================== */

.commit_content {
  padding: 30px 20px;
  background: #f5f5f5;
}
.commit_list {
  display: grid;
  gap: 40px;
}
.commit_list > li {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: 20px;
}
.commit_list .media img {
  width: 100%;
  border-radius: 12px;
}
.commit_list .desc {
  margin-top: -8px;
}

@media screen and (min-width: 480px) {
  .commit_list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 768px) {
  .commit_content {
    padding: 50px 30px;
  }
}

@media screen and (min-width: 1024px) {
  .commit_list {
    grid-template-columns: repeat(4, 1fr);
  }
}





/* ==================================================
  live_support_navi
================================================== */

.live_support_navi {
  position: relative;
  color: #fff;
  background: #000;
}
.live_support_navi .media img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.live_support_navi .cont {
  position: absolute;
  left: 0;
  width: 100%;
  padding: 20px;
}

@media screen and (max-width: 767px) {
  .live_support_navi .media img {
    height: 600px;
  }
  .live_support_navi .cont {
    bottom: 0;
    padding-bottom: 40px;
  }
}

@media screen and (min-width: 768px) {
  .live_support_navi .media img {
    height: 635px;
  }
  .live_support_navi .cont {
    top: 50%;
    transform: translateY(-50%);
  }
  .live_support_navi .cont .inner {
    width: 50%;
  }
}