footer.footer {
  margin-top: 2em; }

.bgdeco {
  background: url("../../img/top/bg_deco.png") no-repeat 0 0;
  background-size: cover;
  padding: 75px 0; }

body#top {
  background: url("../../img/bg_gradation_pale.jpg") no-repeat 0 0;
  background-size: 100% auto; }
  @media screen and (max-width: 859px) {
    body#top {
      background-size: 150% auto; }
      body#top .btn-01 a {
        padding: 20px;
        display: block;
        width: 100%; } }

.keyv {
  overflow: hidden;
  width: 100%;
  height: 100vh;
  position: relative;
  /*
  .header-logo{
  	position: absolute;
  	top: 1.4em;
  	left: 4.1em;
  	z-index: 10;
  	width: 145px;
  	@include mq( $tb , $sp ) {
  		top: 1.4em;
  		left: 4.1em;
  		width: 80px;
  		margin: 0;
  	}
  	@include mq( $sp , max ) {
  		top: 0.5em;
  		left: 2em;
  		width: 80px;
  		margin: 0;
  	}
  }
  */
  /*
  .keyv-item{
  	width: 100%;
  	height: 100vh;
  	@include mq( $pc-l , max )  {
  		height: auto;
  	}
  	.slide-img{
  		display: none;
  		@include mq( $pc-l , max )  {
  			display: block;
  		}
  	}
  	&.keyv01{
  		background: url("../../img/top/keyv02.png") no-repeat center center;
  		background-size: cover;
  	}
  	&.keyv02{
  		background: url("../../img/top/keyv01.jpg") no-repeat center center;
  		background-size: cover;
  	}
  	@include mq( $pc-l , max )  {
  		background: none!important;
  	}
  }
  */
  /*
  .btn {
  	a {
  		color: #fff;
  		position: relative;
  		border: 2px solid $main-color;
  		display: inline-block;
  		padding: 1.5em 40px 1.5em 3.5em;
  		text-align: left;
  		transition: .2s;
  		background: $main-color url(../../img/icon_contact.svg) no-repeat 1.5em 50%;
  		background-size: 19px auto;
  		@include mq( $tb , min )  {
  			width: 345px;
  		}
  		&::after {
  			content: "";
  			width: 32px;
  			height: 32px;
  			display: block;
  			position: absolute;
  			top: 50%;
  			right: 1.5em;
  			transform: translateY(-50%);
  			background: url(../../img/icon_arrow_w.png) no-repeat 0 0;
  			background-size: contain;
  		}
  		&:hover {
  			color: $main-color;
  			background: #fff url(../../img/icon_contact.svg) no-repeat 1.5em 50%;
  			&::after {
  				background: url(../../img/icon_arrow_b.png) no-repeat 0 0;
  				background-size: contain;
  			}
  		}
  	}
  	@include mq( $tb , min )  {
  		position: absolute;
  		bottom: 0;
  		right: 0;
  		z-index: 1;
  	}
  	@include mq( $tb , max )  {
  		margin: 0;
  		display: block;
  		width: 100%;
  		text-align: center;
  		a{
  			display: block;
  		}
  	}
  }
  */ }
  @media screen and (max-width: 1199px) {
    .keyv {
      height: auto;
      padding: 30px 0; } }
  .keyv .container {
    position: relative; }
  .keyv .copy {
    width: 100%;
    margin-top: 15vw;
    /*position: absolute;
    top: 24vh;
    left: 0;
    z-index: 1;
    margin: 0;*/
    /*@include mq( $tb , max )  {
    	margin: 0;
    	transform: translate(-50%,-80%);
    }*/ }
  .keyv .img {
    margin-top: 3.5em; }
    @media screen and (max-width: 859px) {
      .keyv .img {
        margin-top: 2em; } }
  .keyv .scroll {
    color: #59B49A;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-size: 20px;
    font-size: 2rem;
    font-family: 'Roboto', sans-serif;
    font-style: italic;
    position: absolute;
    bottom: 1em;
    right: 7vw; }
    @media screen and (min-width: 480px) and (max-width: 1200px) {
      .keyv .scroll {
        font-size: 2.5px;
        font-size: 1.6rem; } }
    .keyv .scroll:after {
      content: "";
      display: inline-block;
      width: 8px;
      height: 29px;
      background: url("../../img/top/scroll.png") no-repeat 0 0;
      background-size: contain;
      margin-top: 0.5em; }
    @media screen and (max-width: 1199px) {
      .keyv .scroll {
        display: none; } }

