@charset "utf-8";

/* main */
@media screen and (min-width: 969px) {
  .mv{
    position: relative;
    overflow: hidden;
    height: calc(850vw / 1440 * 100);
  }
  .pc_cover {
    position: relative;
    overflow: hidden;
  }
  .pc_cover::after{
    content: "";
    width: 102%;
    height: calc(155vw / 1440 * 100);
    position: absolute;
    bottom: -1px;
    left: 0;
    background:linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #fff 50.5%) no-repeat top right/100% 100%;
  }
  .mv_img{
    position: absolute;
    width: 100%;
    height: calc(100vw * 2013 / 2991);
    bottom: -60px;
    display: block;
    z-index: -1;
    background-image: url(../img_new/datarobot/main.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: cover;
  }
  .main_wrap {
    width: calc(888vw / 1440 * 100);
    min-width: 888px;
    max-width: 1024px;
    margin: auto;
  }
  .main_wrap dd,
  .main_wrap .text { text-align: justify; }
  .main_wrap img{width: 100%;}
}
@media screen and (max-width: 968px) and (min-width: 751px) {/* 888px + 左右40pxの余白 */
  .main { padding-bottom: 96px; }
  .main_wrap{
    margin: 0 44px;
  }
}
@media screen and (max-width: 750px) {
  .pc_cover{
    position: relative;
    overflow: hidden;
  }
  .pc_cover::after{
    content: "";
    width: 102%;
    height: calc(40vw / 375 * 100);
    position: absolute;
    top: calc((220vw - 40vw) / 375 * 100 + 1px);
    left: 0;
    background:linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #fff 50.5%) no-repeat top right/100% 100%;
  }
  .mv{
    position: relative;
    overflow: hidden;
    height: calc(220vw / 375 * 100);
  }
  .mv_img{
    position: absolute;
    width: 100%;
    height: calc(100vw * 2013 / 2991);
    bottom: calc(-60vw / 750 * 100);
    z-index: -1;
    display: block;
    background-image: url(../img_new/datarobot/main.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: cover;
  }
  .main {
    border-top: calc(1vw / 375 * 100) solid #e5e5e5;
  }
  .main_wrap {
    padding: 0 calc(18vw / 375 * 100);
  }
  .main_wrap dd,
  .main_wrap .text { text-align: justify; }
  .main_wrap img{width: 100%;}
}

.lead{
  font-size: 20px;
  line-height: 40px;
}
@media screen and (max-width: 750px) {
  .lead{
    font-size: calc(16vw / 375 * 100);
  }
}

/* feature */
@media screen and (min-width: 751px) {
.feature {
  display: -webkit-flex;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.feature li {
  width: calc(33.3% - 80px/3);
}
.feature_img{
  height: auto;
}
.feature_title{
  font-weight: bold;
}
.feature_text{
  letter-spacing: -.005em;
  text-align: justify;
}
.feature_link{
  margin-top: 40px;
  text-align: right;
}
.feature_link a{
  font-size: 14px;
  display: inline-block;
  color: #808080;
  padding-bottom: 4px;
  border-bottom: solid 1px #808080;
}
}
@media screen and (max-width: 750px) {
  .feature_img--1{
    margin-top: calc(26vw / 375 * 100);
  }
  .feature_img--2{
    margin-top: calc(20vw / 375 * 100);
  }
  .feature_title{
    font-weight: bold;
  }
  .feature_text{
    margin-top: calc(8vw / 375 * 100);
    line-height: calc(26vw / 375 * 100);
    text-align: justify;
  }
  .feature_link{
    margin-top: calc(35vw / 375 * 100);
  }
  .feature_link a{
    font-size: calc(14vw / 375 * 100);
    display: inline-block;
    color: #808080;
    padding-bottom: 4px;
    border-bottom: solid 1px #808080;
  }
}

/* point */
@media screen and (min-width: 751px) {
.point_title{
  letter-spacing: -.03em;
  text-indent: 8px;
  line-height: 48px;
}
.point_text{
  font-size: 20px;
  line-height: 40px;
  margin-top: 30px;
  letter-spacing: -.025em;
}
}
@media screen and (max-width: 750px) {
.point_title{
  font-size: calc(20vw / 375 * 100);
  line-height: calc(30vw / 375 * 100);
  margin: calc(30vw / 375 * 100) 0  calc(10vw / 375 * 100);
}
.point_text{
  font-size: calc(16vw / 375 * 100);
  line-height: calc(26vw / 375 * 100);
  margin-top: calc(10vw / 375 * 100);
  letter-spacing: -.025em;
}
}

/* title */
@media screen and (min-width: 751px) {
.title {
  letter-spacing: -1.3px;
  font-weight: normal;
}
.image img { width: 100%; }
}
@media screen and (max-width: 750px) {
.title {
  font-size: calc(30vw / 375 * 100);
  margin-top: calc(15vw / 375 * 100);
}
.agile_integration .title {
  margin-top: 0;
}
.image img {
  width: 100%;
  margin-top: calc(27vw / 375 * 100);
}
.text {
  margin-top: calc(20vw / 375 * 100);
  line-height: calc(26vw / 375 * 100);
}
}

/* gradient */
@media screen and (min-width: 751px) {
.section .heading {
  height: 580px;
  position: relative;  
}
.agile_integration .heading{
  height: 570px;
}
.section .heading .section_title {
  position: absolute;
  z-index: 5;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: column;
  flex-direction: column;
  height: 100%;
  left: 0;
  right: 0;
}

.section .heading .section_title .title{
  font-size: 61px;
  letter-spacing: -1.3px;
  font-weight: normal;
}

.section .heading .decoration {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.section .heading .decoration::before,
.section .heading .decoration::after {
  content: "";
  width: 100%;
  height: calc(155vw / 1440 * 100);
  max-height: 155px;
  position: absolute;
  left: 0;
  z-index: 4;
}
.section .heading .decoration::before { top: 0; }
.section .heading .decoration::after { bottom: 0; }
.section:nth-of-type(odd) .heading .decoration::before {
  background:linear-gradient(to top left, rgba(255,255,255,0) 50%, #fff 50.5%) no-repeat top left/100% 100%;
}
.section:nth-of-type(odd) .heading .decoration::after {
  background:linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #fff 50.5%) no-repeat top left/100% 100%;
}
.section:nth-of-type(even) .heading .decoration::before {
  background:linear-gradient(to top right, rgba(255,255,255,0) 50%, #fff 50.5%) no-repeat top left/100% 100%;
}
.section:nth-of-type(even) .heading .decoration::after {
  background:linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #fff 50.5%) no-repeat top left/100% 100%;
}
.section .heading .decoration .gradient {
  position: absolute;
  top: 0; left: 0;
  height: calc(100vh + 750px);
  width: 100%;
}
.section .heading .decoration .gradient::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
}
.datarobot_design .heading .decoration .gradient::after { background-image: linear-gradient(#b979b0 30%,#a5d2a1 50%); }
.agile_integration .heading .decoration .gradient::after { background-image: linear-gradient(#00b7de 25%, #fff362 60%); }
.biz_startup_support .heading .decoration .gradient::after { background-image: linear-gradient(#fff362, #e95550); }
}
@media screen and (max-width: 750px) {
.section {
  margin-top: calc(24vw / 375 * 100);
}
.section.agile_integration {
  margin-top: calc(40vw / 375 * 100);
}
.section.contact {
  margin-top: calc(60vw / 375 * 100);
}
.section .heading {
  position: relative;  
}
.section .heading .section_title .sp_cover {
  position: relative;
  z-index: 5;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: column;
  flex-direction: column;
  height: calc(280vw / 375 * 100);
  padding-left: calc(40vw / 375 * 100);
  width: calc(260vw / 375 * 100);
}
.section .heading .decoration {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: calc(280vw / 375 * 100);
  top: 0;
}
.section .heading .decoration::before,
.section .heading .decoration::after {
  content: "";
  width: 100%;
  height: calc(40vw / 375 * 100);
  position: absolute;
  left: 0;
  z-index: 4;
}
.section .heading .decoration::before { top: 0; }
.section .heading .decoration::after { bottom: 0; }
.section:nth-of-type(odd) .heading .decoration::before {
  background:linear-gradient(to top left, rgba(255,255,255,0) 50%, #fff 50.5%) no-repeat top left/100% 100%;
}
.section:nth-of-type(odd) .heading .decoration::after {
  background:linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #fff 50.5%) no-repeat top left/100% 100%;
}
.section:nth-of-type(even) .heading .decoration::before {
  background:linear-gradient(to top right, rgba(255,255,255,0) 50%, #fff 50.5%) no-repeat top left/100% 100%;
}
.section:nth-of-type(even) .heading .decoration::after {
  background:linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #fff 50.5%) no-repeat top left/100% 100%;
}
.section .heading .decoration .gradient {
  position: absolute;
  top: 0; left: 0;
  height: calc(100vh + 280vw / 375 * 100);
  width: 100%;
}
.section .heading .decoration .gradient::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
}
.datarobot_design .heading .decoration .gradient::after { background-image: linear-gradient(#b979b0 30%,#a5d2a1 50%); }
.agile_integration .heading .decoration .gradient::after { background-image: linear-gradient(#00b7de 25%, #fff362 60%); }
.biz_startup_support .heading .decoration .gradient::after { background-image: linear-gradient(#fff362, #e95550); }
}

/* section title */
@media screen and (min-width: 751px) {
.section .section_title {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
.datarobot_design .section_title {
  padding-top: 40px;
}
.datarobot_design .section_title h3 svg {
  width: 375px;
}
.agile_integration .section_title {
  padding-bottom: 30px;
}
.agile_integration .section_title h3 svg {
  width: 445px;
}
.biz_startup_support .section_title {
  padding-top: 40px;
}
.biz_startup_support .section_title h3 svg {
  width: 502px;
}
}
@media screen and (max-width: 750px) {
.section .section_title {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
.datarobot_design .section_title h3 svg {
  width: calc(375vw / 750 * 100);
}
.agile_integration .section_title h3 svg {
  width: calc(445vw / 750 * 100);
}
.biz_startup_support .section_title h3 {
  padding-top: calc(20vw / 750 * 100);
}
.biz_startup_support .section_title h3 svg {
  width: calc(502vw / 750 * 100);
}
.section .section_title .middle_text {
  font-size: calc(20vw / 375 * 100);
  line-height: calc(30vw / 375 * 100);
  margin-top: calc(30vw / 750 * 100);
}
.section .section_title .middle_text br{
  display: none;
}
}

/* figcaption */
@media screen and (min-width: 751px) {
.section .figcaption dt { font-weight: bold; }
.section .figcaption dd::before { content: "・"; }
}
@media screen and (max-width: 750px) {
.section .figcaption {
  padding-top: calc(6vw / 375 * 100);
  /* margin-top: calc(24vw / 375 * 100); 画像非表示時*/
  margin-top: calc(30vw / 375 * 100);
  font-size: calc(14vw / 375 * 100);
  line-height: calc(22vw / 375 * 100);
}
.section .figcaption dt:not(:first-child) { margin-top: calc(12vw / 375 * 100); }
.section .figcaption dt { font-weight: bold; }
.section .figcaption dd {
  position: relative;
  padding-left: calc(14vw / 375 * 100);
}
.section .figcaption dd::before {
  content: "・";
  position: absolute;
  left: 0;
}
}

/* contact */
@media screen and (min-width: 751px) {
  .contact {
    overflow: hidden;
  }
  .contact_inner{
    width: calc(888vw / 1440 * 100);
    min-width: 888px;
    max-width: 1024px;
    margin: auto;
  }
  .contact .title_mini svg { width: 116px; }
  .contact .content {
    width: 424px;
    float: right;
    margin-top: -27px;
    margin-right: 44px;
  }
  .contact .content .address a { display: inline-block; }
  .contact .content .address svg {
    width: 197px;
    display: inline;
  }
  .contact .content .caution span { display: block; }
}

@media screen and (max-width: 750px) {
  .contact {
    overflow: hidden;
    padding-bottom: calc(25vw / 375 * 100);
  }
  .contact .title_mini {
    margin-left: calc(18vw / 375 * 100);
    margin-right: calc(18vw / 375 * 100);
  }
  .contact .title_mini svg { width: calc(152vw / 375 * 100); }
  .contact .content {
    margin-left: calc(18vw / 375 * 100);
    margin-right: calc(18vw / 375 * 100);
    margin-top: calc(32vw / 375 * 100);
  }
  .contact .content .address a { display: inline-block; }
  .contact .content .address svg {
    width: calc(164vw / 375 * 100);
    display: inline;
  }
  .contact .content .caution {
    margin-top: calc(20vw / 375 * 100);
    line-height: calc(22vw / 375 * 100);
  }
}

/* relatedpost */
@media screen and (min-width: 751px) {
  .relatedpost {
    overflow: hidden;
    padding-bottom: 88px;
  }
  .relatedpost_inner{
    width: calc(888vw / 1440 * 100);
    min-width: 888px;
    max-width: 1024px;
    margin: auto;
  }
  .relatedpost .title_mini svg { width: 168px; }
  .topics_lists{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin-top: -8px;/* margin-topは32px */
  }
  .topics_lists li{
    width: calc(100% / 2 - 20px);
  }
  .topics_lists li span .image {
    display: block;
    padding-bottom: calc(100% * 2 / 3);
    position: relative;
  }
  .topics_lists li span .image::before {
    content: "";
    background-image: url(../svg/comingsoon.svg);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: 130px 13px;
    -moz-background-size: 130px 13px;
    -o-background-size: 130px 13px;
    background-size: 130px 13px;
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .topics_lists li span .image:not(.noimage)::after {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    background-color: rgba(255,255,255,.5);
    z-index: 1;
  }
  .topics_lists li span .image.noimage { background-color: #eaeaea; }
  .topics_lists li span .image img { position: absolute; }
  .topics_lists a .image { position: relative; }
  .topics_lists a .image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: opacity .3s linear 0s;
    -moz-transition: opacity .3s linear 0s;
    -o-transition: opacity .3s linear 0s;
    transition: opacity .3s linear 0s;
    z-index: 5;
    background-color: #fff;
    opacity: 0;
  }
  .topics_lists a:hover .image::after { opacity: .3; }
  .topics_lists a:hover .topics_text {
    text-decoration: underline;
  }
  .topics_img{
    width: 100%;
  }
  .topics_title{
    margin: 16px 0;
    padding-left: 1px;
  }
  .project .topics_title img{
    height: 15px;
  }
  .report .topics_title img{
    height: 13px;
    padding-bottom: 2px;/* projectに合わせて */
  }
  .interview .topics_title img{
    height: 13px;
    padding-bottom: 2px;/* projectに合わせて */
  }
  .topics_text{
    margin: -4px 0;
    font-weight: bold;
  }
  .interviewee_status{
    margin-top: 12px;/* margin-top:16px */
    margin-bottom: -4px;
  }
  .interviewee_name{
    margin-top: 4px;/* margin-top:8px */
    margin-bottom: -4px;
  }
  .topics_text + .interviewee_name{
    margin-top: 12px;
  }
}

@media screen and (max-width: 750px) {
  .relatedpost {
    overflow: hidden;
    padding-bottom: calc(40vw / 375 * 100);
  }
  .relatedpost .title_mini {
    margin-left: calc(18vw / 375 * 100);
    margin-right: calc(18vw / 375 * 100);
  }
  .relatedpost .title_mini svg { width: calc(218vw / 375 * 100); }
  .topics_lists {
    margin-left: calc(18vw / 375 * 100);
    margin-right: calc(18vw / 375 * 100);
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }
  .topics_lists li {
    width: 100%;
    /* display: none;*/
  }
  .topics_lists li span .image {
    display: block;
    padding-bottom: calc(100% * 2 / 3);
    position: relative;
  }
  .topics_lists li span .image::before {
    content: "";
    background-image: url(../svg/comingsoon.svg);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: calc(130vw / 375 * 100) calc(13vw / 375 * 100);
    -moz-background-size: calc(130vw / 375 * 100) calc(13vw / 375 * 100);
    -o-background-size: calc(130vw / 375 * 100) calc(13vw / 375 * 100);
    background-size: calc(130vw / 375 * 100) calc(13vw / 375 * 100);
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .topics_lists li span .image:not(.noimage)::after {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    background-color: rgba(255,255,255,.5);
    z-index: 1;
  }
  .topics_lists li span .image.noimage { background-color: #eaeaea; }
  .topics_lists li span .image img { position: absolute; }
  .topics_lists a .image { position: relative; }
  .topics_lists a .image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: opacity .3s linear 0s;
    -moz-transition: opacity .3s linear 0s;
    -o-transition: opacity .3s linear 0s;
    transition: opacity .3s linear 0s;
    z-index: 5;
    background-color: #fff;
    opacity: 0;
  }
  .topics_lists a:hover .image::after { opacity: .3; }
  .topics_lists a:hover .topics_text {
    text-decoration: underline;
  }
  .topics_img {
    width: 100%;
  }
  .topics_title {
    margin: calc(21vw / 375 * 100) 0 calc(12vw / 375 * 100);
  }
  .project .topics_title img {
    height: calc(15vw / 375 * 100);
  }
  .report .topics_title img {
    height: calc(13vw / 375 * 100);
    padding-bottom: calc(2vw / 375 * 100);
  }
  .interview .topics_title img {
    height: calc(13vw / 375 * 100);
    padding-bottom: calc(2vw / 375 * 100);
  }
  .topics_text {
    line-height: calc(26vw / 375 * 100);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-weight: bold;
  }
  .interviewee_status {
    margin-top: calc(14vw / 375 * 100);
  }
  .interviewee_name {
    margin-top: calc(9vw / 375 * 100);
  }
}

.img_starter_program {
  margin-top: 20px;
  border: 1px solid #000;
  transition: .25s;
}

.img_starter_program:hover {
  background: #fff;
}

.img_starter_program img {
  width: 100%;
  transition: .25s;
}

.img_starter_program img:hover {
  opacity: .8;
}

@media screen and (min-width: 969px) {
  .img_starter_program {
    position: absolute;
    top: 125px;
    right: 0;
  }
}

@media screen and (min-width: 751px) {
  .img_starter_program {
    max-width: 400px;
  }
}

@media screen and (max-width: 750px) {
  .img_starter_program {
    max-width: 100;
  }
}