@charset "utf-8";
@import url(cmn.css);
@import url(base.css);

.nav-top a {
	background-color: #5aaf94;
}

/* ==========================================================================
	MAIN
	========================================================================== */
	
#container {
	overflow: hidden;
}
.wrap{
	margin: 0 calc(50% - 50vw);
	max-width: 100vw;
	position: relative;
	overflow: hidden;
  margin-bottom: 5%;
}
@keyframes zoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
  animation: zoom 10s linear 0s 1 normal both;  
}
.slide-img{
  background-color: #000;
}
.slide-img img{
	object-fit: cover;
	height: 100vh;
  width: 100vw;
  opacity: 0.5;
}

.slide-text{
	position: absolute;
  z-index: 10;
	top: 50%;
	left: 10%;
  text-align: left;
}
.slide-text__tit {
  color: #fff;
  font-family: var(--font02)!important;
  font-size: clamp(3rem,7.5vw,6.3rem);
  font-weight: 800;
}
.slide-text__tit span {
  display: block;
}
.slide-text__02 {
  color: transparent;
  font-size: clamp(4.5rem,10.375vw,9.3rem);;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #fff;
}
.slide-text__03 {
  font-size: clamp(5rem,11.25vw,10.2rem);;
}
.slide-text__since {
  color: var(--color02);
  font-family: var(--font02);
  font-size: clamp(1.8rem,2.75vw,2.4rem);;
  font-weight: 800;
}
.scroll {
  position: absolute;
  bottom: 10%;
  right: 10%;
  color: #fff;
  font-family: var(--font02);
  font-size: 1.2rem;
  font-weight: 800;
  writing-mode: vertical-rl;
  z-index: 100;
  padding-bottom: 90px;
}
.scroll::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  content: "";
  width: 1px;
  height: 80px;
  background-color: #fff;
}
.scroll::after {
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  content: "";
  width: 1px;
  height: 40px;
  background-color: var(--color02);
}

/* ==========================================================================
	CONTENTS
	========================================================================== */

.about {
  position: relative;
}
.about__tit01 {
  color: var(--color01);
  font-family: var(--font02);
  font-size: clamp(3.5rem,10vw,11rem);
  font-weight: 800;
  margin-bottom: 60px;
}
.about__tit02 {
  font-family: var(--font01);
  font-size: clamp(2.5rem,5vw,4.5rem);
  font-weight: 700;
}
.about__txt {
  width: 60%;
}
.about__txt .tit-en {
  float: left;
}
.about__inner {
  float: right;
  width: 90%;
  padding-top: 40px;
}
.about__img {
  position: absolute;
  right: 50%;
  bottom: 10%;
  width: 700px;
  margin-right: -930px;
} 

.about-link {
  position: relative;
}
.about-link__txt {
  float: right;
  width: 60%;
	padding: 40px 0;
}
.about-link__img {
  position: absolute;
  left: 50%;
  top: 50px;
  width: 700px;
  margin-left: -930px;
}

.about-link__item {
	position: relative;
	border-bottom: solid 2px #e4e4e4;
	-webkit-transition: 0.4s ease-in-out;  
		 -moz-transition: 0.4s ease-in-out;  
			 -o-transition: 0.4s ease-in-out;  
					transition: 0.4s ease-in-out;  
}
.about-link__item a {
	position: relative;
	display: flex;
	align-items: center;
	padding: 50px 0;
	-webkit-transition: 0.4s ease-in-out;  
		 -moz-transition: 0.4s ease-in-out;  
			 -o-transition: 0.4s ease-in-out;  
					transition: 0.4s ease-in-out;  
}
.about-link__item::after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 2px var(--color02);
  bottom: -2px;
  width: 10%;
}
.about-link__item:hover::after {
  border-bottom: solid 2px var(--color03);
}
.about-link__item a span:first-child {
	width: 50%;
	color: var(--color01);
	font-family: var(--font01);
	font-size: 2.3rem;
	font-weight: 700;
}
.about-link__item a:hover span:first-child {
	color: var(--color03);
}
.about-link__item a span:last-child {
	width: 50%;
	color: #1a1a1a;
	font-family: var(--font02);
	font-size: 1.3rem;
	font-weight: 800;
}
.about-link__item a:hover span:last-child {
	color: var(--color03);
}
/* アイコンのスタイル */
.about-link__item a::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 45px;
  height: 45px;
  margin: auto;
  border-radius: 45px;
	background-color: #e5e5e5;
	-webkit-transition: 0.4s ease-in-out;  
		 -moz-transition: 0.4s ease-in-out;  
			 -o-transition: 0.4s ease-in-out;  
					transition: 0.4s ease-in-out;  
}
.about-link__item a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 21px;
  width: 7px;
  height: 7px;
  margin: auto;
  border-top: 2px solid var(--color01);
  border-right: 2px solid var(--color01);
  transform: rotate(45deg);
  box-sizing: border-box;
	-webkit-transition: 0.4s ease-in-out;  
		 -moz-transition: 0.4s ease-in-out;  
			 -o-transition: 0.4s ease-in-out;  
					transition: 0.4s ease-in-out;  
}
.about-link__item a:hover::before {
	background-color: var(--color03);
}
.about-link__item a:hover::after {
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}