/*.wrap{
    @include mq( $tb , max )  {
        transform: scale(1.1);
    }
  }
*/
@keyframes zoomUp {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(1.15); } }
  /*
  .swiper-slide-active .slide-img,
  .swiper-slide-duplicate-active .slide-img,
  .swiper-slide-prev .slide-img{
    animation: zoomUp 10s linear 0s 1 normal both;  
  }
  .slide-img img{
    display: block;
  }
*/
section.section {
  padding: 5em 0; }
  section.section div.title .jp {
    color: #606060;
    font-size: 18px;
    font-size: 1.8rem;
    margin: 0;
    line-height: 1.5;
    font-weight: normal;
    margin-top: 5px; }
    @media screen and (min-width: 480px) and (max-width: 1200px) {
      section.section div.title .jp {
        font-size: 2.25px;
        font-size: 1.44rem; } }
    @media screen and (max-width: 859px) {
      section.section div.title .jp {
        font-size: 16px;
        font-size: 1.6rem; } }
  @media screen and (max-width: 859px) and (min-width: 480px) and (max-width: 1200px) {
    section.section div.title .jp {
      font-size: 2px;
      font-size: 1.28rem; } }

  section.section div.title .en {
    color: #84D0D9;
    font-size: 60px;
    font-size: 6rem;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-style: italic;
    line-height: 1;
    font-weight: 300;
    letter-spacing: 0.1em; }
    @media screen and (min-width: 480px) and (max-width: 1200px) {
      section.section div.title .en {
        font-size: 7.5px;
        font-size: 4.8rem; } }
    @media screen and (max-width: 859px) {
      section.section div.title .en {
        font-size: 40px;
        font-size: 4rem; } }
  @media screen and (max-width: 859px) and (min-width: 480px) and (max-width: 1200px) {
    section.section div.title .en {
      font-size: 5px;
      font-size: 3.2rem; } }

