/*================
       TOP
================*/

/*================
      header
================*/
.header--top{
    position: absolute;
    background-color: transparent;
    z-index: 999;
    opacity: 0;
    animation: header--top 0.4s linear 0.8s forwards;
}

@keyframes header--top {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.header--top .headerLogo{
    padding-top: 35px;
}

.header--top .headerRight{
    margin-top:14px;
}

.header--top .navList__item a{
    height: 70px;
    padding: 37px 0 18px;
}

.header--top .navList__item.active{
    padding: 37px 0 18px;
}

/*==== fv ====*/
.fv{
    overflow: hidden;
    position: relative;
}

.fvCurtain{
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    margin: auto;
}

.fvCurtain__item{
    box-sizing: border-box;
    width: 20%;
    height: 100vh;
/*    border-left: 1px solid rgba( 255, 255, 255, .1);*/
    background:linear-gradient(90deg,transparent 0%, transparent 50%, #000 50%, #000 100%) no-repeat;
    background-size: 201%;
    background-position: 100% 100%;
    animation: fvCurtainAnime 1s ease 0.3s forwards;
}

@keyframes fvCurtainAnime {
  0% {
      background-position: 100% 100%;
  }

  100% {
      background-position: -10% 100%;
      border-right: 1px solid rgba( 255, 255, 255, .1);
  }
}

.fvCurtain__item:last-child{
    border-right: none;
}



.fvBg{
    position: relative;
    height: 100vh;
    background:url(../../assets/img/top/fv_bg.png) center center /cover no-repeat;
}


.fvGradation{
  width: 100%;
  height: 100vh;
  background: linear-gradient(-45deg, rgba(110, 0, 110, 0.75), rgba(0, 168, 208, 0.75));
  background-size: 200% 200%;
  animation: gradation 20s ease infinite;
  position: absolute;
  z-index: 2;
}
 
@keyframes gradation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.topTitleArea{
    position: absolute;
    z-index: 1000;
    top: 50%;
    transform: translateY(-50%) scale(1.0)!important;
    left: 0;
    right: 0;
    margin: auto;
    width: 760px;
    opacity: 0;
    animation: topTitleArea 10s cubic-bezier(0,0.9,0.3,1) 1.3s forwards;
}

@keyframes topTitleArea{
  0% {
      opacity: 0;
  }

  100% {
      opacity: 1;
  }
}

@media all and (-ms-high-contrast:none){ /*ie11対応*/
  *::-ms-backdrop, .open .topTitleArea {
    opacity: 1;
  }
}

.topSubTitle,
.topTitle{
    color: #fff;
    text-align: center;
}

.topSubTitle{
    margin-bottom: 20px;
    font-size: 14px;
    font-size: 1.4rem;
}

.topTitle{
    font-size: 40px;
    font-size: 4.0rem;
    font-weight: normal;
}

.scrollIcon{
    position: absolute;
    bottom: 150px;
    width: 40px;
    left: 0;
    right: 0;
    margin: auto;
}

.scrollIconCircle{
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    border: 1px solid #fff;
    border-radius: 50%;
    position: relative;
}

.scrollIconCircle__inner{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 30px;
    height: 30px;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
}

#svgCircle {
    text-align: center;
    padding-top: 250px;
    opacity: 0;
    animation: scrollicon 0.4s linear 2.2s forwards;
}

@keyframes scrollicon {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

#svgCircle svg {
    height: 40px;
}
#svgCircle svg #arrow {
    -webkit-transform: scale(.7);
    -ms-transform: scale(.7);
    transform: scale(.7);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
}
#svgCircle svg #circle {
    -webkit-transform: scale(.8) rotate(-90deg);
    -ms-transform: scale(.8) rotate(-90deg);
    transform: scale(.8) rotate(-90deg);
    stroke-width: 25px;
    stroke-dasharray: 2000;
    -webkit-animation-name: svgCircle;
    animation-name: svgCircle;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
}
@-webkit-keyframes svgCircle {
    0% {
        stroke-dashoffset: 0;
    }
    30% {
        stroke-dashoffset: 2000;
    }
    60% {
        stroke-dashoffset: 0;
    }
}

/*================
    contents
================*/
.contents{
    box-sizing: border-box;
    position: relative;
    margin: 0 auto;
    padding: 70px 50px;
}

.contents--01{
    width: 1200px;
}

.contents--02{
    padding: 70px 0;
}

.contents--03{
    height: 540px;
    padding: 50px 0;
    background: url(../img/top/contents_bg_01.png) center center/cover no-repeat;
}

.contents--topics{
    padding: 100px 0 150px;
    background-color: #EBF0F5;
    position: relative;
    background-image: url(../img/top/topics_bg_01.png);
    background-position: center center;
    background-repeat: repeat-y;
    background-size: 2582px;
}

.contentsInner{
    max-width: 1200px;
    margin: 0 auto;
}

.contents--02 .contentsInner{
    position: relative;
    height: 545px;
}

