:root {
	--color-text: #232323;
	--color-bg: #fff;
	--color-link: #fff;
	--color-red:#E2041B;
	--grid-item-ratio: 1.5;
	--grid-width: 100%;
	--grid-height: auto;
	--grid-gap: 2vw;
	--grid-columns: 4;
	--grid-inner-scale: 1;
	/****************font*******************/
	--base-line: 2em;
	--font-size-xs: 0.75rem;
	--font-size-sm: 0.8rem;
	--font-size-md: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.3125rem;
	--font-size-2xl: 1.5rem;
	--font-size-3xl: 2rem;
	--font-size-4xl: 2.652rem;
	--font-size-5xl: 6vw;
	--weight100: 100;
	--weight200: 200;
	--weight300: 300;
	--weight400: 400;
	--weight500: 500;
	--weight600: 600;
	--weight700: 700;
	--weight800: 800;
	--weight900: 900;
}
*,
*::before,
*::after {
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
}
* {
	margin: 0;
}
html {
	box-sizing: border-box;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}
html,
body {
	height: 100%;
	font-family: "Helvetica Neue",
		Arial,
		"Hiragino Kaku Gothic ProN",
		"Hiragino Sans",
		Meiryo,
		sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body {
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	box-sizing : border-box;
}
body>footer {
	position: sticky;
	top: 100vh;
}
footer {
	width: 100%;
}
img,
picture,
video,
canvas,
svg {
	border: none;
	image-rendering: -webkit-optimize-contrast;
}
input,
button,
textarea,
select {
	font: inherit;
}
button {
	border: none;
	background: transparent;
	cursor: pointer;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
	font-feature-settings: "palt";
	letter-spacing: 0.05em;
}
a {
	text-decoration: none;
}
ol,
ul {
	list-style: none;
	padding: 0;
}
section {
	width: 100%;
}
.break-keep {
	word-break: keep-all;
}
#root,
#__next {
	isolation: isolate;
}
::-webkit-scrollbar {
	background: #000;
	width: 5px;
	height: 5px;
  }
  ::-webkit-scrollbar-thumb {
	    background-color: var(--color-red);
  }
.w100 {
	width: 100%;
}
.center {
    text-align: center!important;
}
.left {
    text-align: left!important;
}
.right {
    text-align: right!important;
}
.mgt10 {
    margin-top: 10px!important;
}
.mgt20 {
    margin-top: 20px!important;
}
.mgt30 {
    margin-top: 30px!important;
}
.mgt40 {
    margin-top: 40px!important;
}
.mgt50 {
    margin-top: 50px!important;
}
.mgt60 {
    margin-top: 60px!important;
}
.mgt70 {
    margin-top: 70px!important;
}
.mgt80 {
    margin-top: 80px!important;
}
.mgt90 {
    margin-top: 90px!important;
}
.mgt100 {
    margin-top: 100px!important;
}
.pUad10 {
    padding: 10px 0!important;
}
.pUad20 {
    padding: 20px 0!important;
}
.pUad30 {
    padding: 30px 0!important
}
.pUad40 {
    padding: 40px 0!important;
}
.pUad50 {
    padding: 50px 0!important;
}
.pUad60 {
    padding: 60px 0!important;
}
.pUad70 {
    padding: 70px 0!important;
}
.pUad80 {
    padding: 80px 0!important;
}
.pUad90 {
    padding: 90px 0!important;
}
.pUad100 {
    padding: 100px 0!important;
}
.pdg0 {
    padding: 0!important;
}
.pdg10 {
    padding: 0 10px!important;
}
.pdl50 {
	padding-left: 50px;
}
.pdr50 {
	padding-right: 50px;
}
@media (360px <= width <= 640px ) {
	.pdl50 {
		padding-left: 30px;
	}
	.pdr50 {
		padding-right: 30px;
	}
	.pdg10 {
		padding: 0 10px!important;
	}
}