@charset "UTF-8";
/*============================
	module style
	- background
============================*/
:root {
	--font-color: #333;
	--main-color: #357cef;
	--accent-color: #fbac35;
	--base-color: #f2f4f8;
	--skyblue: #8ddbf0;
	--gray: #dde3ec;
	--yellow: #fff95a;
	--red: #ef4e35;
	--pink: #ef3582;
	--afaced: "Afacad", sans-serif;
	--murecho: "Murecho", sans-serif;
	--yugothic: "Yu Gothic Medium","游ゴシック Medium","YuGothic","游ゴシック体","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Meiryo","メイリオ",sans-serif;
	--size-8: max(8px,8rem);
	--size-10: max(10px,10rem);
	--size-12: max(12px,12rem);
	--size-14: max(14px,14rem);
	--size-15: max(15px,15rem);
	--size-16: max(16px,16rem);
	--size-24: max(24px,24rem);
	--size-32: max(32px,32rem);
	--size-40: max(40px,40rem);
}
/*----------------------------
	background
-----------------------------*/
.bg--white { background-color: #fff; }
.bg--accent { background-color: var(--accent-color); }
.bg--main { background-color: var(--main-color); }
.bg--gray { background-color: var(--gray); }

/*----------------------------
	text
-----------------------------*/
.c--white { color: #fff; }
.c--main { color: var(--main-color); }
.c--pink { color: var(--pink); }

.bold { font-weight: bold; }

.align--l { text-align: left; }
.align--c { text-align: center; }
.align--r { text-align: right; }

/*----------------------------
	link
-----------------------------*/
.link--main {
	font-weight: 500;
	background-color: var(--main-color);
	color: #fff;
	padding: 14rem 56rem;
	border-radius: 52rem;
	display: block;
	max-width: max-content;
	transition: .3s;
}
.link--main:hover {
	background-color: var(--skyblue);
}
/*----------------------------
	display
-----------------------------*/
.block		{ display: block; }
.inblock	{ display: inline-block; }
.flex		{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; }
.sp			{ display: none; }

.pst--rel { position: relative; }
.pst--abs { position: absolute; }
.pst--fix { position: fixed; }

/*----------------------------
	icon
-----------------------------*/
.icon::before {
	content: "";
	width: var(--size-24);
	height: var(--size-24);
	display: block;
}
.icon--blog::before {
	background: url(../img/icon_blog.png) center / 100% no-repeat;
}
.icon--email::before {
	background: url(../img/icon_email.png) center / 100% no-repeat;
}

/*----------------------------
	fadein
-----------------------------*/
.fadein {
	opacity: 0;
	transform: translateY(50px);
	transition: .8s;
}
.fadein.is--animated {
	opacity: 1;
	transform: translateY(0);
}

@media screen and (max-width: 768px){
	:root {
		--size-22: max(22px,22rem);
		--size-30: max(30px,30rem);
	}
	.sp { display: block; }
	
}