@charset "utf-8";


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

	/*画面幅500px以下の追加指定*/
	@media screen and (max-width:500px) {

	/*スライドショーブロック内のsvg要素*/
	#slide-main svg {
		display: none;	/*ロゴが小さくなりすぎるので枠を消す*/
	}

	}/*追加設定ここまで*/


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

/*3枚の画像を囲むブロック*/
.slide-type1 {
	width: 100%;
	height: 0;
	padding-top: 33%;	/*アスペクト比*/
	position: relative;
	clip-path: url(#myClip1);	/*SVG画像との紐付け*/
}
	/*画面幅500px以下の追加指定*/
	@media screen and (max-width:500px) {
.slide-type1 {
	padding-top: 50%;	/*アスペクト比*/
}
}
/*追加設定ここまで*/


/*３枚の画像の共通設定*/
.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;
}


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

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


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

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

/*アクティブ時のボタン色*/
.slide-type1 .indicator.active {
    background: #000;
}
/*ボタン*/
.slide-type1 .btnBox {
	text-align: center;
	position:absolute;
	width:  100%;
	bottom: 0;	/*ボタンの配置場所。スライドショーの画面下からの距離。*/
	left: 2.3%;
}

#slide-main .btn {
	font-size: 1rem;	/*文字サイズ*/
	font-weight: 600;	/*少し太字に*/
	margin-top: 3vw;	/*上のテキストとボタンの間のスペース。*/
	display: flex;
	gap: 1rem;	/*ボタン同士の余白*/
}

#slide-main .btn a {
	display: block;text-decoration: none;
	padding: 0.8rem 2rem;	/*ボタン内の余白。上下、左右へ。1rem=1文字分です。*/
	margin-bottom: 10px;	/*ボタン同士の隙間*/
}
/*画面幅500px以下の追加指定*/
@media screen and (max-width:500px) {
#slide-main .btn a {
	margin-bottom: 0;
}
}
/*マウスオン時*/
#slide-main .btn a:hover {
	opacity: 1;
	transform: scale(1.05);	/*105%に拡大*/
}
#slide-main .btn {
	font-size: 1rem;	/*文字サイズ*/
	font-weight: 600;	/*少し太字に*/
	margin-top: 3vw;	/*上のテキストとボタンの間のスペース。*/
	display: flex;
	gap: 1rem;	/*ボタン同士の余白*/
}
#slide-main .btn a {
	display: block;text-decoration: none;
	padding: 0.8rem 2rem;	/*ボタン内の余白。上下、左右へ。1rem=1文字分です。*/
	margin-bottom: 10px;	/*ボタン同士の隙間*/
}

/*マウスオン時*/
#slide-main .btn a:hover {
	opacity: 1;
	transform: scale(1.05);	/*105%に拡大*/
}

	/*画面420px以上の追加指定*/
	@media screen and (min-width:420px) {

	/*ボタン*/
	#slide-main .btn {
		/*font-size: 1.4vw;	文字サイズ*/
	}

	#slide-main .btn a {
		margin: 0;
		padding: 0.6rem 3rem;	/*ボタン内の余白。上下、左右へ。1rem=1文字分です。*/
	}

	}/*追加指定ここまで*/


/*1つ目のボタン（お問い合わせ）の追加設定*/
#slide-main .btn p:nth-of-type(1) a {
	background: var(--primary-color);		/*背景色。冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
}

/*2つ目のボタン（資料請求）への追加設定*/
#slide-main .btn p:nth-of-type(2) a {
	background: var(--base-inverse-color);	/*背景色。冒頭のbase-inverse-colorを読み込みます。*/
	color: var(--base-color);				/*文字色。冒頭のbase-colorを読み込みます。*/
	letter-spacing: 0.1em;					/*文字間隔を少しだけ広く*/
}

/*3つ目のボタン（資料請求）への追加設定*/
#slide-main .btn p:nth-of-type(3) a {
	background: #000;	/*背景色。冒頭のbase-inverse-colorを読み込みます。*/
	color: var(--base-color);				/*文字色。冒頭のbase-colorを読み込みます。*/
	letter-spacing: 0.1em;					/*文字間隔を少しだけ広く*/
}

/*ボタン内のアイコン*/
#slide-main .btn i {
	transform: scale(1.4);	/*140%に拡大*/
	padding-right: 0.8rem;	/*アイコンとテキストとの間の余白*/
}