@charset "UTF-8";
:root {
	--main-color: #357cef;
	--accent-color: #ee3b80;
	--base-color: #dde3ec;
	--font-color: #333;
	--light-gray: #f2f4f8;
	--orange: #fbac35;
	--m-plus1: "M PLUS 1","Yu Gothic Medium", "游ゴシック Medium", "YuGothic", "Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3", "Meiryo", "メイリオ", sans-serif;
	--noto-sans-jp: "Noto Sans JP","Yu Gothic Medium", "游ゴシック Medium", "YuGothic", "Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3", "Meiryo", "メイリオ", sans-serif;
	--murecho: "Murecho","Yu Gothic Medium", "游ゴシック Medium", "YuGothic", "Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3", "Meiryo", "メイリオ", sans-serif;
	--yugothic: "Yu Gothic Medium", "游ゴシック Medium", "YuGothic", "Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3", "Meiryo", "メイリオ", sans-serif;
	--fs-12: .75rem;
	--fs-14: .875rem;
	--fs-16: 1rem;
	--fs-18: 1.125rem;
	--fs-24: 1.5rem;
	--fs-44: 2.75rem;
	--fs-54: 3.375rem;
}
/*----------------------------
	background
-----------------------------*/
.bg--white { background-color: #fff; }
.bg--main { background-color: var(--main-color); }
.bg--accent { background-color: var(--accent-color); }
.bg--orange { background-color: var(--orange); }
.bg--light-gray { background-color: var(--light-gray); }

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

.fs--large	{ font-size: 2.5rem; }
.fs--middle	{ font-size: 1.25rem; }
.fs--small	{ font-size: .875rem; }

.bold { font-weight: bold; }

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

/*----------------------------
	box
-----------------------------*/
.mt--10 { margin-top: 10px; }
.mr--10 { margin-right: 10px; }
.mb--10 { margin-bottom: 10px; }
.ml--10 { margin-left: 10px; }

.pt--10 { padding-top: 10px; }
.pr--10 { padding-right: 10px; }
.pb--10 { padding-bottom: 10px; }
.pl--10 { padding-left: 10px; }

.bd { border: 1px solid #000; }

/*----------------------------
	display
-----------------------------*/
.block		{ display: block; }
.inblock	{ display: inline-block; }
.flex		{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; }

.fl--l	{ float: left; }
.fl--r	{ float: right; }
.clear	{ clear: both; }

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

/*----------------------------
	list
-----------------------------*/
.list {}
.list__item {}

/*----------------------------
	table
-----------------------------*/
.tbl {}

/*----------------------------
	form parts
-----------------------------*/
.frm {}

/*----------------------------
	icon
-----------------------------*/
.icon::before {
	content: "";
	width: 1.5rem;
	height: 1.5rem;
	background-repeat: no-repeat;
	background-size: 100%;
	background-color: var(--main-color);
	display: block;
}
.icon--home::before {
	mask: url(../img/icon_home.svg);
    -webkit-mask: url(../img/icon_home.svg);
}
.icon--cer::before {
	mask: url(../img/icon_cer.svg);
    -webkit-mask: url(../img/icon_cer.svg);
}
.icon--modal::before {
	mask: url(../img/icon_modal.svg);
    -webkit-mask: url(../img/icon_modal.svg);
}
.icon--table::before {
	mask: url(../img/icon_table.svg);
    -webkit-mask: url(../img/icon_table.svg);
}
.icon--tab::before {
	mask: url(../img/icon_tab.svg);
    -webkit-mask: url(../img/icon_tab.svg);
}
.icon--button::before {
	mask: url(../img/icon_button.svg);
    -webkit-mask: url(../img/icon_button.svg);
}
.icon--list::before {
	mask: url(../img/icon_list.svg);
    -webkit-mask: url(../img/icon_list.svg);
}
.icon--accordion::before {
	mask: url(../img/icon_accordion.svg);
    -webkit-mask: url(../img/icon_accordion.svg);
}
.icon--tool::before {
	mask: url(../img/icon_tool.svg);
    -webkit-mask: url(../img/icon_tool.svg);
}
.icon--pagination::before {
	mask: url(../img/icon_pagination.svg);
    -webkit-mask: url(../img/icon_pagination.svg);
}
.icon--frame::before {
	mask: url(../img/icon_frame.svg);
    -webkit-mask: url(../img/icon_frame.svg);
}
.icon--hamburger::before {
	mask: url(../img/icon_hamburger.svg);
    -webkit-mask: url(../img/icon_hamburger.svg);
}

/*----------------------------
	clearfix
-----------------------------*/
.cf{
	display:block;
}
.cf:after{
	content:"";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

/*----------------------------
	media query
-----------------------------*/
@media screen and (max-width: 768px){


}