@charset "utf-8";

main{padding: 0;}

/* mainvisual ==========*/
#mainvisual{overflow: hidden;
    background: 
        url(../../img/page/top/mv_back.png) no-repeat center center,
        linear-gradient(to right,  rgba(169,225,190,0.45) 0%,rgba(170,226,227,0.45) 50%,rgba(99,167,222,0.45) 100%);
    background-size: cover;
    position: relative;
    padding: 65px 0 50px;
}
#mainvisual::after{content: ""; width: 100%; height: 130px;
    position: absolute; bottom: 0; left: 0; z-index: 2;
    background: linear-gradient(to bottom,  rgba(233,239,244,0) 0%,rgba(233,239,244,1) 100%);
}
.mv_wrap{justify-content: space-between; align-items: center;}
.mv_text_area{width: 42%;}
.mv_image_area{width: 56%;}

.mv_text_area{}
.mv_text_maintitle{text-align: center;}
.mv_point{justify-content: center; margin-top: 10px;}
.mv_point li{width: 140px; height: 140px; border-radius: 50%; background: #fff; border: 1px solid #d9e7e7; display: flex; justify-content: center; align-items: center; text-align: center; margin: 0 5px;}
.mv_point li span{color: #0b2a43; font-weight: 500; line-height: 1.8; letter-spacing: 1px;}

.mv_cvarea{margin: 30px 0 0; position: relative; z-index: 3;}
.mv_cvarea_text{text-align: center; margin-bottom: 15px;}
.mv_cvarea_text span{font-size: 16px; font-weight: 500; position: relative; padding: 0 20px 5px;}
.mv_cvarea_text span::before{content: ""; width: 2px; height: 25px; background: #0b2a43; transform: rotate(-30deg); display: block; position: absolute; bottom: 0; left: 0;}
.mv_cvarea_text span::after{content: ""; width: 2px; height: 25px; background: #0b2a43; transform: rotate(30deg); display: block; position: absolute; bottom: 0; right: 0;}
.mv_cv_wrap{justify-content: center;}
.mv_cv_wrap .cvbtn_blue,
.mv_cv_wrap .cvbtn_green{width: 48%;}
.mv_cv_wrap .cvbtn_blue a,
.mv_cv_wrap .cvbtn_green a{padding: 16px 5px; border-radius: 30px;}

.mv_image_area{}
.mv_image_box{position: relative; width: calc(100% + 70px); padding: 0 0 10px;}
.mv_img01{position: absolute; top: 9%; right: 4%; z-index: 2;}
.mv_img02{}
.mv_img02 img{width: 100%;}
.mv_img03{position: absolute; bottom: 0; right: 30%; z-index: 2;}

/* 動作 */
.mv_text_maintitle{opacity: 0; transition: 0.3s ease;}
.mv_point li{opacity: 0; transition: 0.5s ease;}
.mv_point li:nth-child(1){transition-delay: 0.4s;}
.mv_point li:nth-child(2){transition-delay: 0.9s;}
.mv_point li:nth-child(3){transition-delay: 1.4s;}
.mv_cvarea{opacity: 0; transition: 0.3s ease;}
.mv_img02,
.mv_img03{opacity: 0; transform: scale(0.97); transition: 0.5s ease;}
.mv_img01{opacity: 0; transform: translate(40px,-50px); transition: 0.5s ease 0.5s;}

#mainvisual.scene1 .mv_text_maintitle,
#mainvisual.scene1 .mv_point li,
#mainvisual.scene1 .mv_cvarea{opacity: 1;}
#mainvisual.scene2 .mv_img02,
#mainvisual.scene2 .mv_img03{opacity: 1; transform: scale(1);}
#mainvisual.scene2 .mv_img01{opacity: 1; transform: translate(0);}


@media screen and (max-width: 1340px){
    .mv_image_box{width: calc(100% + 40px);}
}
@media screen and (max-width: 1270px){
    .mv_image_box{width: 100%;}
}
@media screen and (max-width: 1200px){
    .mv_point li{width: 120px; height: 120px;}
    .mv_point li span{font-size: 13px;}

    .mv_img01{width: 40%;}
    .mv_img03{width: 28%;}
}
@media screen and (max-width: 960px){
    #mainvisual{padding: 80px 0 50px;}
    .mv_text_area{width: 50%;}
    .mv_image_area{width: 50%;}
    .mv_text_maintitle{padding: 0 8%;}
    .mv_point li{width: 115px; height: 115px; margin: 0 2px;}
    .mv_point li span{font-size: 12px;}
    .mv_cvarea{margin: 10px 0 0;}
    .mv_cvarea_text span{font-size: 14px;}
    .mv_cv_wrap .cvbtn_blue,
    .mv_cv_wrap .cvbtn_green{width: 49%;}
}
@media screen and (max-width: 640px){
    #mainvisual{padding: 100px 0 50px;
        background: url(../../img/page/top/mv_back_sp.png) no-repeat center top, linear-gradient(to right, rgba(169,225,190,0.45) 0%,rgba(170,226,227,0.45) 50%,rgba(99,167,222,0.45) 100%);
        background-size: cover;
    }
    .mv_wrap{flex-direction: column-reverse;}
    .mv_text_area{width: 100%; flex-direction: column-reverse; margin-top: 10px;}
    .mv_image_area{width: 100%;}

    .mv_point{margin-left: -10px; margin-right: -10px;}
    .mv_point li{width: 105px; height: 105px;}
    .mv_point li span{letter-spacing: 0; line-height: 1.5;}
    .mv_cvarea_text{margin-bottom: 8px;}
    .mv_cv_wrap .cvbtn_blue,
    .mv_cv_wrap .cvbtn_green{width: 100%; margin: 5px 0;}

    .mv_img01{width: 45%; top: 3%; right: 2%;}
    .mv_img02{padding: 0 3%;}
}


/* top_introduction ==========*/
#top_introduction{}
.problem_area{background: #e9eff4 url(../../img/page/top/introduction_bk.png) no-repeat center center; background-size: cover; padding-bottom: 330px;}
.problem_area h2{text-align: center;}
.problem_area h2 span{font-size: 30px; color: #0b2a43; background: #c6d8e6; display: inline-block; padding: 12px 120px;}
.problem_list{position: relative; padding: 250px 0 0;
    background: 
        url(../../img/page/top/introduction_cloud03.png) no-repeat left 14% top 40%,
        url(../../img/page/top/introduction_cloud04.png) no-repeat right 15% top 36%
    ;}
.problem_list ul li{text-align: center; font-size: 16px; line-height: 2; font-weight: 700; color: #0b2a43; position: absolute;}
.problem_list ul li:nth-child(1){bottom: 50px; left: 0; right: 0; margin: auto;}
.problem_list ul li:nth-child(1) span{background: url(../../img/page/top/introduction_cloud01.png) no-repeat center center; background-size: contain; display: inline-block; padding: 75px 32px 55px; transform: translateX(-125%);}
.problem_list ul li:nth-child(2){top: 30px; left: 0; right: 0; margin: auto;}
.problem_list ul li:nth-child(2) span{background: url(../../img/page/top/introduction_cloud01.png) no-repeat center center; background-size: contain; display: inline-block; padding: 60px 40px 40px; transform: translateX(-70%);}
.problem_list ul li:nth-child(3){top: 45px; left: 0; right: 0; margin: auto;}
.problem_list ul li:nth-child(3) span{background: url(../../img/page/top/introduction_cloud01.png) no-repeat center center; background-size: contain; display: inline-block; padding: 60px 40px 40px; transform: translateX(65%);}
.problem_list ul li:nth-child(4){bottom: 30px; left: 0; right: 0; margin: auto;}
.problem_list ul li:nth-child(4) span{background: url(../../img/page/top/introduction_cloud01.png) no-repeat center center; background-size: contain; display: inline-block; padding: 58px 32px 45px; transform: translateX(125%);}

.problem_list ul li{opacity: 0; transition: 0.3s ease;}
.problem_list ul li:nth-child(1){transition-delay: 0.5s;}
.problem_list ul li:nth-child(2){transition-delay: 1s;}
.problem_list ul li:nth-child(3){transition-delay: 1.5s;}
.problem_list ul li:nth-child(4){transition-delay: 2s;}
.problem_list.show ul li{opacity: 1;}

.Person_in_need{max-width: 300px; margin: 0 auto;}

.top_product_introduction{margin-top: -330px;}
.top_introduction_wrap{background: #3284c7; border-radius: 40px; padding: 70px 20px 30px; text-align: center;}
.top_introduction_text{margin-bottom: 15px;}
.top_introduction_text h2{color: #fff; font-size: 30px; letter-spacing: 3px; margin-bottom: 15px;}
.top_introduction_text h2 span{display: block; font-size: 20px; font-weight: 500; letter-spacing: 0; line-height: 1.2; color: #3284c7;
    max-width: 615px; margin: 10px auto; padding: 8px 10px 64px;
    background: #fff url(../../img/elements/logo.png) no-repeat center bottom 15px;}
.top_introduction_text p{color: #fff; font-size: 18px; line-height: 2.2;}
.top_introduction_cv{background: #fff; border-radius: 30px; padding: 40px 15px 30px;}
.top_introduction_cv h3{font-size: 18px; font-weight: 700; margin-bottom: 25px;}
.top_introduction_cv_btnWrap{max-width: 840px; width: 100%; margin: 0 auto 20px; justify-content: center;}
.top_introduction_cv_btnWrap > div{width: 48%;}
.top_introduction_cv_btnWrap > div a{border-radius: 5px; font-size: 22px; padding: 18px 5px;}
#what_IDM span{font-size: 11px; border-bottom: 1px solid #000; padding-right: 10px; position: relative;}
#what_IDM span::after{content: ""; width: 5px; height: 5px; border-top: 1px solid #000; border-right: 1px solid #000; display: block; transform: rotate(45deg);
    position: absolute; bottom: 5px; right: 0;}
#what_IDM span:hover{cursor: pointer; opacity: 0.7;}
#what_IDM_inner{max-width: 900px; width: 100%; margin: 0 auto; position: relative;}
.what_IDM_inner_box{background: #fff; border-radius: 30px; padding: 40px;}
.what_IDM_inner_box h3{text-align: center; border-bottom: 1px solid #000;
    margin-bottom: 20px; padding-bottom: 10px; font-size: 18px;}
.what_IDM_inner_box p{font-size: 15px; line-height: 2;}
.what_IDM_inner_box p span{background:linear-gradient(transparent 60%, #ff6 60%);}

@media screen and (max-width: 960px){
    .problem_list{
        background: 
            url(../../img/page/top/introduction_cloud03.png) no-repeat left 8% top 43%,
            url(../../img/page/top/introduction_cloud04.png) no-repeat right 5% top 46%
        ;}
    .problem_list ul li{font-size: 14px;}
    .problem_list ul li:nth-child(1) span{padding: 66px 23px 45px;}
    .problem_list ul li:nth-child(2) span{padding: 45px 30px 33px;}
    .problem_list ul li:nth-child(3) span{padding: 45px 30px 34px;}
    .problem_list ul li:nth-child(4) span{padding: 50px 20px 43px;}
    .Person_in_need{max-width: 260px;}

    .top_introduction_text p{font-size: 16px;}
}
@media screen and (max-width: 640px){
    .problem_area h2 span{font-size: 20px; padding: 20px; display: block;}

    .problem_list{padding: 30px 0 0;
        background: 
        url(../../img/page/top/introduction_cloud03.png) no-repeat left 3% bottom 20%,
        url(../../img/page/top/introduction_cloud04.png) no-repeat right 0% bottom 5%;
        background-size: 20%,20%;
    }
    .problem_list ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
    .problem_list ul li{font-size: 12px; position: static; width: 48%;}
    .problem_list ul li:nth-child(odd){margin-top: -20px;}
    .problem_list ul li:nth-child(even){margin-top: 20px;}
    .problem_list ul li:nth-child(1) span{transform: translateX(0); width: 100%; padding: 45px 0; margin: 0;}
    .problem_list ul li:nth-child(2) span,
    .problem_list ul li:nth-child(3) span,
    .problem_list ul li:nth-child(4) span{transform: translateX(0); width: 100%; padding: 30px 0; margin: 0;}
    .Person_in_need{max-width: 180px;}

    .top_introduction_wrap{border-radius: 20px; padding: 30px 15px 30px;}
    .top_introduction_text h2{font-size: 20px; letter-spacing: 1px;}
    .top_introduction_text h2 span{font-size: 14px; padding: 8px 10px 48px;
        background: #fff url(../../img/elements/logo.png) no-repeat center bottom 15px; background-size: 250px;}
    .top_introduction_text p{font-size: 14px; text-align: left;}

    .top_introduction_cv{border-radius: 15px; padding: 25px 15px 30px;}
    .top_introduction_cv h3{font-size: 15px; margin-bottom: 15px;}
    .top_introduction_cv_btnWrap{margin: 0 auto 10px;}
    .top_introduction_cv_btnWrap > div{width: 100%; margin: 5px 0;}
    .top_introduction_cv_btnWrap > div a{font-size: 18px; padding: 14px 5px;}
    #what_IDM span{padding-right: 0;}
    #what_IDM span::after{right: -10px;}

    .what_IDM_inner_box{padding: 40px 20px;}
    .what_IDM_inner_box p{font-size: 13px; line-height: 1.8;}
}


/* top_features ==========*/
#top_features{padding: 120px 0 80px;}
.pickup_wrap{position: relative; padding: 40px 0;}
.pickup_wrap::before{content: ""; background: #e4f0f7;
    position: absolute; top: 0; width: calc(100% + 50px); height: 100%;}
.pickup_wrap:nth-child(odd)::before{left: 0;}
.pickup_wrap:nth-child(odd)::before{border-top-right-radius: 30px; border-bottom-right-radius: 30px; transform: translateX(-50vw) translateX(595px);}
.pickup_wrap:nth-child(even)::before{right: 0;}
.pickup_wrap:nth-child(even)::before{border-top-left-radius: 30px; border-bottom-left-radius: 30px; transform: translateX(50vw) translateX(-595px);}
.pickup_wrap + .pickup_wrap{margin-top: 40px;}
.pickup_box{justify-content: space-between; align-items: center; position: relative; z-index: 2;}
.pickup_wrap:nth-child(even) .pickup_box{flex-direction: row-reverse;}
.pickup_text{width: 46%;}
.pickup_img{width: 48%;}
.pickup_wrap:nth-child(1) .pickup_text,
.pickup_wrap:nth-child(3) .pickup_text{width: 38%;}
.pickup_wrap:nth-child(1) .pickup_img,
.pickup_wrap:nth-child(3) .pickup_img{width: 60%;}

.pickup_text h4{font-size: 25px; margin-bottom: 10px;}
.pickup_text h4 span{display: block; color: #3284c7; font-family: 'Anton', sans-serif; font-size: 18px; font-weight: 400; letter-spacing: 1px;}
.pickup_text h4 span b{font-size: 24px; font-weight: 400; margin-left: 3px;}
.pickup_text p{line-height: 2;}
.pickup_img .shadow{overflow: hidden; border-radius: 10px; box-shadow: 10px 10px 0 #e1e5e3;}


@media screen and (max-width: 1230px){
    .pickup_wrap::before{width: 90%;}
    .pickup_wrap:nth-child(odd)::before{transform: translateX(-15px);}
    .pickup_wrap:nth-child(even)::before{transform: translateX(15px);}
}
@media screen and (max-width: 960px){}
@media screen and (max-width: 640px){
    #pickup_area{padding: 40px 0 50px;}
    .pickup_text{width: 100%; margin-bottom: 20px;}
    .pickup_img{width: 100%;}
    .pickup_wrap:nth-child(1) .pickup_text,
    .pickup_wrap:nth-child(3) .pickup_text{width: 100%;}
    .pickup_wrap:nth-child(1) .pickup_img,
    .pickup_wrap:nth-child(3) .pickup_img{width: 100%;}
    .pickup_text h4{font-size: 20px;}
    .pickup_img .shadow{box-shadow: 5px 5px 0 #e1e5e3;}
}

/* 動作 */
.pickup_wrap::before{width: 0; transition: 0.3s ease 0.5s;}
.pickup_box{opacity: 0; transform: translateY(40px); transition: 0.3s ease 0.8s;}
.pickup_wrap.show::before{width: 100%;}
.pickup_wrap.show .pickup_box{opacity: 1; transform: translateY(0);}




/* top_flow ==========*/
#top_flow{background: #f4f7f8; padding: 70px 0 80px;}
#top_flow .inner{max-width: 1300px;}

.flow_wrap{justify-content: space-between; padding: 20px 0 0;}
.flow_box{width: calc((100% / 4) - 30px);}
.flow_image{position: relative; margin-bottom: 10px;}
.flow_image figure{overflow: hidden; border-radius: 10px;}
.flow_image span{font-size: 20px; color: #fff; background: #3284c7;
    display: block; width: 75px; height: 75px; border-radius: 50%;
    text-align: center; padding: 10px 0 0; transform: translate(-20px,-20px);
    position: absolute; top: 0; left: 0; z-index: 2;}
.flow_image span b{font-size: 36px; font-weight: 400;}
.flow_text h3{font-size: 22px;}
.flow_text p{line-height: 2; font-weight: 500;}

@media screen and (max-width: 960px){
    .flow_box{width: calc((100% / 4) - 10px);}
    .flow_image span{font-size: 16px; letter-spacing: 1px; width: 55px; height: 55px; transform: translate(-10px,-20px);}
    .flow_image span b{font-size: 22px;}
    .flow_text h3{font-size: 18px;}
    .flow_text p{font-size: 12px;}
}
@media screen and (max-width: 640px){
    #top_flow{padding: 40px 0 35px;}
    .flow_wrap{padding: 20px 10% 0;}
    .flow_box{width: 100%;}
    .flow_box + .flow_box{margin-top: 30px;}
}

/*事例紹介追加に伴い追加*/
.c-ribbon__new {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 5px;
  box-sizing: border-box;
  padding: 0 12px;
  margin: 0;
  height: 30px;
  line-height: 30px;
  font-size: 18px;
  letter-spacing: 0.1em;
  color: white;
  background: #66ccff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
}
.c-ribbon__new:before {
  position: absolute;
  content: '';
  top: 0;
  left: -7px;
  border: none;
  height: 38px;
  width: 7px;
  background: #66ccff;
  border-radius: 5px 0 0 5px;
}
.c-ribbon__new:after {
  position: absolute;
  content: '';
  bottom: -7px;
  left: -5px;
  border: none;
  height: 7px;
  width: 5px;
  background: #53727d;
  border-radius: 5px 0 0 5px;
}
.p-cardList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
  margin: 51px auto 60px;
  max-width: 1112px;
}
@media screen and (max-width: 690px) {
  .p-cardList {
    display: block;
    margin: 51px auto 0;
  }
}
.p-cardList > li {
  display: block;
  position: relative;
  border: 1px solid #ddd;
  width: calc( 100% / 3 - 16.7px);
  background-color: #fff;
}
@media screen and (max-width: 690px) {
  .p-cardList > li {
    width: 100%;
    margin-bottom: 10px;
  }
}
.p-cardList > li + li {
  margin-left: 20px;
}
@media screen and (max-width: 690px) {
  .p-cardList > li + li {
    margin-left: 0px;
  }
}
.p-cardList img {
  width: 100%;
  height: auto;
  max-height: 232px;
}
.p-cardList__body {
  padding: 25px 20px 15px;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}
.p-cardList__movie {
  font-weight: bold;
  font-size: 18px;
  width: 570px;
}
@media screen and (max-width: 690px) {
  .p-cardList__movie {
    margin-top: 20px;
    width: auto;
  }
}
.p-cardList__title {
  font-weight: bold;
  font-size: 18px;
  text-align: left;
}
.p-cardList__txt {
  font-size: 13px;
  margin-top: 10px;
  text-align: left;
}
.p-tagList {
  margin-top: 10px;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  color: #fff;
  margin-top: 10px;
}
.p-tagList > li {
  display: inline-block;
  border-radius: 2px;
  margin: 0 4px 4px 0;
  border: solid 1px #66ccff;
  background-color: #66ccff;
  padding: 2px 6px;
  font-size: 10px;
}