@charset "utf-8";
#gallery{
	background: #ebebeb;
	margin: 5rem 0;
	padding: 70px 0;
    }

#gallery h3{
	font-family: "ads-tree", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 5rem;
	text-align: center;
    margin-bottom:50px;
}

#gallery p{
		text-align: center;
        font-size: 1.5rem;
        margin-bottom:30px;
    }


#gallery .slider-wrapper {
      position: relative;
      width: 1000px;
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1;
	margin: 0 auto;
    }

    /* 背景：フェード切り替え */
    #gallery .bg-slider {
      position: fixed;
      top: 0;
      left: 0;
      width:auto;
      height:;
      z-index: -1;
      background-size: cover;
      background-position: center;
      transition: background-image 0.8s ease-in-out;
      filter: blur(40px) brightness(0.4);
      transform: scale(1.1);
    }

    /* スライダー外枠（左右を少し見せるために overflow: visible に近い制御） */
    #gallery .slider-container {
      position: relative;
      width: 100%;
      max-width: 100%;
      height: 40vh; /* 高さを指定 */
      overflow: hidden; /* はみ出しを隠す（これがないと全画像見えてしまう） */
    }

    /* スライドが並ぶトラック */
    #gallery .slides-track {
      display: flex;
      height: 100%;
      transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
      align-items: center;
      /* 最初のスライドを中央に置くための計算： (100% - スライド幅70%) / 2 = 15% */
      padding-left: 30%; 
    }

    /* 各スライド */
   #gallery .slide {
      min-width: 50%; /* 中央の画像の幅 */
      height:80%; /* 前後の画像は少し小さく */
      margin: 0 10px;
      transition: all 0.6s ease;
      opacity: 0.4; /* 前後の画像は薄く */
      filter: grayscale(0.5);
      border-radius: 15px;
      overflow: hidden;
	   background: #ffffff;
    }
   #gallery .slide p{
	   margin-top: 10px;
    }

    /* 中央に来ているスライド */
   #gallery .slide.active {
      height: 100%; /* 中央だけ大きく */
      opacity: 1;
      filter: grayscale(0);
      box-shadow: unset;
    }

    #gallery .slide img {
      width: 100%;
      height: 87%;
      object-fit: cover;
    }

    /* ナビゲーションボタン */
    #gallery button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: white;
      width: 60px;
      height: 60px;
      cursor: pointer;
      border-radius: 50%;
      z-index: 20;
      font-size: 24px;
      transition: 0.3s;
    }

   #gallery button:hover { background: rgba(255, 255, 255, 0.4); }
    #gallery .prev { left: 5%; }
    #gallery .next { right: 5%; }

    /* スマホ対応：スライド幅を広げる */
    @media (max-width: 768px) {
      #gallery .slide { min-width: 85%; }
      #gallery .slides-track { padding-left: 7.5%; }
      #gallery .prev { left: 2%; }
      #gallery .next { right: 2%; }
      #gallery button { width: 45px; height: 45px; }
		
		#gallery .slider-wrapper {
      position: relative;
      width: 100%;
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1;
	margin: 0 auto;
    }


#gallery {
    background: #ebebeb;
    margin: 5rem 0;
    padding: 7% 0;
}
#gallery h3 {
    font-family: "ads-tree", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3rem;
    text-align: center;
    margin-bottom: 10px;
}
		
#gallery .slide img {
      height:80%;
    }

}




/* CSS Document */