/*---------- sliderのCSS ----------*/
.slider {
  visibility: hidden;
}
.slider.slick-initialized {
  visibility: visible;
}

.slider img{
  width: 100%;
  height: 700px;
  object-fit: cover;
  object-position: center;
}
.slick-prev, .slick-next {
  z-index: 100;
}

.slick-next {
  right: 10px;
}
.slick-prev {
  left: 10px;
}


@media screen and (max-width:1024px) { 
    
}
@media screen and (max-width:768px) {
  
}
@media screen and (max-width:480px) {
  .slider img{
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center;
  }

}

/*---------- scrollのCSS ----------*/

#top {
  display: flex;
  flex-direction: column;
  justify-content: center;
 align-items: center;
  position: relative;
}

.scroll{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  bottom:30px;
  left:50%;
}

/*Scrollテキストの描写*/
.scroll span{
    /*描画位置*/
  position: absolute;
  left:10px;
  bottom:10px;
    /*テキストの形状*/
  color: white;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  font-family: 'Nunito', sans-serif;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scroll:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
  width:10px;
  height:10px;
  border-radius: 50%;
  background:white;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
  animation:
    circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:45px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
  100%{opacity:0;}
 }

/* 線の描写 */
.scroll:after{
  content:"";
    /*描画位置*/
  position: absolute;
  bottom:0;
  left:0;
    /*線の形状*/
  width:2px;
  height: 50px;
  background:white;
}

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

/*---------- aboutのCSS ----------*/
#about {
  position: relative;

 
}
#about .about-rogo img {
  width: 800px;
  height: 800px;
  position: absolute;
  z-index: -10;
  left: -50px;
 
}
#about .consept {
  text-align: center;
  line-height: 1;
 
}

#about .consept .text {
  text-align: left;
  display: inline-block;
  line-height: 2;
  margin-top: 500px;
  margin-bottom: 200px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.2rem;
  color: var(--black);
  
}

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

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

}
@media screen and (max-width:480px) {
  #about .about-rogo img {
    width:300px;
    height: 300px;
    position: absolute;
    z-index: -10;
    left: -100px;
  }
  #about .consept .text {
    text-align: center;
    display: inline-block;
    line-height: 2;
    margin-top: 250px;
    margin-bottom: 100px;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.2rem;
    color: var(--black);
    
  }
}


/*---------- profileのCSS ----------*/

#profile {
  background-color:#f7f6ed;
  padding: 100px 0;
}

.profile-flex{
  display: flex;
justify-content: center;
  
}
.profile-box {
  margin: 40px;
  width: 390px;
}

#profile .profile-img img {
  width: 250px;
  height: 250px;
  object-fit: cover;
  margin-bottom: 30px;
  border-radius: 10px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}


#profile p {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 100;
  color: var(--black);
 font-size: 14px;
 letter-spacing: 0.18rem;
}



.snsicon-flex{
  display: flex;
  justify-content: left;
}
.snsicon-flex a {
  margin-top: 10px;
  text-decoration: none;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 100;
  color:var(--green);
 font-size: 14px;
 letter-spacing: 0.18rem;
}

.snsicon-flex a:hover{
  color:var(--light_green);
  transition: .4s;
  color: var(--orange);
}

.snsicon p {
  text-align: left;
  margin-bottom: 10px;
  margin-top: 40px;
  padding-left: 10px;
  font-family: 'Nunito', sans-serif;

}


@media screen and (max-width:1024px) { 
    
}
@media screen and (max-width:768px) {
  
}
@media screen and (max-width:480px) {
  .profile-flex{
    display: block;
  justify-content: center;
    
  }
  .profile-box {
  width: 300px;
}
  #profile p {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 100;
    color: var(--black);
   font-size: 11px;
   letter-spacing: 0.15rem;
  }
  #profile .profile-img img {
    width: 300px;
    height: 300px;
    object-fit: cover;
    margin-bottom: 30px;
    border-radius: 10px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

  }
  .snsicon p {
    text-align:left;
    margin-bottom: 10px;
    margin-top: 30px;
    padding-left: 10px;
    font-family: 'Nunito', sans-serif;
    font-size: 10px;
  
  }
  .snsicon img{
  
    width: 35px;
    height: 35px;
    margin: 15px;
  }
  
}
/*---------- productsのCSS ----------*/

#products{
  padding: 300px 0 0 0;
  position: relative;

}
#products p {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.18rem;
  color: var(--black);
  width: 300px;

}
#products .products-rogo img {
  width: 600px;
  height: 600px;
  position: absolute;
  left: 800px;
  top: -130px;

}
#products .item-box img {
  width: 450px;
  height: 450px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
