/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

#container {
	overflow-x: hidden;
	position: relative;
	animation: opa1 1s 0.4s both;
	display: flex;
	
	flex-direction: column;
	/*min-height: 900px;*/
	max-width: 960px;	/*サイトの最大幅。これ以上広がらない。*/
	margin: 0 auto;
	   padding-top:10px;
        width: 100%;
        height:auto;
	
}
body * {box-sizing: border-box;}
html,body {
	font-size: 13px;	/*基準となるフォントサイズ。*/
}
section {
	padding-left: 0;
	padding-right: 0;
}


body {
	margin: 0;padding:0;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;	/*フォント種類（ゴシック）*/
	-webkit-text-size-adjust: none;
   background-color:#000000;	/*背景色*/
	color: #00000;		/*文字色*/
	line-height: 2;		/*行間*/
	overflow-x: hidden;
}

ul{
  padding-left:15px;
	  padding-right:15px;
}

li{
  list-style:none;
}

footer{background: #876F70} 
header{background: #876F70} 

/*スライドショー
---------------------------------------------------------------------------*/
.slide3-parts {
    position: relative;
    margin-bottom: 10px;
    object-position: center;
    width: 100%;
    overflow: hidden;  /* 画像がはみ出さないようにする */
}

/*３枚の画像の共通設定*/
.slide3-parts .slide-parts {
    position: absolute;
    right: 0;  /* 右端に合わせる */
    top: 0;  /* 上端に合わせる */
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s;
}

/*１枚目画像（変更不要）*/
.slide3-parts .img1-parts {
	position: relative;width: 100%;height: auto;
}

/*画像全般（変更不要）*/
.slide3-parts .slide-parts img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像をコンテナのサイズに合わせてクリップ */
    object-position: center; /* 画像の中心を基準に調整 */
}

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

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

/*現在表示中のボタン
---------------------------------------------------------------------------*/
/*全体*/
.slide3-parts .slide-indicators {
    text-align: center;
	position: absolute;
	width: 100%;
	bottom: -40px;	/*ボタンの配置場所。0以上の数値にすれば画像の上に重なります。*/

		display: flex;
}
/*１個あたり*/
.slide3-parts .indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #ccc;	/*未アクティブ時のボタン色*/
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}
.slide3-parts .indicator.active {
    background: #000;	/*アクティブ時のボタン色*/
}


/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むブロック*/
.slide-thumbnail1-parts {
	overflow-x: hidden;
	margin-bottom: 2rem;
	
}

/*画像たちを囲むブロック*/
.slide-thumbnail1-parts .img-parts {
	display: flex;
	overflow: hidden;

}

/*画像*/
.slide-thumbnail1-parts .img-parts img {
	padding: 0 1vw;	/*上下の余白はなし、左右への余白は画面の1%*/
}

/*右から左へ、左から右へ、のアニメーション*/
.slide-thumbnail1-parts .rtl-parts, .slide-thumbnail1-parts .ltr-parts {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.slide-thumbnail1-parts .rtl-parts {animation-name: slide-rtl-parts;}
.slide-thumbnail1-parts .ltr-parts {animation-name: slide-ltr-parts;}

@keyframes slide-rtl-parts {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr-parts {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}