.contents--topics .contentsInner{
    max-width: 980px;
}


.contents--01 .contentsImage{
    position: absolute;
    top: -105px;
    right: 100px;
    z-index: 10;
}

.contents--02 .contentsImage{
    width: 67.189%;
/*    margin-bottom: 475px;*/
}

.contentsBgImage02{
    width: 100%;
    height: auto;
/*
    background: url(../img/top/contents_image_02.png) center center no-repeat ;
    background-size: cover;
*/
}

.contentsBox{
    box-sizing: border-box;
    position: relative;
    z-index: 300;
    background-color: #fff;
    opacity: 0;
    -webkit-transform: translate(0,10px);
    transform: translate(0,10px);
    transition: 1s ease;
}

.boxMove{
    opacity: 1.0;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
    transition: 1s ease;
}

.contents--01 .contentsBox{
    width: 690px;
/*    height: 395px;*/
    padding: 65px 100px 50px;
}

.contents--02 .contentsBox{
    position: absolute;
    top: -230px;
    right: 0;
    width: 750px;
    /* height: 705px; */
    padding: 105px 100px;
}

.contents--03 .contentsBox{
    box-sizing: border-box;
    position: relative;
/*    left: 100px;*/
    left: 0;
    width: 590px;
/*    height: 440px;*/
    padding: 97px 100px 93px;
}

.contentsHead{
    font-size: 26px;
    font-size: 2.6rem;
    font-weight: normal;
    margin-bottom: 39px;
}

.contents--topics .contentsHead{
    margin-bottom: 49px;
    text-align: center;
}

.contentsHead:after {
    content: "";
    display: block;
    width: 20px;
    height: 1px;
    margin-top: 34px;
    background-color: #9F9F9F;
}

.contents--topics .contentsHead:after {
    margin: 34px auto 0;
}

.contentsSubHead{
    margin-left: 23px;
    font-size: 12px;
    font-size: 1.2rem;
    color: #A3A3A3;
    font-weight: bold;
    line-height: 2.167;
    vertical-align: bottom;
}

.contents--topics .contentsSubHead{
    margin: 10px 0 0;
    line-height: 1;
}

.contentsText{
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 2.143;
}

.useImage{
    margin-top: 40px;
}

.useImageBox{
    display: flex;
    justify-content: space-between;
    width: 550px;
}

.useImageBox__item{
    box-sizing: border-box;
    position: relative;
    width: 150px;
}

.useImageBox__item:after{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -48px;
    width: 40px;
    height: 22px;
    background: url(../img/top/contents_icon_double-arrow.png);
}

.useImageBox__item--01{
    border: 3px solid #00B0F0;
    background-color: #00B0F0;
}

.useImageBox__item--02{
    border: 3px solid #4DB0C7;
    background-color: #4DB0C7;
}

.useImageBox__item--03{
    border: 3px solid #C55A11;
    background-color: #C55A11;
}

.useImageBox__item--03:after{
    display: none;
}

.useImageTop{
    position: relative;
    box-sizing: border-box;
    width: 144px;
    height: 97px;
}

.useImageHead{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: auto;
    font-size: 20px;
    font-size: 2.0rem;
    font-weight: normal;
    color: #fff;
    line-height: 1.3;
    text-align: center;
}

.useImageText{
    width: 100%;
    padding: 80px 0 11px;
    background: url(../img/top/contents_image_03.png) top 5px center no-repeat #fff;
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
}

.topicsList{
    margin-bottom: 100px;
}

.topicsList__item{
    width: 460px;
    height: 100%;
    margin-bottom: 60px;
}

.topicsList__item:last-child{
    margin-bottom: 0;
}

.topicsList__item:nth-child(2n+1){
/*    margin-top: -150px;*/
    float: left;
}

.topicsList__item:first-child{
    margin-top: 0;
}

.topicsList__item:nth-child(2){
    margin-top: 150px;
}

.topicsList__item:nth-child(2n){
    float: right;
}

.topicsItemTop{
    display: inline-block;
    position:relative;
    z-index: 200;
    overflow: hidden;
    max-width: 100%;
    vertical-align: bottom;
}

.topicsItemTop img{
    opacity: 0;
    background-color: transparent;
}

.topicsAnime .topicsItemTop img{
    animation: topicsCurtain 0.01s ease 1.5s forwards;
}

@keyframes topicsCurtain{
  0% {
/*    background-color: transparent;*/
    opacity: 0;
  }

  100% {
    opacity: 1.0;
  }
}