#products .item-box {
  margin: 30px;
}
#products .item-box h2 {
margin: 80px 0;
color: var(--green);
font-family: 'Nunito', sans-serif;
font-size: 26px;
position: relative;
letter-spacing: 0.3rem;
}
#products .item-box h2::after{
  content:"";
  display:block;
  width:300px;
  height:2px;
  background-color:var(--green);
  position:absolute;
  top: 50px;
  bottom:0;
  left:0;
  border-radius: 1px;
}
#products .item {
  display: flex;
  justify-content: center;
  margin: 100px;
}

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

}
@media screen and (max-width:768px) {
  #products{
    padding: 250px 0 0 0;
    position: relative;
  
  }
  #products .products-rogo img {
    width: 350px;
    height: 350px;
    position: absolute;
    left: 400px;
    top: -50px;
  
  }

  #products .item-box img {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  }
  #products .item-box h2::after{
    content:"";
    display:block;
    width:200px;
    height:2px;
    background-color:var(--green);
    position:absolute;
    top: 50px;
    bottom:0;
    left:0;
    border-radius: 1px;
  }
  #products .item-box h2 {
    margin: 30px 0 50px 0;
    color: var(--green);
    font-family: 'Nunito', sans-serif;
    font-size: 20px;
    position: relative;
    letter-spacing: 0.3rem;
    }
  #products p {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.18rem;
    color: var(--black);
  
  }
}
@media screen and (max-width:480px) {
  #products{
    padding: 250px 0 0 0;
    position: relative;
  
  }
  #products .products-rogo img {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 80px;
    top: -50px;
  
  }
  #products .item {
    display: block;
    justify-content: center;
    margin: 10px;
    
  }
  #products .item-box img {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  }
  #products .item-box h2::after{
    content:"";
    display:block;
    width:200px;
    height:2px;
    background-color:var(--green);
    position:absolute;
    top: 50px;
    bottom:0;
    left:0;
    border-radius: 1px;
  }
  #products .item-box h2 {
    margin: 30px 0 50px 0;
    color: var(--green);
    font-family: 'Nunito', sans-serif;
    font-size: 20px;
    position: relative;
    letter-spacing: 0.3rem;
    }
  #products p {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.18rem;
    color: var(--black);
  
  }
}
/*---------- buttonのCSS ----------*/

.button {
  margin-top: 70px;
}
.button a {
  text-decoration: none;
  color: white;
  background-color: var(--green);
  padding: 10px 15px;
  border-radius: 50px;
  font-size: 12px;
  letter-spacing: 0.05rem;
}
.button a:hover {
  background-color: var(--light_green);
  color: var(--orange);
  transition: .4s;
}

@media screen and (max-width:1024px) { 
    
}
@media screen and (max-width:768px) {
   
}
@media screen and (max-width:480px) {
  .button {
    margin: 30px 0 80px 0;
  }
  .button a {
    text-decoration: none;
    color: white;
    background-color: var(--green);
    padding: 8px 13px;
    border-radius: 50px;
    font-size: 10px;
    letter-spacing: 0.05rem;
  }
}
/*--------------------
    draft-page
--------------------*/
#draft-page h1 {
  margin: 100px;
  padding-left: 40px;
  color: var(--green);
  font-family: 'Nunito', sans-serif;
  font-size: 30px;
 

}
#draft-page h1::after{
  content:"";
  display:block;
  width:300px;
  height:2px;
  background-color:var(--green);
  position:absolute;
  top:170px;
  bottom:0;
  left:120px;
  border-radius: 1px;
} 
#draft-page .container {
  display: grid;
  gap: 3rem;
  grid-template-columns: repeat(4,18vw);
  grid-template-rows: repeat(2,18vw);
justify-content: center;
margin-bottom: 100px;


}
#draft-page .container .item img{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: .3s;
  border-radius: 5px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

#draft-page .container .item {
  position: relative;

}

#draft-page .text-box {
  margin-left: 120px;
}
#draft-page .text-box p {
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.05rem;
  line-height: 2;
  font-family: 'M PLUS Rounded 1c', sans-serif;
}
.text-box .text1,.text2{
  margin-bottom: 40px;
}
.text-box  .text3 {
  margin-bottom: 60px;
}

