/* GLOBAL STYLES- */


body {
  padding-top: 3rem;
  padding-bottom: 1rem;
  color: rgb(var(--bs-tertiary-color-rgb));
}

.p-tittle{
  text-align:center;
  font-size: 30px;
  background: linear-gradient(transparent 97%, #c4cacf 70%);
  
}
footer {
  background-color: black;
  color:white;

}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 1rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
}


/* MARKETING CONTENT
-------------------------------------------------- */
#myCarousel {
  position: relative;
  width: 100%; /* 必要に応じて固定幅を設定 */
  height: 200px; /* 要件に応じた高さを設定 */
  overflow: hidden;
}
.carousel-inner {
  background-image: url(../images/shop.jpg);
  background-repeat: no-repeat;
  background-size: cover; /* 画像をコンテナ全体にストレッチ */

  background-position-x: center;

  display: flex;
  
  align-items: center;
  height: 100%;
}
.carousel-item {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.carousel-indicators {
  position: absolute;
  bottom: 20px; /* ボタンの位置を調整 */
 
  z-index: 15;
}





/* rtl:end:remove */
body {
  padding-top: 80px; /* ヘッダーの高さ分 */

}


/* RESPONSIVE CSS
-------------------------------------------------- */
@media (min-width: 40em) {
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

 
  #myCarousel {
    position: relative;
    width: 100%; /* 必要に応じて固定幅を設定 */
    height: 350px; /* 要件に応じた高さを設定 */
    overflow: hidden;
  }
  .carousel-inner {
    background-image: url(../images/shop.jpg);
    background-repeat: no-repeat;
    background-size: contain;  /* 画像をコンテナ全体にストレッチ */
   
    background-position-x: center;
  
    display: flex;
    
    align-items: contain;
    height: 100%;
  }
  .carousel-item {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .carousel-indicators {
    position: absolute;
    bottom: 20px; /* ボタンの位置を調整 */
   
    z-index: 15;
  }
}