@charset "UTF-8";
/* CSS Document */

/*slickスライダー*/

.full-width-box {
    width: 100vw;
    height: 80vh;  /* 画面いっぱいの高さ */
    background: #FFF; /* 背景色（自由に変更） */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  position:  relative;
}

.slick-slider div{
   
  top: 0;
  width: 100%;
   

  }

.slick-slider{
    position: relative;
  height: 80vh;
  width: 100vw;
}

.slick-slider img {
      position: relative;
  width: 100%;
  height:80vh;
  object-fit: cover; /* 画像を画面いっぱいにフィット */
display: block
}


/*スライダーテキストエリア*/
.top-box{
  position: absolute;
  width: 100vw;
  height: 80vh;
  text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  top: 0;
}
  
.top-box div{


}

.left-text-box{

  
width: 50vw;
  background-color: hsla(0,1%,23%,0.35);
height: 80vh;
}

.left-text-box .set{
  color: #FFFFFF!important;
  padding-left: 5%;
  padding-right: 5%;
  text-align: left;
  max-width: 800px;
  margin-top: 50px;

}


.left-text-box h1 {
  font-family: 'Zen Old Mincho', serif;
  color: #FFFFFF !important;
  font-size: clamp(30px, 6vw, 65px);
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
  
  background-attachment: fixed;
  padding-left: 21px;
  padding-top: 3px;
  padding-right: 21px;
  background-color: hsla(0,0%,15%,0.1)}

.left-text-box h2{
  color: #FFFFFF!important;
  font-size: clamp(18px, 4vw,22px);
  font-weight: 400;
  margin-left: 27px;
}

.left-text-box p{
color: #FFFFFF!important;
  font-size: 20px;
    font-size: clamp(16px, 3vw,22px);
  }
.left-text-box button {
 
  margin-left: 23px;
  }



.left-text-box p a{
color: #FFFFFF!important;
  text-decoration: none;
  
  }
.left-text-box p a:hover{
color: #FFFFFF!important;
  text-decoration:underline;
  
  }

@media (min-width: 545px) and (max-width: 768px) {  
  /* タブレット向けのスタイル */ 
    .left-text-box{
width: 80vw;
  background-color: hsla(0,1%,23%,0.29);
height: 80vh;
}

  
}

@media (max-width: 544px) {  
  /* スマホ向けのスタイル */
  .left-text-box{
width: 80vw;
  background-color: hsla(0,1%,23%,0.29);
height: 80vh;
}
 
  .slick-slider .img1 img {

 }
  .slick-slider .img2 img {
 object-position:  80% 50%; 
}
  .slick-slider .img3 img {
 object-position: 80% 50%; 
}
  .slick-slider .img4 img {
 
   
}
  
  
  
  
}