@charset "utf-8";

html {
	scroll-behavior : smooth;
}

body {
	overflow-x : hidden;
	font-family : "TBUDGothic R", -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(14px, 2.2vw, 20px);
	line-height : 1.75;
	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 {
	box-sizing : border-box;
	word-break : break-all;
}

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

p {
	line-height : 1.75;
}

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="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: 1980px) {
}
*/
/* --- 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) {
	input,
	select,
	textarea {
		max-width : 100%;
	}
}