-->-->-->-->@charset "utf-8";


/*スライドショー
ここでは、16:9の画像比率（9÷16=0.5625）を読み込む指定を行なっています。
異なる画像比率にしたい場合、.slide-type1のpadding-topの数字を変更します。
---------------------------------------------------------------------------*/

	/*画面幅500px以下の追加指定*/
	@media screen and (max-width:500px) {
	
	/*スライドショーブロック内のsvg要素*/
	#svg-box svg {
		display: none;	/*ロゴが小さくなりすぎるので枠を消す*/
	}
	
	}/*追加設定ここまで*/


/*スライドショーボックス*/
#svg-box {
	flex-shrink: 0;
	padding: 0 var(--space-small);	/*上下、左右への余白。*/
	position: relative;
	overflow: hidden;
}

/*3枚の画像を囲むブロック//////////////////// */
.slide-type1 {
	width: 100%;
	height: 0;

	padding-top: 37.5%;	/*アスペクト比　＜ここを変更する＞*/
	position: relative;
	clip-path: url(#myClip2);	/*SVG画像との紐付け*/
}

	/*画面幅500px以下（スマホ）の追加指定*/
	@media screen and (max-width:500px) {
	
	#svg-box {
		border-radius: 10px;	/*svgを外すので、代わりに角丸の指定*/
	}
		/*3枚の画像を囲むブロック*/
	.slide-type1 {
	padding-top:  37.5%;	/*アスペクト比（スマホ用）*/
	}	
	}/*追加設定ここまで*/





/*３枚の画像の共通設定*/
.slide-type1 .slide {
	position: absolute;right: 0px;top: 0px;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1s;	/*ここの1s（＝1秒）を変更すると、フェードのスピードを変更できます。１枚が表示される時間はjsで指定できます。*/
}

/*以下は変更不要*/
.slide-type1 .slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}