.products {
	position: relative;
	background-image: url("../images/index-images/txt-products.png");
	background-repeat: no-repeat;
	background-position: calc(50% - 200px) 60px;
	background-color: #e8e8e8;
	padding: 80px 0;
}
.products__inner {
	width: 95%;
	margin: 0 auto;
}
.products__tit {
	float: right;
	color: var(--color01);
	font-size: 2.5rem;
}
.car {
	display: block;
	width: 60%;
	margin: 300px auto 50px auto;
}
.products-list {
	width: 105%;
}
.products-list__item {
	position: relative;
	float: left;
	width: 45%;
	font-family: var(--font01);
	font-size: 1.8rem;
	font-weight: 700;
	margin: 0 5% 80px 0;
}
.products-list__item a {
	display: block;
  padding: 20px;
}
.products-list__item a:hover {
  background-color: rgba(255,255,255,0.5);
}
.products-list__tit {
	position: absolute;
	top: 20px;
	left: 20px;
	height: 100%;
}
.products-list02 {
	padding-left: 30px;
}
.products-list__item img {
	display: block;
	width: 60%;
	margin: 0 auto 20px auto;
}

.group__tit {
	font-size: clamp(1.8rem,2.375vw,2rem);
	text-align: center;
}

.news__inner {
	background-color: #fff;
	padding-top: 50px;
}
	@keyframes infinity-scroll-left {
	from {
	  transform: translateX(0);
	}
	  to {
	  transform: translateX(-100%);
	}
	}
	.scroll-infinity__wrap {
	  display: flex;
	  overflow: hidden;
	}
	.scroll-infinity__list {
	  display: flex;
	  list-style: none;
	  padding: 0
	}
	.scroll-infinity__list--left {
	  animation: infinity-scroll-left 80s infinite linear 0.5s both;
	}
	.scroll-infinity__item {
	  width: calc(100vw / 3);
	}
	.scroll-infinity__item>img {
	  width: 100%;
	}
	
		@keyframes infinity-scroll-right {
	from {
	  transform: translateX(-100%);
	}
	  to {
	  transform: translateX(0%);
	}
	}
	.scroll-infinity__list--right{
	  animation :infinity-scroll-right 80s infinite linear 0.5s both;
	}
	.scroll-infinity {
		margin-bottom: 80px;
	}
	.news-box .tit-cmn01 {
    float: left;
		width: 30%;
	}
	.news-box__inner {
    float: right;
    width: 65%;
	}
	
.pickup {
	background-image: url("../images/index-images/txt-pickup.png");
	background-repeat: no-repeat;
	background-position: calc(50% - 280px) 60px;
	background-color: var(--color01);
	padding: 80px 0;
}
.pickup__tit {
	color: #fff;
	font-size: clamp(1.8rem,2.375vw,2.5rem);
	text-align: right;
}
.pickup-list {
	margin-top: 150px;
}
.pickup-list__item a {
	position: relative;
	display: block;
	color: #fff;
	font-family: var(--font01);
	font-size: clamp(1.8rem,2.375vw,2rem);
	font-weight: 700;
	padding: 20px 5px;
}
.pickup-list__item:hover a {
	color: var(--color03);
}
.pickup-list__item a span {
	display: block;
	font-size: 1.4rem;
	margin-top: 10px;
}

