/*メイン画像
---------------------------------------------------------------------------*/
/*ブロック全体*/
#mainimg {
	background: var(--base-color) url("../images/top.png") no-repeat center center / cover;
	width: 100%;
	padding-top: 150%;	/*アスペクト比2:3（3÷2=1.5）*/
	position: relative;
	overflow: hidden;
}

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

	#mainimg {
		background: var(--base-color) url("../images/top.png") no-repeat center center / cover;
		padding-top: 56.25%;	/*アスペクト比16:9（9÷16=0.5624）*/
	}

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

#mainimg > div {
	position: absolute;
	top: 60px;	/*header分を確保*/
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	
}
	/*画面420px以上の追加指定*/
	@media screen and (min-width:420px) {

	#mainimg > div {
		left: var(--space-large);
		align-items: flex-start;
		justify-content: center;
	}

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

/*テキストのブロック*/
#mainimg p {margin: 0;}
#mainimg .text {
	font-size: 28px;	/*文字サイズ。*/
	font-weight: 800;	/*太字に*/
	line-height: 1.8;	/*行間*/
	text-align: center;	/*テキストをセンタリング*/
}

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

	#mainimg .text {
		text-align: left;	/*テキストを左寄せ*/
		font-size: 3.6vw;	/*文字サイズ。*/
	}

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


/*ボタン*/
#mainimg .btn {
	font-size: 1rem;	/*文字サイズ*/
	font-weight: 600;	/*少し太字に*/
	/* margin-top: 3vw; ← この行は削除またはコメントアウト */
	display: flex;
	gap: 1rem;	/*ボタン同士の余白*/

	/* ▼ ここを追加して右下に固定 ▼ */
	position: fixed;
	bottom: 50px;   /* 画面下からの距離 */
	right: 60px;    /* 画面右からの距離 */
	z-index: 9999;  /* 最前面に表示 */
	flex-direction: column; /* 縦並び維持 */
}


#mainimg .btn a {
	display: block;text-decoration: none;
	padding: 0.8rem 2rem;	/*ボタン内の余白。上下、左右へ。1rem=1文字分です。*/
	margin-bottom: 10px;	/*ボタン同士の隙間*/
}

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

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

	/*ボタン*/
	#mainimg .btn {
		font-size: 1.4vw;	/*文字サイズ*/
	}
	
	#mainimg .btn a {
		margin: 0;
		padding: 0.6rem 3rem;	/*ボタン内の余白。上下、左右へ。1rem=1文字分です。*/
	}

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


/* 1つ目：LINEで問い合わせ → LINE公式グリーン */
#mainimg .btn p:nth-of-type(1) a {
  background: #06C755;   /* LINE公式カラー */
  color: #fff;
}

/* 2つ目：メールで問い合わせ → 既存の黒×黄のまま（明示） */
#mainimg .btn p:nth-of-type(2) a {
  background: var(--base-inverse-color);   /* #323232 */
  color: var(--primary-color);             /* #FEEC37 */
}

/* 3つ目：広告掲載申し込み → 黄色 */
#mainimg .btn p:nth-of-type(3) a {
  background: var(--primary-color);        /* #FEEC37 */
  color: var(--primary-inverse-color);     /* #323232 */
}

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