:root {
	--c-indigo:#4E546B;
	--c-blueDark:#504FA0;
	--c-blue:#00A0E9;
	--c-bluePale:#9FD9F6;
	--c-grayDark: #4B5563;
	--c-gray: #8A9295;
	--c-grayPale: #D1D5DB;
	--c-red: #e42671;
	
	--header-h: 75px;
	--side: clamp(0.625rem, -1.356rem + 8.451vw, 6.25rem); /*10px-100px*/
	--side2: clamp(1.25rem, 0.036rem + 5.178vw, 6.25rem); /*20px-100px*/

	/*375-1440*/
	--f10: clamp(0.531rem, 0.508rem + 0.097vw, 0.625rem); /*8.5px-10px*/
	--f12: clamp(0.638rem, 0.61rem + 0.117vw, 0.75rem); /*10.2px-12px*/
	--f14: clamp(0.744rem, 0.712rem + 0.136vw, 0.875rem); /*11.9px-14px*/
	--f16: clamp(0.85rem, 0.814rem + 0.155vw, 1rem); /*13.6px-16px*/
	--f18: clamp(0.956rem, 0.915rem + 0.175vw, 1.125rem); /*15.3px-18px*/
	--f20: clamp(1.063rem, 1.017rem + 0.194vw, 1.25rem); /*17px-20px*/
	--prod: clamp(0.938rem, 0.827rem + 0.469vw, 1.25rem); /*15px-20px*/
	--f22: clamp(1.169rem, 1.119rem + 0.214vw, 1.375rem); /*18.7px-22px*/
	--f24: clamp(1.275rem, 1.22rem + 0.233vw, 1.5rem); /*20.4px-24px*/
	--f26: clamp(1.381rem, 1.322rem + 0.252vw, 1.625rem); /*22.1px-26px*/
	--f28: clamp(1.488rem, 1.424rem + 0.272vw, 1.75rem); /*23.8px-28px*/
	--f30: clamp(1.594rem, 1.525rem + 0.291vw, 1.875rem); /*25.5px-30px*/
	--f32: clamp(1.7rem, 1.627rem + 0.311vw, 2rem); /*27.2px-32px*/
	--f34: clamp(1.806rem, 1.729rem + 0.33vw, 2.125rem); /*28.9px-34px*/
	--f36: clamp(1.913rem, 1.831rem + 0.35vw, 2.25rem); /*30.6px-36px*/
	--f38: clamp(2.019rem, 1.932rem + 0.369vw, 2.375rem); /*32.3px-38px*/
	--f40: clamp(2.125rem, 2.034rem + 0.388vw, 2.5rem); /*34px-40px*/
	--f42: clamp(2.231rem, 2.136rem + 0.408vw, 2.625rem); /*35.7px-42px*/
	--f44: clamp(2.338rem, 2.237rem + 0.427vw, 2.75rem); /*37.4px-44px*/
	--f46: clamp(2.444rem, 2.339rem + 0.447vw, 2.875rem); /*39.1px-46px*/
	--f48: clamp(2.55rem, 2.441rem + 0.466vw, 3rem); /*40.8px-48px*/
	--f50: clamp(2.656rem, 2.542rem + 0.485vw, 3.125rem); /*42.5px-50px*/
	
	--ss: clamp(0.125rem, 0.081rem + 0.188vw, 0.25rem); /*4px-2px*/
	--s1: clamp(0.25rem, 0.162rem + 0.376vw, 0.5rem); /*8px-4px*/
	--s2: clamp(0.5rem, 0.324rem + 0.751vw, 1rem); /*16px-8px*/
	--s3: clamp(0.75rem, 0.486rem + 1.127vw, 1.5rem); /*24px-12px*/
	--s4: clamp(1rem, 0.648rem + 1.502vw, 2rem); /*32px-16px*/
	--s5: clamp(1.25rem, 0.81rem + 1.878vw, 2.5rem); /*40px-20px*/
	--s6: clamp(1.5rem, 0.972rem + 2.254vw, 3rem); /*48px-24px*/
	--s7: clamp(1.75rem, 1.134rem + 2.629vw, 3.5rem); /*56px-28px*/
	--s8: clamp(2rem, 1.296rem + 3.005vw, 4rem); /*64px-32px*/
	--s9: clamp(2.25rem, 1.458rem + 3.38vw, 4.5rem); /*72px-36px*/
	--s10: clamp(2.5rem, 1.62rem + 3.756vw, 5rem); /*80px-40px*/
	--s11: clamp(2.75rem, 1.782rem + 4.131vw, 5.5rem); /*88px-44px*/
	--s12: clamp(3rem, 1.944rem + 4.507vw, 6rem); /*96px-48px*/
	--s13: clamp(3.25rem, 2.106rem + 4.883vw, 6.5rem); /*104px-52px*/
	--s14: clamp(3.5rem, 2.268rem + 5.258vw, 7rem); /*112px-56px*/
	--s15: clamp(3.75rem, 2.43rem + 5.634vw, 7.5rem); /*120px-60px*/
	--s20: clamp(5rem, 3.239rem + 7.512vw, 10rem); /*160px-80px*/
	
	--2-1: 2;
	--3-1: 3;
	
	@media (max-width: 768px) {
		--3-1: 2;
	}
	
	@media (max-width: 599px) {
		--2-1: 1;
		--3-1: 1;
	}
	
}