/* アイコンのスタイル */
.pickup-list__item a::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 30px;
  margin: auto;
  border-radius: 30px;
	background-color: #fff;
}
.pickup-list__item a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 14px;
  width: 5px;
  height: 5px;
  margin: auto;
  border-top: 1px solid var(--color01);
  border-right: 1px solid var(--color01);
  transform: rotate(45deg);
  box-sizing: border-box;
}
.pickup-list__item:hover a::before {
	background-color: var(--color03);
}
.pickup-list__item:hover a::after {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

/*ZOOM*/
.zoomin1{
	overflow: hidden;
}
.zoomin1 img{
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.pickup-list__item:hover .zoomin1 img{
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

/* ==========================================================================
	PC 1025px -
	========================================================================== */

@media screen and (min-width: 1025px){

.news {
  background: url("../images/index-images/bg01.jpg") 50% 0 no-repeat;
	background-attachment: fixed;
  background-size: cover;
  background-position: center;
	padding-top: 450px;
}

}
@media screen and (max-width: 1200px){/*1200以下*/

}


/* ==========================================================================
	TABLET - 1024px
	========================================================================== */

@media screen and (max-width:1024px){

.scroll {
  bottom: 5%;
  right: 5%;
  font-size: 1rem;
}

.about__txt {
  overflow: hidden;
  width: 100%;
  margin-bottom: 40px;
}
.about__txt .tit-en {
  float: left;
}
.about__inner {
  padding-top: 40px;
}
.about__img {
  position: relative;
  right: 0;
  bottom: 0;
  width: 100%;
  margin: 0 auto;
} 

.about-link__txt {
  float: none;
  width: 100%;
	padding: 0;
  margin-bottom: 40px;
}
.about-link__img {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  margin: 0;
}

.about-link__item a {
	padding: 40px 0;
}

.products {
  background-size: 90%;
	padding: 60px 0;
}
.car {
	margin: 200px auto 30px auto;
}
.products-list {
	width: 105%;
}
.products-list__item a {
  padding: 15px;
}
.products-list__tit {
	top: 15px;
	left: 15px;
}

	.news-box .tit-cmn01 {
    float: none;
		width: 100%;
	}
	.news-box__inner {
    float: none;
		width: 100%;
	}
	
.pickup {
	background-image: url("../images/index-images/txt-pickup.png");
  background-size: 75%;
	background-position: calc(50% - 280px) 60px;
	padding: 60px 0;
}
.pickup-list {
	margin-top: 120px;
}
.pickup-list__item a span {
	font-size: 1.2rem;
  padding-right: 30px;
}

}

/* ==========================================================================
	SP - 640px
	========================================================================== */

@media screen and (max-width: 640px) {

.slide-text{
	left: 5%;
}
.scroll {
  padding-bottom: 60px;
}
.scroll::before {
  height: 50px;
}
.scroll::after {
  height: 25px;
}

.about__tit01 {
  font-size: 9.5vw!important;
  margin-bottom: 40px;
}
.about__inner {
  padding: 20px 0 0 10px;
}

.about-link__item a {
	padding: 30px 0;
}
.about-link__item a span:first-child {
	font-size: 1.7rem;
}
.about-link__item a span:last-child {
	font-size: 1rem;
}
/* アイコンのスタイル */
.about-link__item a::before {
  width: 30px;
  height: 30px;
  border-radius: 30px;
}
.about-link__item a::after {
  right: 14px;
  width: 4px;
  height: 4px;
  border-top: 1px solid var(--color01);
  border-right: 1px solid var(--color01);
}

.products {
	background-position: -50px 60px;
	padding: 40px 0;
}
.products__inner {
	width: 95%;
	margin: 0 auto;
}
.products__tit {
	font-size: 1.8rem;
}
.car {
	width: 250px;
	margin: 130px auto 10px auto;
}
.products-list {
	width: 100%;
}
.products-list__item {
	position: relative;
	float: none;
	width: 100%;
	font-size: 1.6rem;
	margin: 0 0 40px 0;
}
.products-list02 {
	padding-left: 20px;
}

.news__inner {
	padding-top: 40px;
}
	.scroll-infinity__item {
	  width: calc(100vw / 2);
	}
.pickup {
	background-position: -50px 60px;
	padding: 40px 0;
}
.pickup__tit {
	font-size: 1.8rem;
}
.pickup-list {
	margin-top: 100px;
}
.pickup-list__item a {
	padding: 15px 5px;
}
.pickup-list__item a span {
	font-size: 1.2rem;
}

/* アイコンのスタイル */
.pickup-list__item a::before {
  width: 20px;
  height: 20px;
  border-radius: 20px;
}
.pickup-list__item a::after {
  right: 9px;
  width: 4px;
  height: 4px;
  border-top: 1px solid var(--color01);
  border-right: 1px solid var(--color01);
}

}