.topicsAnime .boxCurtain{
    position: absolute;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    background:linear-gradient(90deg, #0D1F3C 0%, #0D1F3C 50%, transparent 50%, transparent 100%) no-repeat;
    background-size: 200%;
    background-position: 100% 0;
    animation: topicsCurtainAnime 1.8s cubic-bezier(1, 0, 0, 1) 0.4s forwards;
}

.topicsItemImage::-webkit-scrollbar{
    display: none;
}

@keyframes topicsCurtainAnime {
  0% {
    background-position: 100% 0;
  }
  50% {
    background-position: 0% 0;
  }

  100% {
      width: 100%;
    background-position: -100% 0;
  }
}

.topicsItemBottom{
    position: relative;
    background-color: #fff;
    margin: -40px 30px 0;
    opacity: 0;
    -webkit-transform: translate(0,10px);
    transform: translate(0,10px);
    transition: 0.7s ease 1.2s;
}

.topicsAnime > .topicsItemBottom{
    z-index: 200;
    opacity: 1.0;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
    transition: 0.7s ease 1.2s;
}

.topicsItemBottom > a{
    display: block;
    box-sizing: border-box;
    width: 400px;
    padding: 50px;
}

.topicsItemCategory{
    position: absolute;
    z-index: 10px;
    top: 0;
    right: 0;
    width: 140px;
    height: 40px;
    font-size: 14px;
    font-size: 1.4rem;
    color: #fff;
    text-align: center;
    line-height: 40px;
}

.topicsItemCategory--news{
    background-color: #3B5BB1;
}

.topicsItemCategory--usecase{
    background-color: #963BB1;
}

.topicsItemCategory--column{
    background-color: #3BB176;
}

.newPost{
    display: inline-block;
    width: 46px;
    height: 20px;
    font-size: 10px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #CE4242;
    margin-right: 10px;
    border-radius: 20px;
}

.topicsItemDate{
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: bold;
    color: #000;
    margin-bottom: 24px;
}

.topicsItemDate:after{
    content: "";
    display: block;
    width: 20px;
    height: 1px;
    margin-top: 23px;
    background-color: #9F9F9F;
}

.topicsItemHead{
    display: inline;
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: bold;
    color: #2E9AB5;
    line-height: 1.667;
}

.topicsItemBottom .link{
    transition: .5s ease;
    padding: 0.2em 0;
}

.topicsItemBottom > a:hover .link {
    background-position: -100% 0;
    color: #fff;
}

/*ie11 edge用記述*/
/*edge*/
@supports (-ms-ime-align:auto) {
.topicsItemBottom > a:hover .link {
    color: rgba(46,154,181,1);
    text-decoration: underline;
}
}
/*ie11*/
@media all and (-ms-high-contrast:none) {  
*::-ms-backdrop, .topicsItemBottom > a:hover .link {
    color: rgba(46,154,181,1);
    text-decoration: underline;
}
}

/*================
 curtain animation
================*/

.curtain{
    display: inline-block;
    position:relative;
    z-index: 200;
    overflow-x: hidden;
}

/*.curtain .contentsHead,
.curtain .contentsText,
.curtain .useImage,
.curtain-b .contentsHead,
.curtain-b .contentsText,
.curtain-b img,
*/
.curtain img{
    opacity: 0;
    background-color: transparent;
}

/*
.curtainAnime.contentsBox,
.curtainAnime .contentsHead,
.curtainAnime .contentsText,
.curtainAnime .useImage,
*/
.curtainAnime img{
    animation: curtain 0.01s ease 1.5s forwards;
}

@keyframes curtain{
  0% {
/*    background-color: transparent;*/
    opacity: 0;
  }

  100% {
    opacity: 1.0;
  }
}

.curtainAnime.contentsBox{
    animation: curtainBg 0.01s ease 1.6s forwards;
}

@keyframes curtainBg{
  0% {
    background-color: transparent;
  }

  100% {
      background-color: #fff;
  }
}


.curtainAnime .boxCurtain{
    position: absolute;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    background:linear-gradient(90deg, #0D1F3C 0%, #0D1F3C 50%, transparent 50%, transparent 100%) no-repeat;
    background-size: 200%;
    background-position: 100% 0;
    animation: curtainAnime 1.8s cubic-bezier(1, 0, 0, 1) 0.6s forwards;
}

.contentsImage::-webkit-scrollbar{
    display: none;
}

@keyframes curtainAnime {
  0% {
    background-position: 100% 0;
  }
  50% {
    background-position: 0% 0;
  }

  100% {
      width: 100%;
    background-position: -100.1% 0;
  }
}

/*================
     particles
================*/
.particles{
    width: 100%;
    height: 100vh;
    background-color: transparent;
    transform: scale(1.1);
    animation: particle 0.6s ease 1.3s forwards;
    opacity: 0;
    position: relative;
    z-index: 999;
}

@keyframes particle {
  0% {
      opacity: 0:
    transform: scale(1.1);
  }

  100% {
      opacity: 1;
    transform: scale(1.0);
  }
}

@media all and (-ms-high-contrast:none){ /*ie11対応*/
  *::-ms-backdrop, .open .particles {
    opacity: 1;
  }
}

/*================
      footer
================*/
.footer--toppage{
    border: none;
}


/*=======================
      English version
=======================*/
.en .contents--03 .contentsBox{
    width: 700px;
    padding: 78px 100px 76px;
}

.en .contents--03 .contentsBox .contentsText:first-of-type{
    margin-bottom: 1em;
}