/*----authorized_dealerスタイル--------------------------*/


/*セカンドビュー*/
/*1文字ずつ現れる*/
.top-ttl{
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .textanimation{
			margin-bottom: 100px;
        }

        @keyframes showTextFromBottom{
      0%{
         transform: translateY( 100% );
      
      }
      100%{
          transform: translateY( 0px );
      }
    }
    .textanimation span{
     animation: showText 3s backwards;
     display: inline-block;
    }
    .textanimation > span{
      overflow: hidden;
    }
    .textanimation > span > span{
      animation: showTextFromBottom 0.5s backwards;
    }

.top-ttl .textanimation{
	font-size: 4rem;
}

.top-ttl .fade_in_text{
	font-size: 2.5rem;
	line-height: 2;
}

.sec_view_wrap{
		padding-top: 50px
	}
@media (max-width: 768px) {
        .textanimation{
			margin-bottom: 20px;
}
	.top-ttl .textanimation{
	font-size: 2rem;
}
.top-ttl .fade_in_text{
	font-size: 1.5rem;
}
	.sec_view_wrap{
		padding-top: 10px
	}
}


/*フェードインテキスト*/
.fade_in_text {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

/* スクロールしたらフェードイン */
.fade_in_text.visible {
  opacity: 1;
  transform: translateY(0);
}

/*-------------------------------------------*/
/*画像フェードスライドショー*/

/* スライドショーのコンテナ */
.slideshow_fade {
  position: relative;
  width: 100%;
  max-width: 800px; /* 必要に応じて調整 */
  height: auto;
  overflow: hidden;
}

@media (max-width: 768px) {
  .slideshow_fade {
    aspect-ratio: 5 / 3;
  }
}

/* 画像の共通スタイル */
.fade_image {
  position: absolute;
  width: 100%;
  opacity: 0;
  animation: fadeAnimation 9s infinite;
}

/* 各画像のアニメーションタイミング */
.fade_image:nth-child(1) {
  animation-delay: 0s;
}
.fade_image:nth-child(2) {
  animation-delay: 3s;
}
.fade_image:nth-child(3) {
  animation-delay: 6s;
}

/* フェードアニメーション */
@keyframes fadeAnimation {
  0% { opacity: 0; }
  10% { opacity: 1; } /* ゆっくりフェードイン */
  40% { opacity: 1; } /* 表示維持 */
  60% { opacity: 0; } /* ゆっくりフェードアウト */
  100% { opacity: 0; }
}


/*---------------------------------------------------------*/
/* スライドショーのコンテナ */
.slideshow_bg_fade {
  width: 100%; /* 横幅いっぱい */
  height: auto; /* 高さを自動調整 */
  position: relative;
  overflow: hidden;
  background-size: cover; /* 横幅いっぱい & 画面いっぱい */
  background-position: center center;
  background-repeat: no-repeat;
  animation: fadeBg 12s infinite;
  transition: background-image 1s ease-in-out;
  aspect-ratio: 16 / 9; /* 16:9 のアスペクト比を維持 */
}


/* テキストコンテナ */
.text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 2rem;
  width: 90%;
  max-width: 800px;
}

/* テキスト間のスペース */
.text-container p {
  margin-bottom: 50px;
}

@media (max-width: 768px) {
	.text-container{
		top: 60%;
	}
}

/*セカンドビュー*/
/* 背景画像のフェードアニメーション */

/* 背景画像のコンテナ */
.fade_bg_images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

/* 背景画像のスタイル */
.bg-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

/* 表示中の画像 */
.bg-image.active {
  opacity: 1;
}




/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/* スライダーの親要素 */
.infinite-slider {
  width: 100%;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}

/* スライダーの横スクロール */
.slider-wrapper {
  display: flex;
  margin-top: 60px;
  width: max-content;
  animation: slide 15s linear infinite; /* アニメーションを無限ループ */
}

/* スライドの各アイテム */
.slider-item {
  flex: 0 0 auto;
  padding: 5px;
}

/* 画像 */
.slider-item img {
  width: 100%;
  height: auto; /* 画像の縦伸びを防ぐ */
  object-fit: cover;
  border-radius: 10px;
}

/* 無限スクロールアニメーション */
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); } /* 半分移動すると無限ループ */
}

/* PC：3枚表示 */
@media (min-width: 1024px) {
  .slider-item {
    width: 25vw;
  }
}

/* タブレット：2枚表示 */
@media (max-width: 1023px) {
  .slider-item {
    width: 50vw;
  }
}

/* スマホ：1枚表示 */
@media (max-width: 768px) {
  .slider-item {
    width: 75vw;
  }
}



/*--------------------------------------*/

/*私たちの価値Our Value*/

.our_value_wrap {
  width: 100%; /* 横幅いっぱい */
  height: auto; /* 高さも画面いっぱい */
  background-image: url("https://www.stern-tennoji.co.jp/datas/images/2025/02/22/ca79607061b13dd63791bdb487389baf37ba5ef6.jpg"); /* 背景画像を設定 */
  background-size: cover; /* 画像をアスペクト比を維持しつつ全面に表示 */
  background-position: center center; /* 中央揃え */
  background-repeat: no-repeat; /* 繰り返しなし */
  color: #ffffff;
}

.our_value_group{
	padding: 50px;
}

.our_value_wrap .hgroup{
	align-items: baseline;
	margin: 0 0 200px 0;
}

.our_value_wrap .value_title_ja{
	border-bottom: 2px solid #ffffff;
}
	
.value_title_ja,.value_title_en{
	margin: 0;
	padding: 10px;
}
	
@media (max-width: 768px) {
.our_value_group {
    padding: 20px;
}
}


/*-------------------------------------*/
/*ラグジュアリーエクスペリエンスセクション*/
@media (max-width: 768px) {
	.luxury_group{
		border: solid 1px #000;
		padding: 5px;
		margin-bottom: 10px;
}
	.luxury_group .detail_content{
		margin: 5px;
	}

	.luxury_group .item_block_img_txt{
		margin-bottom:0;
	}
	.icon_wrap{
		padding-top: 0;
	}
	.item_block_img_txt p{
		margin: 0;
	}
}

.detail_content_wrap {
    box-sizing: border-box; /* padding, border を高さに含める */
    transition: height 0.5s ease, padding 0.5s ease; /* 高さとパディングのスムーズな変更 */
    overflow: hidden;
    height: 0;
    padding: 0;
}

/* アクティブ状態（開いた時） */
.detail_content_wrap.active {
    height: auto; /* 自動でコンテンツの高さに調整 */
    padding: 10px 0; /* 開いたときの余白 */
	overflow: hidden; 
	transition: max-height 0.5s, padding 0.5s; 
}

/*p中央寄よせ*/
.lux_p{
	text-align: center;
	padding-top: 80px;
	font-size: 2.5rem;
	line-height: 1.5;
}
	
.detail_content p.kome{
	font-size: 1.2rem;
	
}	

@media (max-width: 768px) {
	.detail_content p.kome{
		font-size:1.1rem;
		padding-top: 10px;
		line-height: 1.5;
	}
	.lux_p{
		font-size: 1.5rem;
	}
}
