@charset "utf-8";

/*横スライドインタイプのスライドショー（アスペクト比固定タイプ）
---------------------------------------------------------------------------*/
/*3枚の画像を囲むブロック*/
.slide4-parts {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 0;
	padding-top:40%;	/*アスペクト比*/
}

/*３枚の画像の共通設定*/
.slide4-parts .slide-parts {
	position: absolute;right: 0px;top: 0px;
	width: 100%;
	height: 100%;
	transform: translateX(100%);	/*初期状態で画面の右外側に配置*/
	transition: transform 0.7s ease;	/*スライドのアニメーション。0.7sはスライドにかける時間（0.7秒）。0.7を変更する場合、main.jsのスライドショー用のコードの最後の「700」も変更する。*/
}

/*アクティブ時*/
.slide4-parts .slide-parts.active {
	transform: translateX(0);	/*画面内に表示*/
}

/*左に移動*/
.slide4-parts .slide-parts.left {
	transform: translateX(-100%);	/*画面の左外側に移動*/
}

/*非表示*/
.slide4-parts .slide-parts.hidden {
	opacity: 0;
}

/*初期表示用*/
.slide4-parts .slide-parts.initial {
	transform: translateX(0);
	transition: none;
}

/*画像のクリップ*/
.slide4-parts .slide-parts img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*現在表示されているスライドのみをクリック可能にする設定（変更不要）
---------------------------------------------------------------------------*/
.slide4-parts .slide-parts {
	pointer-events: none; /* デフォルトでクリックを無効にする */
}

.slide4-parts .slide-parts.active {
	pointer-events: auto; /* 表示中のスライドのみクリックを有効にする */
}

/*現在表示中のボタン
---------------------------------------------------------------------------*/
/*全体*/
.slide4-parts .slide-indicators-parts {
    text-align: center;
	position: absolute;
	width: 100%;
	bottom: 10px;	/*ボタンの配置場所。スライドショーの画面下からの距離。*/
	left: 0px;
}

/*ボタン１個あたり*/
.slide4-parts .indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #ccc;	/*未アクティブ時のボタン色*/
	border: 4px solid #fff;	/*枠線の幅、線種、色。*/
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}

/*アクティブ時のボタン色*/
.slide4-parts .indicator.active {
    background: #000;
}


.sliderbox{
	position:relative;
  }
  .slider_logo {
	z-index:10;
	position:absolute;
	text-align: center;
	top:130px;
	width:100%;
	height:100%;
  }

  @media screen and (max-width:900px) { 
	.slider_logo {
		top:80px;
   }
}
   @media screen and (max-width:559px) { 
	.slider_logo {
		top:50px;
   }
}