@charset "utf-8";

/*20260901設置BIZ62で同じ画像PC/SPが使えるスライダー完成。同じ画像が本文でも映える。【slideのCSS とJSの両方設置すること】

100%でも画像がほぼ入った感じがするのでインスタサイズでつくっていれてよい。いつか調整できるかも。ると
①インスタサイズ4：5（1080：1350）でつくるか、
②1080角正方形でもいいかも。

今度はcontentsをSPでも少し下げる必要・PCも

スライドショー（cssでのbackground使用）

ここでは、16:9の画像比率（9÷16=0.5625）を読み込む指定を行なっています。
異なる画像比率にしたい場合、#mainimgのpadding-topの数字56%を変更します。

今回インスタサイズ4：5≒125%
---------------------------------------------------------------------------*/


/*tp_biz62テンプレートをslide-biz62-sppcsameimageにしたスライドショーspでもPCでも全く同じ画像の見えかた。最終的にすべてこれに。
Ｐｃでは下まで。ＳＰでおおきい。2000X1600の画像がオリジナル。

10:8の画像比率（8÷10=0.8）を読み込む指定を行なっています。
異なる画像比率にしたい場合、.mainimgのpadding-topの数字を変更します。2:1にするなら50%です。4：5なら5÷4で125%でやってみたがダメのよう。100限界のよう１:1にしたもの

---------------------------------------------------------------------------*/
/*3枚の画像を囲むブロック*/
#mainimg-home-top {
	width: 100%;
	height: 0;/*0でいいの？*/  
	position: relative;z-index: -10;top: 90px;	/*追加position: absolute;style.cssのheaderのheightと合わせる*/
    position: fixed;	/*z-index: -10;relativeスクロールしても固定表示させる指定*/color: #000;text-shadow: 0px 0px 5px rgba(0,0,0,0.5);
    
	padding-top: 100%;	/*ここが画像比。100%できた125%で出なかったので100%に、でも画像が合わせて出ている理想的。画像正方形はもちろん4：5でいける成功。みるアスペクト比を変更したい場合は、この行を変更する。１：１で１００．もとは 80%*/
	position: fixed;/*relative文字サイズ*/
	background: #fff4ee;	

}
	
	
/*３セットのスライドショーを囲むそれぞれのブロック*/
#mainimg-home-top div div {
	width: 45vw;	/*幅。画面の45%。*/
}

/*３枚の画像の共通設定*/
.slide-home-top {
	width: 100%;height: 100%;/*100でいい？*/
	position: fixed;/*absolute小さなテキスト*/
	right: 0px;
	top: 50px;/*0*/
	display: flex;
	align-items: center;
	padding: 0 5vw;
	opacity: 0;
	transition: opacity 1s;	/*ここの1s（＝1秒）を変更すると、フェードのスピードを変更できます。*/
}

/*１枚目画像*/
.slide1-home-top {
	background: url('https://creme-cremes.com/components/images/home-top1.jpg') no-repeat center center / cover;	/*１枚目の背景画像の読み込み*/
}

/*２枚目画像*/
.slide2-home-top {
	background: url('https://creme-cremes.com/components/images/home-top2.jpg') no-repeat center center / cover;	/*２枚目の背景画像の読み込み*/
	justify-content: flex-end;	/*テキストブロックを右寄せ*/
}

/*３枚目画像*/
.slide3-home-top {
	background: url('https://creme-cremes.com/components/images/home-top3.jpg') no-repeat center center / cover;	/*３枚目の背景画像の読み込み*/
	justify-content: center;	/*テキストブロックを中央に*/
	text-align: center;			/*テキストをセンタリング*/
}

/*大きなテキスト*/
#mainimg-home-top h1 {
	margin: 0;padding: 0;
	font-size: 5vw;		/*文字サイズ。100vwは画面幅100%のことです。*/
	line-height: 1.3;	/*行間を少し狭く*/
	font-weight: 500;	/*文字の太さを少し太く*/
}

/*小さなテキスト*/
#mainimg-home-top p {
	font-size: 1.6vw;		/*文字サイズ。100vwは画面幅100%のことです*/
	padding-left: 0.5rem;	/*左に空ける余白。0.5文字分。*/
}



/*ボタン（btn-grad1）tp_portfolio2/追加
---------------------------------------------------------------------------*/
.btn-grad1 a {
	text-decoration: none;text-align: center;font-size: 3vw;	
	position: relative;
	display: flex;
	justify-content: center;
	padding: 0.5rem 1rem;	/*上下に0.5文字分、左右に2文字分の余白*/
	border-radius: 3px;		/*角を少しだけ丸く*/
	color: #fff;	/*文字色。お好みで。*/
	text-shadow: 1px 1px rgba(0,0,0,0.2);	/*テキストの影。右へ1px、下へ1px、0,0,0は黒のことで0.2は色が20%出た状態。*/
	transition: background-position 0.5s ease, transform 0.5s ease;	/*「background-position」と「transform」の変化に0.5秒かける。数値はお好みで。*/
	background: linear-gradient(120deg, #cd9eb7, #cda39e) left center / 200% 200%;/*背景グラデーション。120degは角度。#はグラデに使う色。グラデの表示範囲を左半分に。最後が縦横サイズ。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
}/*テキスト量にあったサイズ用display: inline-flex;*/

/*マウスオン時（色の追加をする際は、このブロックより上に入れて下さい。）*/
.btn-grad1 a:hover {
	filter: none;
	background-position: right center;	/*グラデの表示範囲を、右半分に。*/
	transform: translateY(-2px);	/*ボタンを2pxだけ浮かす*/
}



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

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