@charset "UTF-8";

/*
Theme Name: mirai-teaser
Description: Coming Soon Page Specific Styles. This file is temporary and can be removed after the site launch.
Author: Your Name / Project Team
Version: 1.0.0
*/


/* 背景設定 */

/* PC用の画像 */
@media screen and (min-width: 668px) {
	body {
		background: #fff;
		background-image: url('../images/bg-pc.png');
		background-size: cover;
		background-position: top center;
		background-repeat: no-repeat;
		/* background-attachment: fixed; */
	}
}

/* スマホ用の画像 */
@media screen and (max-width: 667px) {
	body {
		background-image: url('../images/bg-sp.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		background-attachment: fixed;
	}
}

/* 上下中央固定 ------------------- */
body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0;
	min-height: 100svh;
}

body * {
	box-sizing: border-box;
}

.wp-site-blocks {
	width: 100%;
	margin: 20px auto 24vh;
}


/* デバイス切り替え ------------------- */
.mirai_teaser__cs__line--pc {
	display: block;
}

.mirai_teaser__cs__line--sp {
	display: none;
}

/* 全てのグループブロックの背景を透明にする ------- */
.wp-block-group {
	background-color: transparent !important;
}

/* PC表示----------------------------- */



/* コピー ComingSoon */
.mirai_teaser__cs__copy {
	margin: 64px 0 20px;
	text-align: center;
	font-size: 72px;
	font-style: normal;
	font-weight: 700;
	line-height: 120%;
	letter-spacing: 1.44px;
	text-transform: uppercase;

}

/* 説明 Offer~ */
.mirai_teaser__cs__disp {
	margin-top: 20px;
	text-align: center;
	font-size: 24px;
	font-style: normal;
	font-weight: 400;
	line-height: 36px;
	/* 150% */
}

.mirai_teaser__cs__line--pc {
	position: fixed;
	bottom: 20px;
	right: 20px;
}

.mirai_teaser__cs__line--pc .line--pc__box {
	width: auto;
	padding: 16px 24px;
	border-radius: 32px;
	display: flex;
	align-items: center;
}

.mirai_teaser__cs__line--pc .line--pc__box figure {
	width: 138px;
	margin: 0;
}

.mirai_teaser__cs__line--pc .line--pc__box p {
	padding: 0 0 0 12px;
	line-height: 1.4;
}

.mirai_teaser__cs__line--sp,
.mirai_teaser__cs__line--pc {
	width: auto;
	padding: 0;
	/* ボーダー分の隙間を作る */
	border: 1px solid transparent;
	border-radius: 32px;
	/* 好きな角丸を設定可能 */

	/* 背景を2つ重ねる：1つ目は中身の色(白など)、2つ目がボーダー用のグラデ */
	background-image:
		linear-gradient(#fff, #fff),
		linear-gradient(90deg, #00619E 0%, #18A9B5 52.01%, #BCE76C 99.26%);

	/* 1つ目を内側に、2つ目をボーダー領域まで広げる */
	background-origin: border-box;
	background-clip: content-box, border-box;
	box-shadow: 0 0 32px 0 rgba(51, 51, 51, 0.08);
	Modes Colors Color format UIColor Background colors UIColor(red: 1, green: 1, blue: 1, alpha: 1)
}


/* SP表示----------------------------- */

/* 背景設定 */
@media screen and (max-width: 667px) {

	/* デバイス切り替え */
	.mirai_teaser__cs__line--pc {
		display: none;
	}

	.mirai_teaser__cs__line--sp {
		display: block;
	}

	/* 上下中央固定------------------- */
	body {
		margin: 0;
		padding: 0;
		height: 100vh;
		/* 画面の高さいっぱい */
		display: flex;
		flex-direction: column;
		/* 縦方向に並べる */
		justify-content: center;
		/* 垂直方向の中央 */
		align-items: center;
	}

	.wp-site-blocks {
		width: 100%;
		padding: 20px;
		margin: 0 auto;
		margin-bottom: calc(191px + 5vh);
		box-sizing: border-box;
	}

	.wp-block-site-logo {
		max-width: 284px;
	}

	/* コピー ComingSoon */
	.mirai_teaser__cs__copy {
		text-align: center;
		line-height: 110%;
		letter-spacing: 1.04px;
		font-size: clamp(32px, 13.86vw, 52px);
	}

	/* 説明 Offer~ */
	.mirai_teaser__cs__disp {
		margin-top: 20px;
		text-align: center;
		line-height: 140%;
		font-size: clamp(15px, 5.33vw, 20px);
	}

	/* LINE BOX */
	.mirai_teaser__cs__line--sp {
		position: fixed;
		bottom: 5vh;
		right: 32px;
		left: 32px;
	}

	.mirai_teaser__cs__line--sp .line--sp__box {
		border-radius: 32px;
		width: 100%;
		padding: 24px 16px;
		text-align: center;
		line-height: 140%;
	}

	.mirai_teaser__cs__line--sp .line--sp__box p {
		margin: 0 0 16px;
		font-size: clamp(14px, 4.26vw, 16px);
	}

	/* LINE BUTTON */
	.mirai_teaser__cs__line--sp .line--sp__box .line--sp__btn {
		width: 100%;
	}

	.mirai_teaser__cs__line--sp .line--sp__box .line--sp__btn a {
		width: 100%;
		margin: 0 auto;
		padding: 16px 20px;

		display: flex;
		justify-content: center;
		align-items: center;
		gap: 24px;
		align-self: stretch;

		border-radius: 80px;
		background: #06C755;
		box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.08);
		color: #FFF;

		font-family: "LINE Seed JP";
		font-size: clamp(14px, 4.8vw, 18px);
		font-style: normal;
		font-weight: 700;
		line-height: 18px;
		white-space: nowrap;
	}

	.mirai_teaser__cs__line--sp .line--sp__box .line--sp__btn a:hover {
		opacity: 0.6;
	}

	/* sp */
	@media (max-height: 600px) {

		body {
			height: auto;
			display: block;
		}

		.wp-site-blocks {
			position: relative;
			margin: 0;
			padding: 32px 20px;
		}

		/* コピー ComingSoon */
		.mirai_teaser__cs__copy {
			margin: 40px 0 20px;
			font-size: clamp(32px, 13.86vw, 40px);
		}

	}
}


/* sp yoko */
@media screen and (max-height: 375px) {
	body {
		height: auto;
		display: block;
	}

	.wp-site-blocks {
		position: relative;
		margin: 0;
		padding: 32px 20px;
	}

	.wp-site-blocks {
		margin-bottom: 0;
	}

	.mirai_teaser__cs__line--sp {
		width: auto;
		bottom: 5vh;
		border-radius: 16px;
	}

	.br_sp {
		display: none;
	}

	.mirai_teaser__cs__line--sp .line--sp__box {
		border-radius: 16px;
		padding: 16px 16px;
		display: flex;
		align-items: center;
	}

	.mirai_teaser__cs__line--sp .line--sp__box p {
		flex: 1;
		margin: 0;
	}

	.mirai_teaser__cs__copy {
		margin: 20px 0 20px;
		font-size: 36px;
	}

}

/* pc */
@media screen and (min-width: 668px) and (max-width: 1000px) and (max-height: 620px) {
	.mirai_teaser__cs__line--pc .line--pc__box {
		padding: 16px;
		display: flex;
		align-items: center;
		flex-direction: column
	}

	.mirai_teaser__cs__line--pc .line--pc__box p {
		margin: 4px 0 0;
		padding: 0;
		text-align: center;
		font-size: 14px;
	}
}