section.sec-about {
  padding: 14.2vw 0 8.9vw;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.73) 15%, white 33%, white 100%);
  margin-top: -60px;
  /*@include mq( $tb , max )  {
  	background: url(../../img/top/txt_innovation.svg) no-repeat 23% 85%, url(../../img/top/txt_design.svg) no-repeat 85% 100%;
  	background-size: 80% auto,50% auto;
  }
  &:before{
  	content: "";
  	display: block;
  	background: #FAFAFA;
  	position: absolute;
  	top: 0;
  	right: 0;
  	width: 60%;
  	height: 85%;
  	margin: 0;
  	padding: 0;
  	z-index: -1;
  	transform: skewX(-10deg);
  }
  .body{
  	.copy{
  		@include font-size(22);
  		color: $green-color;
  	}
  	.btn-wrap{
  		text-align: center;
  		margin-top: 3em;
  	}
  }
  @include mq( $tb , min )  {
  	.about-contents{
  		display: grid;
  		grid-auto-columns:55% 70%;
  		grid-gap :0 3%;
  		grid-template-areas:"item1 item2" "item3 item2";
  	}
  	.logo{
  		grid-area:item1;
  	}
  	.photo{
  		grid-area:item2;
  	}
  	.body{
  		grid-area:item3;
  		.btn-wrap{
  			margin-top: 8em;
  		}
  	}
  }
  @include mq( $tb , max )  {
  	padding: 1em 0 5em!important;
  	.logo{
  		width: 70%;
  		margin: 0 auto;
  	}
  	.photo{
  		width: 90%;
  		margin: 2em auto 0;
  	}
  	.body{
  		padding: 0 1em;
  		.copy{
  			@include font-size(18);
  			margin-top: 1em;
  		}
  		.description{
  			@include font-size(14);
  		}
  	}
  }
  */ }
  @media screen and (max-width: 859px) {
    section.sec-about {
      padding: 24vw 0 20vw; } }
  section.sec-about .title .en {
    color: #59B49A; }
  section.sec-about .about-contents {
    text-align: center; }
    section.sec-about .about-contents div.title .en {
      color: #59B49A; }
    section.sec-about .about-contents .copy {
      color: #59B49A;
      font-size: 22px;
      font-size: 2.2rem;
      line-height: 1.7; }
      @media screen and (min-width: 480px) and (max-width: 1200px) {
        section.sec-about .about-contents .copy {
          font-size: 2.75px;
          font-size: 1.76rem; } }
    section.sec-about .about-contents .btn-01 {
      text-align: center; }

section.sec-news {
  position: relative;
  background: #333 url("../../img/top/bg_news.png") no-repeat 0 0;
  background-size: cover;
  padding: 6em 0;
  /*
  &:before{
  	content: "";
  	display: block;
  	background: #F4F7F8;
  	position: absolute;
  	top: 0;
  	left: -5%;
  	width: 65%;
  	height: 100%;
  	margin: 0;
  	padding: 0;
  	z-index: -1;
  	transform: skewX(10deg);
  }
  	padding-top: 3em;
  	margin-left: -1em;
  	margin-right: -1em;
  	.slick-track{
  		margin: 0!important;
  	}
  	.slick-prev{
  		width: 62px;
  		height: 62px;
  		background: url("../../img/icon_arrow_b_prev.png") no-repeat center center;
  		background-size: contain;
  		text-indent: -9999px;
  		position: absolute;
  		border: none;
  		top: -8em;
  		right: 80px;
  	}
  	.slick-next{
  		width: 62px;
  		height: 62px;
  		background: url("../../img/icon_arrow_b.png") no-repeat center center;
  		background-size: contain;
  		text-indent: -9999px;
  		position: absolute;
  		border: none;
  		top: -8em;
  		right: 0;
  		@include mq( $tb , max )  {
  			right: 1em;
  		}
  	}
  }
  .
  	*/
  /*
  @include mq( $tb , min )  {
  	.news-container{
  		display: grid;
  		grid-auto-columns:50% 1fr;
  		grid-gap :0 3%;
  		grid-template-areas:"item1 item2" "item3 item3";
  	}
  	.title{
  		grid-area:item1;
  	}
  	.btn-wrap{
  		grid-area:item2;
  		p{
  			text-align: right;
  		}
  	}
  	.news-wrap{
  		grid-area:item3;
  	}
  }
  &.sec-rss{
  	.text{
  		margin-top: 1em;
  		color: $main-color;
  	}
  	@include mq( $tb , min )  {
  		.news-container{
  			grid-auto-columns:20% 1fr;
  		}
  		.text{
  			margin-top: 1.2em;
  		}
  	}
  }
  */ }
  @media screen and (max-width: 859px) {
    section.sec-news {
      padding: 2em !important; } }
  section.sec-news div.title .jp {
    color: #fff; }
  section.sec-news a {
    color: #fff; }
  section.sec-news .news-wrap {
    padding: 55px; }
    @media screen and (max-width: 859px) {
      section.sec-news .news-wrap {
        padding: 0; } }
    section.sec-news .news-wrap .news-item a {
      color: #fff;
      color: #fff;
      text-decoration: none; }
      section.sec-news .news-wrap .news-item a:hover, section.sec-news .news-wrap .news-item a:active, section.sec-news .news-wrap .news-item a:focus {
        color: white;
        text-decoration: none; }
      section.sec-news .news-wrap .news-item a:visited {
        color: white; }
      section.sec-news .news-wrap .news-item a:after {
        background: url("../../img/arrow02.png") no-repeat center center;
        background-size: contain; }
    section.sec-news .news-wrap .news-item .group {
      -js-display: flex;
      display: -webkit-flex;
      display: flex;
      -webkit-align-items: center;
      align-items: center; }
      section.sec-news .news-wrap .news-item .group .date {
        margin-top: 0.5em; }
      section.sec-news .news-wrap .news-item .group .cat {
        margin: 0.5em 0.5em 0 1em;
        padding: 3px 1em;
        border-radius: 1em;
        font-size: 14px;
        font-size: 1.4rem;
        line-height: 1; }
        @media screen and (min-width: 480px) and (max-width: 1200px) {
          section.sec-news .news-wrap .news-item .group .cat {
            font-size: 1.75px;
            font-size: 1.12rem; } }
        section.sec-news .news-wrap .news-item .group .cat .category-label {
          color: #fff !important;
          border: 1px solid #84D0D9; }
    section.sec-news .news-wrap .news-item .description {
      margin-top: 0.5em;
      line-height: 1.5; }
  section.sec-news .btn-wrap {
    text-align: center; }

section.sec-system {
  margin: 10vw 5vw;
  background: #fff;
  border-radius: 30px;
  padding: 5.5vw 55px; }
  @media screen and (max-width: 859px) {
    section.sec-system {
      padding: 2em 1em; } }
  section.sec-system div.title {
    padding-top: 1em;
    text-align: center; }
    section.sec-system div.title .en {
      color: #EF84B4 !important; }
  section.sec-system .system-wrap {
    -js-display: flex;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-top: 3em;
    margin-left: -30px;
    margin-right: -30px; }
    section.sec-system .system-wrap .system-item {
      padding: 30px;
      width: 50%; }
      section.sec-system .system-wrap .system-item a {
        color: #606060; }
      @media screen and (max-width: 859px) {
        section.sec-system .system-wrap .system-item {
          width: 80%;
          margin: 0 auto; } }
      section.sec-system .system-wrap .system-item .thumb {
        border-radius: 20px;
        padding: 23px;
        background: url("../../img/bg_gradation_main.jpg") no-repeat center center;
        background-size: 100% auto; }
        section.sec-system .system-wrap .system-item .thumb p {
          background-size: cover;
          padding-bottom: 64%;
          margin: 0;
          border-radius: 15px; }
      section.sec-system .system-wrap .system-item .body {
        margin-top: 1em;
        text-align: left; }
        section.sec-system .system-wrap .system-item .body .system-title {
          font-size: 25px;
          font-size: 2.5rem;
          margin: 0;
          text-align: center;
          font-weight: bold; }
          @media screen and (min-width: 480px) and (max-width: 1200px) {
            section.sec-system .system-wrap .system-item .body .system-title {
              font-size: 3.125px;
              font-size: 2rem; } }
          @media screen and (max-width: 859px) {
            section.sec-system .system-wrap .system-item .body .system-title {
              font-size: 22px;
              font-size: 2.2rem; } }
  @media screen and (max-width: 859px) and (min-width: 480px) and (max-width: 1200px) {
    section.sec-system .system-wrap .system-item .body .system-title {
      font-size: 2.75px;
      font-size: 1.76rem; } }

        section.sec-system .system-wrap .system-item .body .description {
          font-size: 15px;
          font-size: 1.5rem;
          margin: 0.5em 0 0; }
          @media screen and (min-width: 480px) and (max-width: 1200px) {
            section.sec-system .system-wrap .system-item .body .description {
              font-size: 1.875px;
              font-size: 1.2rem; } }
          @media screen and (max-width: 859px) {
            section.sec-system .system-wrap .system-item .body .description {
              font-size: 14px;
              font-size: 1.4rem; } }
  @media screen and (max-width: 859px) and (min-width: 480px) and (max-width: 1200px) {
    section.sec-system .system-wrap .system-item .body .description {
      font-size: 1.75px;
      font-size: 1.12rem; } }

  section.sec-system .btn-01 {
    margin-top: 80px; }

.sec-other {
  background: url("../../img/top/bg_other_deco.png") no-repeat 0 0;
  background-size: 100% auto; }
  .sec-other .ohter-container .other-item {
    margin: 60px 0;
    			/*
    			.thumb{
    				border-radius: 10px;
    				padding: 7px;
    				background: url("../../img/bg_gradation_main.jpg") no-repeat center center;
    				background-size: 100% auto;
    
    				p{
    					background-size: cover;
    					padding-bottom: 64%;
    					margin: 0;
    				}
    			}
    			.body{
    				width: 80%;
    				margin: 0 auto;
    				dl{
    					margin-top: 1em;
    					dt{
    						@include font-size(17);
    						padding-bottom: 0.5em;
    						margin: 0.5em;
    						border-bottom: 2px solid $main-color;
    						color:$main-color;
    						text-align: center;
    					}
    					dd{
    						@include font-size(15);
    						color: $text-color;
    					}
    				}
    			}
    			*/ }
    @media print, screen and (min-width: 860px) {
      .sec-other .ohter-container .other-item .wrap {
        display: grid;
        grid-auto-columns: 50% 50%;
        grid-template-areas: "item1 item2" "item1 item3";
        grid-template-rows: auto 1fr; }
        .sec-other .ohter-container .other-item .wrap h3 {
          grid-area: item2; }
        .sec-other .ohter-container .other-item .wrap .img {
          grid-area: item1; }
        .sec-other .ohter-container .other-item .wrap .other-text {
          grid-area: item3; }
        .sec-other .ohter-container .other-item .wrap.-reverse {
          grid-template-areas: "item2 item1" "item3 item1"; }
          .sec-other .ohter-container .other-item .wrap.-reverse .img {
            padding: 50px 50px 50px 40px; } }
    .sec-other .ohter-container .other-item .wrap h3 {
      border-bottom: 1px solid #fff;
      color: #fff;
      font-size: 30px;
      font-size: 3rem;
      padding-bottom: 0.5em; }
      @media screen and (min-width: 480px) and (max-width: 1200px) {
        .sec-other .ohter-container .other-item .wrap h3 {
          font-size: 3.75px;
          font-size: 2.4rem; } }
      .sec-other .ohter-container .other-item .wrap h3:before {
        content: "";
        display: inline-block;
        width: 69px;
        height: 70px;
        background: url("../../img/icon_f_white.png") no-repeat 0 0;
        background-size: contain;
        margin: 0 15px -10px 0; }
      @media screen and (max-width: 859px) {
        .sec-other .ohter-container .other-item .wrap h3 {
          font-size: 20px;
          font-size: 2rem; } }
  @media screen and (max-width: 859px) and (min-width: 480px) and (max-width: 1200px) {
    .sec-other .ohter-container .other-item .wrap h3 {
      font-size: 2.5px;
      font-size: 1.6rem; } }
      @media screen and (max-width: 859px) {
          .sec-other .ohter-container .other-item .wrap h3:before {
            width: 50px;
            height: 50px;
            margin: 0 10px -15px 0; } }
    .sec-other .ohter-container .other-item .wrap .img {
      padding: 50px 40px 50px 50px; }
      .sec-other .ohter-container .other-item .wrap .img img {
        border-radius: 20px; }
    .sec-other .ohter-container .other-item .wrap .other-text {
      padding: 1em 80px 1em 40px;
      color: #fff; }
    .sec-other .ohter-container .other-item.other01 {
      background: url("../../img/top/bg_other01.png") no-repeat 0 100%;
      background-size: cover;
      border-radius: 0 30px 30px 0;
      margin-right: 18.5vw; }
      .sec-other .ohter-container .other-item.other01 .btn-01 {
        text-align: right; }
        .sec-other .ohter-container .other-item.other01 .btn-01 a {
          background: #B39BCC; }
    .sec-other .ohter-container .other-item.other02 {
      background: url("../../img/top/bg_other02.png") no-repeat 0 100%;
      background-size: cover;
      border-radius: 30px 0 0 30px;
      margin-left: 18.5vw; }
      .sec-other .ohter-container .other-item.other02 h3 {
        padding-left: 80px; }
      .sec-other .ohter-container .other-item.other02 .btn-01 a {
        background: #F2B95F; }
      .sec-other .ohter-container .other-item.other02 .other-text {
        padding: 1em 40px 1em 80px; }
    .sec-other .ohter-container .other-item.other03 {
      background: url("../../img/top/bg_other03.png") no-repeat 0 100%;
      background-size: cover;
      border-radius: 0 30px 30px 0;
      margin-right: 18.5vw; }
      .sec-other .ohter-container .other-item.other03 .btn-01 {
        text-align: right; }
        .sec-other .ohter-container .other-item.other03 .btn-01 a {
          background: #ABD36B; }
  @media screen and (max-width: 859px) {
    .sec-other .ohter-container .other-item {
      border-radius: 20px !important;
      margin: 5vw !important; }
      .sec-other .ohter-container .other-item .wrap h3 {
        text-align: center;
        padding: 1em; }
        .sec-other .ohter-container .other-item .wrap h3:beore {
          width: 58px;
          height: 58px; }
      .sec-other .ohter-container .other-item .wrap .img {
        text-align: center;
        padding: 20px 15px; }
        .sec-other .ohter-container .other-item .wrap .img img {
          border-radius: 10px;
          width: 80%; }
      .sec-other .ohter-container .other-item .wrap .other-text {
        padding: 2em 20px 55px; }
        .sec-other .ohter-container .other-item .wrap .other-text .description {
          margin-top: 0;
          text-align: center; }
        .sec-other .ohter-container .other-item .wrap .other-text .btn-01 {
          text-align: center; } }