/*----------------------
メイン画像
-----------------------*/

.fv {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 10;
  pointer-events: none; 
}

.fv-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('../images/top/fv.webp'); 
  background-size: cover;
  background-position: center;
  transition: opacity 0.5s ease-out;
  z-index: 999;
}

@media screen and (max-width: 810px){
  .fv-bg {
  background-image: url('../images/top/fv_sp.webp'); 
}
}

/*----------------------
スクロールダウン
-----------------------*/
.fv .scroll-down{
  position:absolute;
  bottom: 0px;
  left: 50%;
}

.fv .scroll-down a{
  position: absolute;
  left: 10px;
  bottom: 10px;
  color: #FFF;
  font-size: 12px;
  font-family: 'FB Vonness Light', sans-serif;
  letter-spacing: .2em;
  writing-mode: vertical-rl;
  text-decoration: none;
  text-transform: uppercase;
}

.fv .scroll-down:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background:#FFF;
  animation:
    circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;
}

@keyframes circlemove{
  0%{bottom:100px;}
  100%{bottom:0px;}
}

@keyframes cirlemovehide{
  0%{opacity:0}
  50%{opacity:1;}
  80%{opacity:0.9;}
  100%{opacity:0;}
}

.fv .scroll-down:after{
  content:"";
  position: absolute;
  bottom:0;
  left:0;
  width:1px;
  height: 100px;
  background:#FFF;
}

/*----------------------
コンテンツ
-----------------------*/

.content {
  z-index: 0;
  position: relative;
}

/*----------------------
コンセプト
-----------------------*/

.content #container .cnt .concept {
  background: url(../images/top/bg_concept.webp) no-repeat center bottom;
  background-size: 100% auto;
  color: #FFF;
  padding: 400px 0 100px;
}
.content #container .cnt .concept h3 {
  font-size: clamp(30px, 3.264vw, 50px);
  line-height: 1.4;
  margin: 2.083vw 0 30px;
}
.content #container .cnt .concept .concept-inn {padding: 0 20px;}
.content #container .cnt .concept .concept-inn p {
  font-size: clamp(15px, calc(18 / 540 * 100cqw), 20px);
  margin-top: 20px;
}
.content #container .cnt .concept .concept-inn p img {
  margin: 50px auto 0;
}
.content #container .cnt .concept .btn {margin-top: 40px;}

@media screen and (max-width: 810px){
  .content #container .cnt .concept {
  padding: 400px 0 60px;
}
}

/*----------------------
プロダクト
-----------------------*/

.content #container .cnt .products h2 {
  position: relative;
  top: -2.78vw;
}
.content #container .cnt .products h3 {
  position: relative;
  font-size: clamp(30px, 3.264vw, 50px);
  line-height: 1.4;
  top: -2.083vw;
}
.content #container .cnt .products > figure {margin-top: 30px;}
.content #container .cnt .products .products-inn {
  text-align: center;
  margin-top: -1.39vw;
}
.content #container .cnt .products .products-inn h4 img {
  margin: 0 auto;
  width: clamp(240px, 19.44vw, 320px);
}
.content #container .cnt .products .products-inn h5 {
  font-size: clamp(24px, 2.5vw, 40px);
  margin-top: clamp(15px, 2.083vw, 35px);
}
.content #container .cnt .products .products-inn p {
  font-size: clamp(18px, 1.53vw, 26px);
  margin-top: clamp(15px, 1.736vw, 30px);
}
.content #container .cnt .products .products-inn figure img {
  width: clamp(200px, 22.22vw, 360px);
  height: auto;
  margin-top: clamp(50px, 3.47vw, 60px);
  margin-bottom: clamp(25px, 2.1vw, 35px);
  margin-left: auto;
  margin-right: auto;
}
.content #container .cnt .products .fland {margin-top: -20px;}

/*----------------------
サステナビリティ
-----------------------*/

.content #container .cnt .sustaina {
  aspect-ratio: 18 / 35;
  background: url(../images/top/bg_sustainable.webp) no-repeat center top;
  background-size: contain;
  position: relative;
  color: #FFF;
  overflow-x: hidden;
}
.content #container .cnt .sustaina h2 {
  padding-top: clamp(20px, 3.472vw, 50px);;
}
.content #container .cnt .sustaina h3 {
  font-size: clamp(26px, calc(38 / 540 * 100cqw), 40px);
  margin-top: clamp(15px, 4.16666667vw, 65px);
}
.content #container .cnt .sustaina h3 img {
  width: clamp(240px, calc(300 / 540 * 100cqw), 320px);
  height: auto;
  margin: 0 auto 15px;
}
.content #container .cnt .sustaina p:first-of-type {
  font-size: clamp(15px, calc(19 / 540 * 100cqw), 22px);
  margin-top: clamp(30px, 2.77777778vw, 50px);
}
.content #container .cnt .sustaina ul {
  margin-top: 6.25vw;
  padding: 0 clamp(35px, 2.77777778vw, 50px) 2.77777778vw;
}
@media screen and (max-width: 810px){
	.content #container .cnt .sustaina .sustaina-inn {padding: 20px 0 40px;}
	.content #container .cnt .sustaina ul li img {
    width: clamp(280px, 43.20vw, 320px);
    height: auto;
    margin: 15px auto 0;
  }
  .content #container .cnt .sustaina .btn {margin-top: 30px;}
}
@media screen and (max-width: 576px){
	.content #container .cnt .sustaina {
  		aspect-ratio: auto;
  		background: url(../images/top/bg_sustainable.webp) no-repeat center top;
  		background-size: auto 100%;
	}
}