@charset "utf-8";
/* MVスライダー */
.image_area2 {
  margin-top: 5px;
}
.product_slider2 {
  overflow: hidden;
  width: 100%;
}
.slider2 {
  display: flex;
  gap: 0px;
  padding: 0 0 5px;
}
.slide2 {
  height: auto;
  width: 100%; 
  flex-shrink: 0;
  /* 上下アニメーションを削除済み */
}

.slide2 img {
  height: auto;
  display: block;
  width: 85%;
  text-align: center;
  margin: 0 auto;
}
.slide2 p {
  font-size: 14px;
  display: block;
  font-weight: 100;
  letter-spacing: 2px;
  margin-bottom: 5px;
}
.slide2 p::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transform: rotate(45deg);
  margin-left: 5px;
}
/* カルーセル */
.pagination2 {
  position: relative;
  text-align: center;
  margin: 0 auto;
  z-index: 100;
  gap: 7px;
}
.dot2 {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 1px solid #717171;
  border-radius: 50%;
  margin: 0 2px 3px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.dot2.active {
  background-color: #717171;
}
/* 香りで完成するなりたい私部分 */
.header_info2 {
    width:89%;
    position: relative;
    bottom: 80px;
    transform: translate(-50%, 0%);
    left: 50%;
    display: flex;
    justify-content: space-between;
  
}
.header_text2 {
  position: relative;
  z-index: 60;
  pointer-events: none;
  display: flex;
  bottom: 35px;
}
.header_text_img2, .header_text12, .header_text22, .header_button2 img {
  object-fit: contain; /* Apply to all image tags */
  width: 100%; /* Make them flexible */
  height: auto; /* Allow height to adjust proportionally */
}
.header_text_img2 {
  width: 192px;
  display: block;
}
.header_text12, .header_text22 {
  display: block;
  position: absolute;
}
.header_text12 {
  width: 189px;
    top: -24px;
    left: 0%;
}
.header_text22 {
  width: 148px;
  position: absolute;
  top: 1%;
  left: 60%;
}
/* TOP診断ボタン */
.header_button2 {
  position: relative;
  z-index: 59;
  right: 0%;
  bottom: 41px;
}
.header_button2 img {
  width: 104px;
}
/* スライド停止再生 */
.slider-controls2 {
  display: inline-block;
  margin-left: 5px;
}
.slider-controls2 img {
  width: 15px;
}
.header_button_img_wrapper2 {
  position: absolute !important;
  bottom: 0;
  width: 100%;
  height: 0;
  padding-top: 100%;
}

/* カルーセル */
.pagination2 {
    position: relative;
    display: flex; 
    justify-content: center; /* 中央揃え */
    align-items: center;
    margin: 0 auto 10px; /* スライダー画像との間に少しマージンを追加 */
    z-index: 100;
}

/* 矢印コンテナのスタイル */
.slider-nav-arrows2 {
    position: absolute; /* .image_area2 に対して絶対配置 */
    top: 50%; /* 上から50%の位置 */
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between; /* 左右に配置 */
    transform: translateY(-50%); /* 中央揃えのためにY軸で上にずらす */
    pointer-events: none; /* デフォルトではポインタイベントを無効にし、矢印画像のみ有効にする */
    z-index: 70; /* スライダーコンテンツより手前に表示 */
}

/* 矢印ボタン個別のスタイル */
.slider-arrow {
    width: 20px; /* 矢印のサイズを大きく */
    height: 20px;
    object-fit: contain;
    cursor: pointer;
    pointer-events: auto; /* 矢印画像にはポインタイベントを有効にする */
    background-color: rgba(255, 255, 255, 0.7); /* 背景色を追加して見やすく */
    border-radius: 50%; /* 丸くする */
    padding: 8px;
}

.prev-arrow2 {
    margin-left: 9px; /* 左端からの距離 */
}

.next-arrow2 {
    margin-right: 9px; /* 右端からの距離 */
}

/* ドット (変更なし) */
.dot2 {
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 1px solid #717171;
    border-radius: 50%;
    margin: 0 2px; /* 縦の3pxを横の2pxに変更 */
    cursor: pointer;
    transition: background-color 0.3s;
}

/* スライド停止再生ボタン */
.slider-controls2 {
    /* 左右の矢印の間に配置されるため、marginを調整 */
    margin: 0 5px; 
}
.slider-controls2 img {
    width: 15px;
    height: 15px;
    object-fit: contain;
}
@media screen and (min-width: 390px) {
    .slide2 img {
      width: 100%;
    }
    .header_info2 {
    width: 93%;
     bottom: 89px;
    justify-content: space-between;
}
.header_text_img2 {
    width: 57vw;
    display: block;
}
    .header_button2 img {
    width: 31vw;
}
    .header_text12 {
    width: 55vw;
    top: -24px;
    left: 0%;
}
    .header_text22 {
    width: 44vw;
    position: absolute;
    top: 5%;
    left: 59%;
}
    .header_button2 {
    position: relative;
    z-index: 59;
    right: 0%;
    bottom: 31px;
}
}