@charset "utf-8";


/*メイン画像
---------------------------------------------------------------------------*/
#mainimg {
	width: 100%;position: relative;
	margin-bottom: 70px;	/*ボックスの下に空けるスペース*/
}

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

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

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

/*画像下にある装飾画像*/
#mainimg .kazari1 {
	width: 100%;
	position: absolute;
	left: 0px;
	bottom: -7vw;	/*本来の場所より上に移動させる*/
	pointer-events: none;
}


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

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


/*現在表示中のボタン
---------------------------------------------------------------------------*/
/*全体*/
#mainimg .slide-indicators {
    text-align: center;
	position: absolute;
	width: 100%;
	bottom: -40px;	/*ボタンの配置場所。0以上の数値にすれば画像の上に重なります。*/
	left: 0px;
}
/*１個あたり*/
#mainimg .indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #ccc;	/*未アクティブ時のボタン色*/
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}
#mainimg .indicator.active {
    background: #000;	/*アクティブ時のボタン色*/
}


/*メイン画像上のキャッチコピー
---------------------------------------------------------------------------*/
/*テキスト全体を囲むブロック*/
#mainimg-text {
	position: absolute;
	right: 10vw;	/*右からの配置場所。画面幅100%=100vw。*/
	top: 15vw;		/*上からの配置場所。画面幅に合わせて移動したいので、vhじゃなくvwにしています。*/
	writing-mode: vertical-rl;	/*縦書き*/
	text-orientation: upright;	/*縦書き*/
}

/*各テキストを囲むブロック*/
#mainimg-text span {
	display: inline-block;
	font-size: 1.2rem;	/*文字サイズ120%*/
	line-height: 1;	/*行間*/
	letter-spacing: 0.3em;	/*文字間隔を少し広く*/
	padding: 1rem 0.6rem;	/*余白。黒帯と文字のバランス。*/
	background: #111;	/*背景色*/
	color: #fff;	/*文字色*/
}

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

	#mainimg-text {
		position: static;	/*レイアウトが崩れるので、本来の場所に戻す*/
		text-align: center;	/*テキストをセンタリング*/
		writing-mode: initial;		/*縦書きリセット*/
		text-orientation: initial;	/*縦書きリセット*/
		margin-top: 2rem;	/*上に空けるスペース*/
	}
	
	/*各テキストを囲むブロック*/
	#mainimg-text span {
		padding: 0.6rem 1rem;
		font-size: 1rem;
	}

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