@media screen and (max-width:1024px) { 
    
}
@media screen and (max-width:768px) {
  #draft-page h1 {
    margin: 100px;
    margin-left: -10px;
    padding-left: 40px;
    color: var(--green);
    font-family: 'Nunito', sans-serif;
    font-size: 24px;
    
  }
  #draft-page .text-box {
    margin:40px
  }
  #draft-page h1::after{
    content:"";
    display:block;
    width:200px;
    height:2px;
    background-color:var(--green);
    position:absolute;
    top:150px;
    bottom:30px;
    left:30px;
    border-radius: 1px;
  } 
}
@media screen and (max-width:480px) {

#draft-page .container {
    gap: 2rem;
    grid-template-columns: repeat(2,40vw);
    grid-template-rows: repeat(4,40vw);
    margin-bottom: 70px;
}
#draft-page h1 {
  margin: 100px;
  margin-left: -10px;
  padding-left: 40px;
  color: var(--green);
  font-family: 'Nunito', sans-serif;
  font-size: 20px;
}
#draft-page h1::after{
  content:"";
  display:block;
  width:200px;
  height:2px;
  background-color:var(--green);
  position:absolute;
  top:150px;
  bottom:30px;
  left:20px;
  border-radius: 1px;
} 
#draft-page .text-box {
  margin:20px
}
#draft-page .text-box  p {
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.05rem;
  line-height: 2;
  font-family: 'M PLUS Rounded 1c', sans-serif;
}
}
/*--------------------
    enstool-page
--------------------*/
#stool-page h1 {
  margin: 100px;
  padding-left: 40px;
  color: var(--green);
  font-family: 'Nunito', sans-serif;
  font-size: 30px;
 

}
#stool-page h1::after{
  content:"";
  display:block;
  width:300px;
  height:2px;
  background-color:var(--green);
  position:absolute;
  top:170px;
  bottom:0;
  left:120px;
  border-radius: 1px;
} 
#stool-page .container {
  display: grid;
  gap: 3rem;
  grid-template-columns: repeat(4,18vw);
  grid-template-rows: repeat(2,18vw);
justify-content: center;
margin-bottom: 100px;


}
#stool-page .container .item img{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: .3s;
  border-radius: 5px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

#stool-page .container .item {
  position: relative;

}
#stool-page .text-box .text1,.text2,.text3 {
  margin-bottom: 40px;
}
#stool-page .text-box .text4 {
  margin-bottom: 60px;
}
#stool-page .text-box {
  margin-left: 120px;
}

#stool-page .text-box  p {
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.05rem;
  line-height: 2;
  font-family: 'M PLUS Rounded 1c', sans-serif;
}

@media screen and (max-width:1024px) { 
    
}
@media screen and (max-width:768px) {
  #stool-page h1 {
    margin: 100px;
    margin-left: -10px;
    padding-left: 40px;
    color: var(--green);
    font-family: 'Nunito', sans-serif;
    font-size: 24px;
    
  }
  #stool-page .text-box {
    margin:40px
  }
  #stool-page h1::after{
    content:"";
    display:block;
    width:200px;
    height:2px;
    background-color:var(--green);
    position:absolute;
    top:150px;
    bottom:30px;
    left:30px;
    border-radius: 1px;
  } 
}
@media screen and (max-width:480px) {
#stool-page .container {
    gap: 2rem;
    grid-template-columns: repeat(2,40vw);
    grid-template-rows: repeat(4,40vw);
    margin-bottom: 70px;
}
#stool-page h1 {
  margin: 100px;
  margin-left: -10px;
  padding-left: 40px;
  color: var(--green);
  font-family: 'Nunito', sans-serif;
  font-size: 20px;
 

}
#stool-page h1::after{
  content:"";
  display:block;
  width:200px;
  height:2px;
  background-color:var(--green);
  position:absolute;
  top:150px;
  bottom:30px;
  left:20px;
  border-radius: 1px;
} 
#stool-page .text-box {
  margin:20px
}
#stool-page .text-box  p {
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.05rem;
  line-height: 2;
  font-family: 'M PLUS Rounded 1c', sans-serif;
}
}
/*--------------------
    enfream-page
--------------------*/
#fream-page h1 {
  margin: 100px;
  padding-left: 40px;
  color: var(--green);
  font-family: 'Nunito', sans-serif;
  font-size: 30px;
 

}
#fream-page h1::after{
  content:"";
  display:block;
  width:300px;
  height:2px;
  background-color:var(--green);
  position:absolute;
  top:170px;
  bottom:0;
  left:120px;
  border-radius: 1px;
} 
#fream-page .container {
  display: grid;
  gap: 3rem;
  grid-template-columns: repeat(3,25vw);
  grid-template-rows: repeat(2,25vw);
justify-content: center;
margin-bottom: 100px;


}
#fream-page .container .item img{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: .3s;
  border-radius: 5px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

#fream-page .container .item {
  position: relative;

}
#fream-page .text-box {
  margin-left: 120px;
}


