@charset "utf-8";

@font-face {
	font-family: 'Noto Sans JP';
	font-display: swap;
	font-weight: 400;
	src: url('../fonts/NotoSansJP-Regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Noto Sans JP';
	font-display: swap;
	font-weight: 700;
	src: url('../fonts/NotoSansJP-Bold.woff2') format('woff2');
}

*,
*:before,
*:after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background: #fff;
	color: #444;
	line-height: 1.7;
	text-align: center;
	font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, 'MS PGothic', sans-serif;
	font-size: clamp(1rem, 0.438rem + 1.5vw, 1.375rem);
	/* -----16px-22px / 600px-1000px----- */
}

img {
	border: none;
	height: auto;
	display: block;
	margin: 0 auto;
}

.container {
	max-width: 1000px;
	margin: 0 auto;
}

.font1 {
	font-size: .8em;
}

table {
	width: 92%;
	margin: 0 auto;
	text-align: left;
}

a:link,
a:visited {
	color: #fff;
	text-decoration: none;
}

a:hover,
a:active {
	color: #fac3c8;
	text-decoration: none;
}

footer {
	background: #2b2b2b;
	color: #fff;
	padding: 1.5em 0;
	font-size: clamp(0.625rem, 0.507rem + 0.59vw, 0.875rem);
	/*-----10px-14px / 320px-1000px-----*/
}

/*
=========================================================================
PC min-width: 600px
=========================================================================
*/

@media screen and (min-width: 600px) {

	.sp {
		display: none !important;
	}

	.wrap {
		max-width: 2000px;
		margin: 0 auto;
	}

	.bg1 {
		background: url("../images/bg1.webp") top / 2000px;
	}

	.bg_gray {
		background: #eee;
	}

	.cta_text {
		margin-bottom: 1em;
	}

	.flexbox {
		display: flex;
	}

	.btn_chat {
		margin-left: 1em;
	}

	.btn_mail {
		margin-right: 1em;
	}

	.btn_chat:hover {
		filter: brightness(80%);
	}

	.btn_mail:hover {
		filter: brightness(120%);
	}

	th {
		background: #eee;
		padding: .5em 1.2em;
	}

	td {
		font-size: .8em;
		padding: 1em 1.5em;
		line-height: 1.8;
	}
}

/*
=========================================================================
SP max-width: 599px
=========================================================================
*/

@media screen and (max-width: 599px) {

	.pc {
		display: none !important;
	}

	body {
		line-height: 1.5;
		font-size: clamp(0.875rem, 0.015rem + 4.3vw, 1.625rem);
		/*-----14px-26px / 320px-599px-----*/
	}

	.bg_gray {
		background: #e6e6e6;
	}

	.cta_text {
		margin-bottom: .8em;
	}

	.btn_mail {
		margin-bottom: .8em;
	}

	th {
		background: #e6e6e6;
		font-size: 1.3em;
		padding: .5em 1em;
	}

	td {
		padding: 1em;
	}

	footer {
		padding: 1.5em 0;
		font-size: clamp(0.625rem, 0.195rem + 2.15vw, 1rem);
		/*-----10px-16px / 320px-599px-----*/
	}
}