@charset "utf-8";

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400&display=swap");

html {
	scroll-behavior : smooth;
}

body {
	overflow-x : hidden;
	font-family : "Noto Sans JP", sans-serif, -apple-system, BlinkMacSystemFont, Verdana, Roboto, arial,
	"HiraKakuProN-W3", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "BIZ UDGothic", sans-serif;
	/* font-size : clamp(0.875rem, 1.335vw, 1rem); 16px 基準 */
	/* font-size : clamp(0.75rem, 1.335vw, 0.875rem); 14px 基準 */
	font-size : clamp(0.875rem, 1.335vw, 1rem);
	line-height : 1.45;
	letter-spacing : 0.125em;
	color : #333333;

	font-feature-settings : "palt" 1;
	font-kerning : auto;
	-webkit-font-smoothing : subpixel-antialiased;
	-moz-osx-font-smoothing : unset;
}
@media screen and (max-width: 767px) {
	body {
		font-size : 0.9375rem;
	}
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
	(min-resolution: 2dppx) {
	body {
		-webkit-font-smoothing : antialiased;
		-moz-osx-font-smoothing : grayscale;
	}
}

/* this is tags related to text-box */
div,
dl,
dt,
dd,
ul,
li,
p,
span,
a,
h1,
h2,
h3,
h4,
h5,
h6,
table,
th,
td {
	word-break : break-all;
}

h1,
h2,
h3,
h4,
h5,
h6,
dt,
th {
	font-weight : normal;
}

p {
	line-height : 2;
}

img,
input[type="image"] {
	vertical-align : bottom;
}

a {
	text-decoration : underline;
	color : inherit;
}
a:hover {
	text-decoration : none;
}
a[href^="tel:"] {
	pointer-events : none;
}

em {
	font-weight : bold;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
textarea {
	font-size : 1rem;
	max-width : 100%;
	padding : 0.25rem;
	transition : 0.3s ease-out;
	border : 1px solid #cccccc;
	border-radius : 2px;
	background : #ffffff;
}
input[type="radio"],
input[type="checkbox"] {
	margin-right : 0.25rem;
	cursor : pointer;
	transition : 0.3s ease-out;
}
input[type="reset"],
input[type="submit"] {
	padding : 0.25rem 1rem;
	cursor : pointer;
	transition : 0.3s ease-out;
	border : 1px solid #cccccc;
	border-radius : 2px;
}
input[type="reset"]:hover,
input[type="submit"]:hover {
	background-color : #eeeeee;
}
input[type="reset"]:active,
input[type="submit"]:active {
	color : #777777;
	background-color : #dddddd;
}

input:required,
select:required,
textarea:required {
	position : relative;
	color : #ba8c09;
	border : 1px solid #f2cb58;
	background-color : #fdfaeb;
}
input:invalid,
select:invalid,
textarea:invalid {
	color : #b73131;
	border-color : #e37b7b;
	background-color : #ffebef;
}
input:focus,
select:focus,
textarea:focus {
	color : inherit;
	border : 1px solid #81c4ec;
	background-color : #f5fbff;
	box-shadow : 0 0 2px #81c4ec;
}
input:disabled,
select:disabled,
textarea:disabled {
	cursor : not-allowed;
	background-color : #eeeeee;
}
::-webkit-input-placeholder {
	color : #cccccc;
}
::-moz-placeholder {
	color : #cccccc;
}
:-ms-input-placeholder {
	color : #cccccc;
}

/* --- for 2K or more pc --- 
@media screen and (min-width: 1220px) {
}
*/
/* --- for HD pc --- 
@media screen and (min-width: 1440px) and (max-width: 1979px) {
}
*/
/* --- for normal pc --- 
@media screen and (min-width: 1024px) and (max-width: 1439px) {
}
*/
/* --- for tablet --- */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	body {
		font-size : 1.55vw;
	}
}

/* --- for mobile --- */
@media screen and (max-width: 767px) {
	a[href^="tel:"] {
		pointer-events : unset;
	}
	input[type="text"],
	input[type="number"],
	input[type="email"],
	input[type="tel"],
	input[type="password"],
	select,
	textarea {
		width : 100%;
		max-width : 100%;
	}
}