/* !HTML5 elements
---------------------------------------------------------- */
header,
footer,
nav,
section,
aside,
article {
	display: block;
}

/* !Reseting
---------------------------------------------------------- */
* {
	box-sizing: border-box;
}

body {
	font-family: "Noto Sans JP", sans-serif;
	font-size: var(--f16);
	line-height: 1.8;
	font-weight: 400;
	/* color: var(--c-green); */
	/* background-color: var(--c-green); */
	-webkit-text-size-adjust: none;
	font-feature-settings: "palt";
}


body,
div,
pre,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
th,
td,
input,
a,
textarea,
select,
span,
nav,
section,
header,
figure {
	margin: 0;
	padding: 0;
}

input,
textarea,
select {
	/* margin: 0;
	font-size: 100%;
	appearance: none;
	-webkit-appearance: none;
	border: none;
	outline: none; */
}

label {
	cursor: pointer;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 100%;
}

fieldset,
img {
	border: 0;
}

img {
	vertical-align: top;
	max-width: 100%;
}

address,
caption,
cite,
code,
dfn,
th,
var {
	font-style: normal;
	font-weight: normal;
}

ol,
ul {
	list-style: none;
}

a{
user-select: none;
}

a,
input {
	outline: none;
}

a:hover {
	transition: 0.3s;
}

em {
	font-style: normal;
	display: inline-block;
}

figure {
	text-align: center;
	display: block;
}

figcaption {
	margin-top: 0.5em;	
}

hr {
	border: 0;
	border-bottom: 1px solid var(--c-gcc);
}

a {
	color: var(--c-grayDark);
	text-decoration: none;
	transition: opacity 0.3s;
}

a figure {
	overflow: hidden;
	will-change: transform;
	cursor: pointer;
}

a figure img {
	transition: .6s all;
}

a:hover figure img {
	transform: scale(1.1, 1.1);
	transition: .6s all;
	-webkit-transform: scale(1.1);
}

h1:has(+ *),
h2:has(+ *),
h3:has(+ *),
h4:has(+ *),
h5:has(+ *),
h6:has(+ *){
	margin-bottom: 1em;
}

h1 {
	font-size: var(--f40);
	font-weight: 500;
}

h2 {
	font-size: var(--f32);
	font-weight: 500;
}

h2[data-en] {
	text-align: center;
}

h2[data-en]::before {
	font-family: "Roboto Condensed", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	content: attr(data-en);
	display: block;
	color: var(--c-blue);
	font-size: var(--f28);
}

.large{font-size: var(--f24);}
.small{font-size: var(--f14);}