@charset "utf-8";
/* CSS Document */

:root {
	--bg_color: #ecf4fb;
	--bg_color2: #ffeaf1;
	--wrap_color: #FFF;
	--font_color: #000;
	--font_color2: #ff76ae;
	--btn_color: #ffc107;
	--border_color: #A6A6A6;
	--main_color: #ff68ac;
	--sub_color: #ff3aa5;
	--a_color: #2a87ff;
	--a_hover_color: #ff3d9e;
}


/*==========
共通
==========*/
html {
	font-size: 62.5%;
	scroll-behavior: smooth;
}

body {
	font-family: 'Noto Sans JP', "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1;
	color: var(--font_color);
	background-color: var(--bg_color);
	position: relative;
	overflow-x: hidden;
	font-feature-settings: "palt"1;
}

a {
	color: var(--a_color);
	transition: .3s;
}

a:hover {
	transition: .3s;
}

a img:hover {
	opacity: .8;
}

.container {
	width: 90%;
	margin: 0 auto;
}

@media (min-width: 768px) {
	body {
		font-size: 1.7rem;
	}

	.container {
		width: 84%;
	}
}


/*==========
wrap
==========*/
.wrap {
	background-color: var(--wrap_color);
}

@media (min-width: 768px) {
	.wrap {
		width: 600px;
		margin: 0 auto;
	}
}



/*==========
セクションタイトル
==========*/
.section_title {
	font-size: 3.6rem;
}

.section_title span {
	font-size: 7.2rem;
	color: var(--font_color2);
}

@media (min-width: 768px) {
	.section_title {
		font-size: 4.2rem;
	}

	.section_title span {
		font-size: 9.2rem;
	}
}


/*==========
ボタン
==========*/
.contact_block {}

.contact_block header {
	text-align: center;
	font-size: 1.65rem;
	margin-bottom: 12px;
}

.contact_block .contact_btn {
	width: 96%;
	max-width: 420px;
	height: 66px;
	border-radius: 100vmax;
	background-color: var(--btn_color);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 9px;
	margin: 0 auto;
	box-shadow: 3px 6px 0 rgba(0, 0, 0, 0.6);
}

.contact_block .contact_btn span {
	color: #FFF;
}

.contact_block .contact_btn img {
	width: 18px;
}

@media (min-width: 768px) {
	.contact_block header {
		font-size: 1.8rem;
	}

	.contact_block .contact_btn span {
		font-size: 1.8rem;
	}


}






/*==========
フッター
==========*/
.site_footer {
	padding: 72px 0 90px;
	background: var(--main_color);
	text-align: center;
}

/* フッターリンク */
.site_footer_link {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	width: 96%;
	margin: 0 auto 42px;
	flex-direction: column;
	align-content: center;
}

.site_footer_link li a {
	font-size: 1.3rem;
	color: #393838;
}

.site_footer_copyright {
	font-size: 1.35rem;
	color: #FFF;
}

@media (min-width: 768px) {
	.site_footer {
		padding-top: 72px;
	}

	.site_footer_link li a {
		font-size: 1.5rem;
	}

	.site_footer_copyright {
		font-size: 1.45rem;
	}

}



/*==========
アニメーション
==========*/
.fadeUp {
	animation-name: fadeUpAnime;
	animation-duration: 1.0s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeUpAnime {
	from {
		opacity: 0;
		transform: translateY(100px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger {
	opacity: 0;
}