#fream-page .text-box  p {
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.05rem;
  line-height: 2;
  font-family: 'M PLUS Rounded 1c', sans-serif;
}
#fream-page.text-box .text1,.text2,.text3 {
  margin-bottom: 40px;
}
#fream-page .text-box .text4 {
  margin-bottom: 60px;
}
@media screen and (max-width:1024px) { 
    
}
@media screen and (max-width:768px) {
  #fream-page h1 {
    margin: 100px;
    margin-left: -10px;
    padding-left: 40px;
    color: var(--green);
    font-family: 'Nunito', sans-serif;
    font-size: 24px;
    
  }
  #fream-page .text-box {
    margin:40px
  }
  #fream-page h1::after{
    content:"";
    display:block;
    width:200px;
    height:2px;
    background-color:var(--green);
    position:absolute;
    top:150px;
    bottom:30px;
    left:30px;
    border-radius: 1px;
  } 
  
}
@media screen and (max-width:480px) {
  #fream-page .container {
    gap: 2rem;
    grid-template-columns: repeat(2,40vw);
    grid-template-rows: repeat(3,40vw);
    margin-bottom: 70px;
}
#fream-page h1 {
  margin: 100px;
  margin-left: -10px;
  padding-left: 40px;
  color: var(--green);
  font-family: 'Nunito', sans-serif;
  font-size: 20px;
 

}
#fream-page h1::after{
  content:"";
  display:block;
  width:200px;
  height:2px;
  background-color:var(--green);
  position:absolute;
  top:150px;
  bottom:30px;
  left:20px;
  border-radius: 1px;
} 
#fream-page .text-box {
  margin:20px
}
#fream-page .text-box  p {
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.05rem;
  line-height: 2;
  font-family: 'M PLUS Rounded 1c', sans-serif;
}
}

/*--------------------
LOAD ROAD PAGE (25-9月追記)
--------------------*/

#product-page h1 {
  margin: 100px;
  padding-left: 40px;
  color: var(--green);
  font-family: 'Nunito', sans-serif;
  font-size: 30px;
 

}
#product-page h1::after{
  content:"";
  display:block;
  width:300px;
  height:2px;
  background-color:var(--green);
  position:absolute;
  top:170px;
  bottom:0;
  left:120px;
  border-radius: 1px;
} 
#product-page .container {
  display: grid;
  gap: 3rem;
  grid-template-columns: repeat(auto-fit, 18vw); /* 横幅18vwで自動改行 */
  grid-auto-rows: 18vw;                         /* 高さも18vwに固定 */
  justify-content: center;
  margin-bottom: 100px;
}

#product-page .container .item img{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: .3s;
  border-radius: 5px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

#product-page .container .item {
  position: relative;

}

#product-page .text-box {
  margin: 0 auto;
  width: 85%;
}
#product-page .text-box p {
   text-align: justify;      /* 両端揃え */
  text-justify: inter-ideograph; /* 日本語用に均等割り付け */
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.05rem;
  line-height: 2;
  font-family: 'M PLUS Rounded 1c', sans-serif;
}
.text-box .text1,.text2{
  margin-bottom: 40px;
}
.text-box  .text3 {
  margin-bottom: 60px;
}

@media screen and (max-width:1024px) { 
    
}
@media screen and (max-width:768px) {
  #product-page h1 {
    margin: 100px;
    margin-left: -10px;
    padding-left: 40px;
    color: var(--green);
    font-family: 'Nunito', sans-serif;
    font-size: 24px;
    
  }
  #product-page .text-box {
    margin:40px;
    width:90%;
  }
  #product-page h1::after{
    content:"";
    display:block;
    width:200px;
    height:2px;
    background-color:var(--green);
    position:absolute;
    top:150px;
    bottom:30px;
    left:30px;
    border-radius: 1px;
  } 
}
@media screen and (max-width:480px) {

  #product-page .container {
    grid-template-columns: repeat(2, 40vw); /* 1行に2枚 */
    grid-auto-rows: 40vw;                  /* 高さも正方形に */
  }


#product-page h1 {
  margin: 100px;
  margin-left: -10px;
  padding-left: 40px;
  color: var(--green);
  font-family: 'Nunito', sans-serif;
  font-size: 20px;
}
#product-page h1::after{
  content:"";
  display:block;
  width:200px;
  height:2px;
  background-color:var(--green);
  position:absolute;
  top:150px;
  bottom:30px;
  left:20px;
  border-radius: 1px;
} 
#product-page .text-box {
  margin:20px;
  width: 90%;
}
#product-page .text-box  p {
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.05rem;
  line-height: 2;
  font-family: 'M PLUS Rounded 1c', sans-serif;
}
}