@charset "UTF-8";
#top {
  overflow: hidden; }
  #top main {
    margin-top: 100px;
    /*@include mq( $tb , $pc )  {
    	margin-top: 14vw;
    }
    @include mq( $pc , $pc-l )  {
    	margin-top: 12vw;
    }*/ }
    @media screen and (max-width: 767px) {
      #top main {
        margin-top: 70px; } }
  @media print, screen and (min-width: 768px) {
    #top .wrap {
      -js-display: flex;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap; } }
  #top .btn {
    margin-top: 3em;
    text-align: center; }
  #top .sec-keyv {
    width: 100%;
    position: relative;
    	/*height: calc(100vh - 100px);
    	overflow: hidden;
    	background: url("/diversity/jst/assets/img/top/keyv.jpg") no-repeat center center;
    	background-size: cover;
    
    	.keyv-item{
    		overflow: hidden;
    		width: 100%;
    		position: relative;
    		height: calc(100vh - 100px);
    		@include flex;
    		@include flex-wrap(wrap);
    		@include justify-content(center);
    		@include align-items(center);
    		@include mq( $tb , max ) {
    			height: calc(100vh - 70px);
    		}
    	}*/
    /*
    	.icondown {
    		position: absolute;
    		/*top: calc(100% - 80px);
    		right: 8.5vw;
    		width: 10px;
    		height: 160px;*/
    		/*bottom: 2em;
    		left: 50%;
    		transform: translateX(-50%);
    		text-align: center;
    		z-index: 1;
    		display: block;
    		width: 42px;
    		/*
    		.text{
    			font-weight: 400;
    			@include font-size(16);
    			color: #fff;
    			letter-spacing: 0.1em;
    		}
    
    		&:after {
    			content: "";
    			display: block;
    			position: relative;
    			width: 30px;
    			height: 30px;
    			border-bottom: 1px solid #fff;
    			border-left: 1px solid #fff;
    			transform: rotate(-45deg);
    			bottom: -0.2em;
    			right: -1em;
    		}*/
    		/*@-webkit-keyframes scroll {
    			0% {
    				height: 0;
    				opacity: 1;
    			}
    			100% {
    				height: 100%;
    				opacity: 0;
    			} 
    		}
    		@keyframes scroll {
    			0% {
    				height: 0;
    				opacity: 1;
    			}
    			100% {
    				height: 100%;
    				opacity: 0;
    			}
    		}
    	}
    */ }
    #top .sec-keyv .slide {
      padding: 0 !important; }
    #top .sec-keyv .keyv-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }
      @media screen and (max-width: 767px) {
        #top .sec-keyv .keyv-text {
          width: 80%; } }
      @media print, screen and (min-width: 768px) {
        #top .sec-keyv .keyv-text {
          width: 60%; } }
      @media screen and (min-width: 768px) and (max-width: 1023px) {
        #top .sec-keyv .keyv-text {
          width: 50%; } }
      #top .sec-keyv .keyv-text .keyv_description {
        text-align: center;
        font-weight: bold;
        font-size: 18px;
        font-size: 1.8rem;
        color: #6A6A6A;
        margin: 0 !important;
        letter-spacing: 0.1em; }
        @media screen and (max-width: 767px) {
          #top .sec-keyv .keyv-text .keyv_description {
            font-size: 9px;
            font-size: 0.9rem; } }
    #top .sec-keyv .insta {
      position: absolute;
      top: 50%;
      right: 0;
      margin: 0;
      transform: rotate(90deg); }
      #top .sec-keyv .insta a {
        color: #44C6AB;
        font-size: 15px;
        font-size: 1.5rem;
        font-family: 'Poppins', sans-serif;
        font-weight: 500;
        font-style: normal; }
        #top .sec-keyv .insta a:before {
          font-family: FontAwesome;
          content: "";
          padding-right: 0.5em; }
      @media screen and (max-width: 767px) {
        #top .sec-keyv .insta {
          right: -2em; } }
  #top .sec-about {
    padding: 8em 0 5em;
    background: url("/diversity/jst/assets/img/top/bg_about.png") no-repeat center center;
    background-size: contain; }
    @media screen and (max-width: 767px) {
      #top .sec-about {
        background-size: auto 50%;
        padding: 2.5em 0 4em; } }
    #top .sec-about .copy {
      font-size: 24px;
      font-size: 2.4rem;
      font-weight: bold;
      color: #44C6AB;
      position: relative;
      width: 70vw;
      margin: 1.5em auto;
      padding: 1em 1.5em;
      text-align: center; }
      @media screen and (max-width: 767px) {
        #top .sec-about .copy {
          width: 90vw;
          font-size: 16px;
          font-size: 1.6rem;
          margin-bottom: 1em; } }
      #top .sec-about .copy:before, #top .sec-about .copy:after {
        content: "";
        display: block;
        width: 47px;
        height: 49px; }
        @media screen and (max-width: 767px) {
          #top .sec-about .copy:before, #top .sec-about .copy:after {
            width: 3vw; } }
      #top .sec-about .copy:before {
        background: url("/diversity/jst/assets/img/top/icon_about_title01.png") no-repeat 0 0;
        background-size: contain;
        position: absolute;
        top: 0;
        left: 0; }
      #top .sec-about .copy:after {
        background: url("/diversity/jst/assets/img/top/icon_about_title02.png") no-repeat 0 0;
        background-size: contain;
        position: absolute;
        bottom: 0;
        right: 0; }
    #top .sec-about .summary {
      position: relative;
      width: 100%;
      text-align: center; }
      @media screen and (max-width: 767px) {
        #top .sec-about .summary {
          padding: 0 1em; } }
      #top .sec-about .summary .text {
        line-height: 2.5;
        padding: 0.5em 1em 3em;
        margin-top: 0; }
        @media screen and (max-width: 767px) {
          #top .sec-about .summary .text {
            font-size: 12px;
            font-size: 1.2rem;
            line-height: 2; } }
      #top .sec-about .summary span {
        position: absolute;
        display: block; }
        #top .sec-about .summary span.icon01 {
          width: 181px;
          height: 208px;
          top: 0.5em;
          left: 4vw; }
          @media screen and (max-width: 767px) {
            #top .sec-about .summary span.icon01 {
              /*width: 13vw;
              left: 0;*/
              display: none; } }
        #top .sec-about .summary span.icon02 {
          width: 199px;
          height: 208px;
          bottom: 0;
          right: 4vw; }
          @media screen and (max-width: 767px) {
            #top .sec-about .summary span.icon02 {
              /*width: 14vw;
              right: 0;*/
              display: none; } }
  #top .bg {
    background: url("/diversity/jst/assets/img/bg_naname.png") no-repeat center center;
    background-size: cover; }
  #top .sec-topics {
    background: url("/diversity/jst/assets/img/bg_naname.png") no-repeat center center;
    background-size: cover;
    padding: 5em 0; }
    #top .sec-topics.new {
      background: none; }
    #top .sec-topics .topics-wrap {
      background: #fff;
      padding: 6em 3.5em 4em;
      margin-top: -2em; }
      @media screen and (max-width: 767px) {
        #top .sec-topics .topics-wrap {
          padding: 4em 1em 3em; } }
  #top .sec-model {
    padding: 0 0 5em; }
    #top .sec-model .model-banner {
      background: #fff;
      border: 5px solid #CDFAF0;
      width: 80%;
      margin: 0 auto; }
      #top .sec-model .model-banner p {
        color: #44C6AB;
        margin-top: 0;
        font-weight: bold;
        font-size: 20px;
        font-size: 2rem; }
        #top .sec-model .model-banner p .l {
          padding-left: 1em; }
      #top .sec-model .model-banner a {
        display: block;
        padding: 3em 7.5em 3em 3.5em;
        position: relative; }
        #top .sec-model .model-banner a:after {
          content: "";
          display: block;
          width: 50px;
          height: 50px;
          background: url("/diversity/jst/assets/img/icon_arrow02.png") no-repeat center center;
          background-size: contain;
          position: absolute;
          top: 50%;
          right: 4em;
          transform: translateY(-50%); }
          @media screen and (max-width: 767px) {
            #top .sec-model .model-banner a:after {
              width: 20px;
              height: 20px; } }
  #top .sec-news {
    background: #fff;
    padding: 6.5em 0; }
    #top .sec-news .news-container {
      margin-top: 3em; }
      @media print, screen and (min-width: 768px) {
        #top .sec-news .news-container {
          padding: 1em 0;
          display: grid;
          grid-template-areas: "item1 item2" "item3 item2";
          grid-auto-columns: 30% 70%; }
          #top .sec-news .news-container .news-title {
            grid-area: item1;
            padding-right: 25%; }
          #top .sec-news .news-container .news-summary {
            grid-area: item2; }
          #top .sec-news .news-container .news-btn {
            grid-area: item3; }
            #top .sec-news .news-container .news-btn .btn {
              text-align: left !important; } }
      #top .sec-news .news-container .tab_box .tab_panel {
        display: none; }
        #top .sec-news .news-container .tab_box .tab_panel.active {
          display: block; }
  #top .sec-project {
    background: url("/diversity/jst/assets/img/top/bg_project.png") no-repeat center center;
    background-size: cover;
    padding: 7em 0; }
    #top .sec-project .wrap {
      -js-display: flex;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      margin: 3em -1em 0; }
      @media screen and (max-width: 767px) {
        #top .sec-project .wrap {
          -webkit-justify-content: center;
          justify-content: center; } }
      #top .sec-project .wrap .project-item {
        width: calc(100% / 4);
        padding: 1.5em 1em;
        position: relative; }
        @media screen and (max-width: 479px) {
          #top .sec-project .wrap .project-item {
            width: 80%;
            padding: 1em 2em; } }
        @media screen and (min-width: 480px) and (max-width: 1023px) {
          #top .sec-project .wrap .project-item {
            width: 50%;
            padding: 1em 2em; } }
        #top .sec-project .wrap .project-item .inner {
          background: #94E5D3;
          border-radius: 10px;
          height: 100%;
          overflow: hidden; }
          #top .sec-project .wrap .project-item .inner a {
            display: block; }
        #top .sec-project .wrap .project-item .thumb {
          padding: 1.5em 2em;
          text-align: center; }
          #top .sec-project .wrap .project-item .thumb img {
            height: 85px; }
        #top .sec-project .wrap .project-item .title {
          /*position: absolute;
          bottom: 0;
          width: calc(100% - 2em);*/
          width: 100%;
          padding: 1em 2em;
          /*height: calc(50% - 2em);*/
          background: #E4FCF6;
          color: #44C6AB; }
          #top .sec-project .wrap .project-item .title a {
            color: #44C6AB;
            text-decoration: none; }
            #top .sec-project .wrap .project-item .title a:visited {
              color: #44c6ab; }
            #top .sec-project .wrap .project-item .title a:hover, #top .sec-project .wrap .project-item .title a:active, #top .sec-project .wrap .project-item .title a:focus {
              color: #44c6ab;
              text-decoration: none; }
          #top .sec-project .wrap .project-item .title .title-box {
            position: relative;
            width: 100%; }
            #top .sec-project .wrap .project-item .title .title-box .jp {
              margin: 0;
              font-size: 18px;
              font-size: 1.8rem;
              font-weight: bold;
              letter-spacing: 0.1em;
              color: #44C6AB; }
              @media screen and (max-width: 767px) {
                #top .sec-project .wrap .project-item .title .title-box .jp {
                  font-size: 16px;
                  font-size: 1.6rem; } }
            #top .sec-project .wrap .project-item .title .title-box .arrow-icon {
              width: 26px;
              height: 26px;
              position: absolute;
              top: 50%;
              right: 0.5em;
              transform: translateY(-50%);
              background: url("/diversity/jst/assets/img/top/project_arrow01.png") no-repeat center center;
              background-size: contain; }
        #top .sec-project .wrap .project-item.item02 .inner {
          background: #5973F0; }
          #top .sec-project .wrap .project-item.item02 .inner .title {
            background: #E8ECFF; }
          #top .sec-project .wrap .project-item.item02 .inner .title-box .jp {
            color: #5973F0; }
          #top .sec-project .wrap .project-item.item02 .inner .title-box .arrow-icon {
            background: url("/diversity/jst/assets/img/top/project_arrow02.png") no-repeat center center;
            background-size: contain; }
        #top .sec-project .wrap .project-item.item03 .inner {
          background: #F0784F; }
          #top .sec-project .wrap .project-item.item03 .inner .title {
            background: #FDEBE5; }
          #top .sec-project .wrap .project-item.item03 .inner .title-box .jp {
            color: #F0784F; }
          #top .sec-project .wrap .project-item.item03 .inner .title-box .arrow-icon {
            background: url("/diversity/jst/assets/img/top/project_arrow03.png") no-repeat center center;
            background-size: contain; }
        #top .sec-project .wrap .project-item.item04 .inner {
          background: #8B6FC9; }
          #top .sec-project .wrap .project-item.item04 .inner .title {
            background: #EDE7FC; }
          #top .sec-project .wrap .project-item.item04 .inner .title-box .jp {
            color: #8B6FC9; }
          #top .sec-project .wrap .project-item.item04 .inner .title-box .arrow-icon {
            background: url("/diversity/jst/assets/img/top/project_arrow04.png") no-repeat center center;
            background-size: contain; }
        #top .sec-project .wrap .project-item.item05 .inner {
          background: #59D3F0; }
          #top .sec-project .wrap .project-item.item05 .inner .title {
            background: #D9F8FF; }
          #top .sec-project .wrap .project-item.item05 .inner .title-box .jp {
            color: #59D3F0; }
          #top .sec-project .wrap .project-item.item05 .inner .title-box .arrow-icon {
            background: url("/diversity/jst/assets/img/top/project_arrow05.png") no-repeat center center;
            background-size: contain; }
        #top .sec-project .wrap .project-item.item06 .inner {
          background: #90E278; }
          #top .sec-project .wrap .project-item.item06 .inner .title {
            background: #EEFAEA; }
          #top .sec-project .wrap .project-item.item06 .inner .title-box .jp {
            color: #90E278; }
          #top .sec-project .wrap .project-item.item06 .inner .title-box .arrow-icon {
            background: url("/diversity/jst/assets/img/top/project_arrow06.png") no-repeat center center;
            background-size: contain; }
        #top .sec-project .wrap .project-item.item07 .inner {
          background: #FFC155; }
          #top .sec-project .wrap .project-item.item07 .inner .title {
            background: #FFF2DD; }
          #top .sec-project .wrap .project-item.item07 .inner .title-box .jp {
            color: #FFC155; }
          #top .sec-project .wrap .project-item.item07 .inner .title-box .arrow-icon {
            background: url("/diversity/jst/assets/img/top/project_arrow07.png") no-repeat center center;
            background-size: contain; }
        #top .sec-project .wrap .project-item.item08 .inner {
          background: #db79b7; }
          #top .sec-project .wrap .project-item.item08 .inner .title {
            background: #fee5f9; }
          #top .sec-project .wrap .project-item.item08 .inner .title-box .jp {
            color: #db79b7; }
          #top .sec-project .wrap .project-item.item08 .inner .title-box .arrow-icon {
            background: url("/diversity/jst/assets/img/top/project_arrow08.png") no-repeat center center;
            background-size: contain; }
  #top .sec-banner {
    padding: 5em 0 0; }
    #top .sec-banner .banner-title {
      position: relative;
      width: 100%;
      text-align: center; }
      #top .sec-banner .banner-title:before {
        content: "";
        display: block;
        height: 1px;
        width: 100%;
        background: #E3E3E3;
        position: absolute;
        top: 50%;
        left: 0;
        z-index: -1; }
      #top .sec-banner .banner-title .jp {
        font-size: 18px;
        font-size: 1.8rem;
        display: inline-block;
        padding: 1em 2em;
        background: #fff;
        color: #4A4A4A;
        font-weight: normal;
        margin: 0; }
    #top .sec-banner .banner-wrap {
      -js-display: flex;
      display: -webkit-flex;
      display: flex;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      -webkit-align-items: center;
      align-items: center; }
      #top .sec-banner .banner-wrap .banner-item {
        padding: 0.5em 1.5em; }
      @media screen and (max-width: 767px) {
        #top .sec-banner .banner-wrap {
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
          margin-left: -0.5em;
          margin-right: -0.5em; }
          #top .sec-banner .banner-wrap .banner-item {
            width: 50%;
            padding: 0.5em; } }
    #top .sec-banner .sec-kyoudou {
      padding: 1em 4vw 4em;
      margin-bottom: 5em;
      border-bottom: 1px solid #E3E3E3; }
      @media screen and (max-width: 767px) {
        #top .sec-banner .sec-kyoudou {
          padding: 1em 0 4em; } }
      @media screen and (max-width: 767px) {
        #top .sec-banner .sec-kyoudou .banner-wrap .banner-item.-last {
          width: 30%; } }
    #top .sec-banner .sec-renkei {
      padding: 1em 0 4em;
      margin-bottom: 7em;
      border-bottom: 1px solid #E3E3E3; }
      @media screen and (max-width: 767px) {
        #top .sec-banner .sec-renkei {
          padding: 1em 0 4em; } }
      @media screen and (max-width: 767px) {
        #top .sec-banner .sec-renkei .banner-wrap .banner-item.-four {
          width: 40%; }
        #top .sec-banner .sec-renkei .banner-wrap .banner-item.-eight {
          width: 20%; } }
    #top .sec-banner .pale-bg {
      background: #F7FCFC;
      padding: 4.5em 0;
      margin-top: 5em; }
      #top .sec-banner .pale-bg .banner-wrap {
        margin-left: -1em;
        margin-right: -1em; }
      #top .sec-banner .pale-bg .banner-item {
        width: calc(100% / 3);
        padding: 1em;
        margin: 0; }
        @media screen and (max-width: 479px) {
          #top .sec-banner .pale-bg .banner-item {
            width: 50%; } }