:root {
	--c-blue: #0059A9;
	--c-cyan:#67cffe;
	--c-lightblue: #EDF6FF;
	--c-red: #E50000;

	--c-gf5: #f5f5f5;
	--c-gcc: #CCCCCC;
	--c-g64: #646464;

	--swiper-pagination-color: var(--c-blue);
	--swiper-pagination-bullet-size: 8px;
	--swiper-pagination-bullet-width: 50px;
	--swiper-pagination-bullet-height: 8px;
	--swiper-pagination-bullet-inactive-color: #000;

	--swiper-pagination-bullet-inactive-opacity: 0.1;
	--swiper-pagination-bullet-opacity: 1;
	--swiper-pagination-bullet-horizontal-gap: 10px;
	--swiper-pagination-bullet-border-radius: 0;

	--header-h: 80px;
	--radius: 10px;
	--side: clamp(1rem, 0.648rem + 1.502vw, 2rem);
	/*32px-16px*/

	/*375-1440*/
	--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*/
	--s15: clamp(3.75rem, 2.43rem + 5.634vw, 7.5rem);
	/*120px-60px*/
	--s20: clamp(5rem, 3.239rem + 7.512vw, 10rem);
	/*160px-80px*/

	--f48: clamp(2.063rem, 1.732rem + 1.408vw, 3rem);
	/*48px-33px*/
	--f36: clamp(1.625rem, 1.405rem + 0.939vw, 2.25rem);
	/*36px-26px*/
	--f32: clamp(1.438rem, 1.239rem + 0.845vw, 2rem);
	/*32px-23px*/
	--f28: clamp(1.313rem, 1.158rem + 0.657vw, 1.75rem);
	/*28px-21px*/
	--f26: clamp(1.25rem, 1.118rem + 0.563vw, 1.625rem);
	/*26px-20px*/
	--f24: clamp(1.188rem, 1.077rem + 0.469vw, 1.5rem);
	/*24px-19px*/
	--f22: clamp(1.125rem, 1.037rem + 0.376vw, 1.375rem);
	/*22px-18px*/
	--f20: clamp(1.063rem, 0.996rem + 0.282vw, 1.25rem);
	/*20px-17px*/
	--f18: clamp(0.938rem, 0.871rem + 0.282vw, 1.125rem);
	/*18px-15px*/
	--f16: clamp(0.875rem, 0.831rem + 0.188vw, 1rem);
	/*16px-14px*/
	--f14: clamp(0.75rem, 0.706rem + 0.188vw, 0.875rem);
	/*14px-12px*/
	--f12: clamp(0.625rem, 0.581rem + 0.188vw, 0.75rem);
	/*12px-10px*/

	--2-1: 2;
	--3-1: 3;
	--3-2: 3;
	--4-2-1: 4;
	--4-2: 4;
	--6: 6;

	@media (max-width: 1000px) {
		--3-1: 2;
		--4-2-1: 2;
	}

	@media (max-width: 767px) {
		--2-1: 1;
		--3-1: 1;
		--3-2: 2;
		--4-2-1: 1;
		--6: 4;
		--header-h: 60px;
		--swiper-pagination-bullet-width: 8px;
	}

	@media (max-width: 600px) {
		--4-2: 2;
		--6: 3;
	}
}

.mt0 {
	margin-top: 0 !important;
}

.mts {
	margin-top: var(--ss) !important;
}

.mt1 {
	margin-top: var(--s1) !important;
}

.mt2 {
	margin-top: var(--s2) !important;
}

.mt3 {
	margin-top: var(--s3) !important;
}

.mt4 {
	margin-top: var(--s4) !important;
}

.mt5 {
	margin-top: var(--s5) !important;
}

.mt6 {
	margin-top: var(--s6) !important;
}

.mt7 {
	margin-top: var(--s7) !important;
}


.mt8 {
	margin-top: var(--s8) !important;
}

.mt9 {
	margin-top: var(--s9) !important;
}

.mt10 {
	margin-top: var(--s10) !important;
}

/*デフォルトマージン*/
.mt15,
.mt_def {
	margin-top: var(--s15) !important;
}

.mt20 {
	margin-top: var(--20) !important;
}


.mb0 {
	margin-bottom: 0 !important;
}

.mbs {
	margin-bottom: var(--ss) !important;
}

.mb1 {
	margin-bottom: var(--s1) !important;
}

.mb2 {
	margin-bottom: var(--s2) !important;
}

.mb3 {
	margin-bottom: var(--s3) !important;
}

.mb4 {
	margin-bottom: var(--s4) !important;
}

.mb5 {
	margin-bottom: var(--s5) !important;
}

.mb6 {
	margin-bottom: var(--s6) !important;
}

.mb7 {
	margin-bottom: var(--s7) !important;
}


.mb8 {
	margin-bottom: var(--s8) !important;
}

.mb9 {
	margin-bottom: var(--s9) !important;
}

.mb10 {
	margin-bottom: var(--s10) !important;
}

.mb15 {
	margin-bottom: var(--s15) !important;
}

.mb20 {
	margin-bottom: var(--20) !important;
}

.ml1 {
	margin-left: var(--s1) !important;
}

.ml2 {
	margin-left: var(--s2) !important;
}

.ml3 {
	margin-left: var(--s3) !important;
}

.f12 {
	font-size: var(--f12);
}

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

.f16 {
	font-size: var(--f16);
}

.f18 {
	font-size: var(--f18);
}

.f20 {
	font-size: var(--f20);
}

.f22 {
	font-size: var(--f22);
}

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

.f28 {
	font-size: var(--f28);
}

.f32 {
	font-size: var(--f32);
}

.f36 {
	font-size: var(--f36);
}

.f48 {
	font-size: var(--f48);
}

.large {
	font-size: 1.2em;
}

.larger {
	font-size: 1.6em;
}

.largest {
	font-size: 2em;
}

.small {
	font-size: 0.8em;
}

.smaller {
	font-size: 0.6em;
}

.smallest {
	font-size: 0.4em;
}

.al {
	text-align: left;
}

.ac {
	text-align: center;
}

.ar {
	text-align: right;
}

/* img.radius,
figure.radius img {
	border-radius: var(--s2);
} */

.bullets {
	display: grid;
	grid-template-columns: auto 1fr;
}

.bullets>* {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: span 2;
	column-gap: .25em;
}

.bullet {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: .25em;
}

.red {
	color: var(--c-red) !important;
}

.bold {
	font-weight: 600;
}

.scroll_x {
	padding-bottom: 20px;
	overflow-x: auto;
}

.tel {
	line-height: 1.3;
	font-family: "Inter", sans-serif;
	font-weight: 700;
}


[class^="icon-"]._turn45:before,
[class*=" icon-"]._turn45:before {
	transform: rotate(90deg);
}

/* --------------------------------------------------
	Resetting default margin and padding
-------------------------------------------------- */

/* !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.7;
	font-weight: 400;
	color: #000;
	-webkit-text-size-adjust: none;
	font-feature-settings: "palt";
	letter-spacing: 0.1em;
}


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,
input {
	outline: none;
}

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

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

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

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);
}


/* link
------------------------------------------------ */
a {
	color: #000;
	text-decoration: none;
	transition: opacity 0.3s;
}

a.link {
	color: var(--c-blue);
	font-weight: 600;
	cursor: pointer;
	position: relative;
}

a.link:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.inner {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--side);
}

@media (max-width: 767px) {
	.sp_hidden {
		display: none;
	}
}

/* ===================================================================================
header
====================================================================================== */


/* header
----------------------------------------------- */
#header {
	text-align: center;
	position: fixed;
	background: #fff;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 5000;
	line-height: 1.3;
	height: var(--header-h);
}

#header ._inr {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	width: 96%;
	margin-inline: auto;
}

#header a {
	display: block;
}


#header ._logo,
#footer ._logo {
	display: grid;
	place-content: center;
	max-width: none;
	/* padding-inline: var(--s8) */
}

#header ._logo img,
#footer ._logo img {
	display: inline-block;
	/* padding-top: 3px; */
	height: 40px;

	/*SP*/
	@media (max-width: 767px) {
		height: 30px;
	}
}

#header ._logo a,
#footer ._logo a {
	padding: 5px 2vw;
}

#header ._logo {
	padding-top: 5px;
	margin-bottom: 0;
}

#footer ._logo {
	padding-bottom: 5px;
}


#header li a[href^="http"]::after {
	font-family: sanseki;
	content: "\e824";
	margin-left: 0.25em;
	color: var(--c-blue);
}

.after-none::after {
	content: "";
	display: none;
}


#header li {
	position: relative;
}

#header ._menu {
	text-align: left;
	display: none;
	transition: 0.3s height ease 0s, 0.3s padding ease 0s;
}

#header ._submenu {
	transition: 0.3s height ease 0s, 0.3s padding ease 0s;
}

#header ._submenu li a {
	position: relative;
	padding-left: 1.5em;
}

#header ._submenu li.active a {
	color: var(--c-blue);
}

#header ._submenu li a::before {
	content: "";
	position: absolute;
	top: 52%;
	left: 0;
	transform: translateY(-50%);
	font-family: sanseki;
	content: "\e82a";
	color: var(--c-blue);
}

#header ._menu li._tit>a {
	font-weight: bold;
	display: block;
}



#header ._menu li.active>a {
	color: var(--c-blue);
}


#header .logo_info {
	display: flex; align-items: center;
}

#header .logo_info_text {
	text-align: left; font-size: 0.7em;

	/*SP*/
	@media (max-width: 767px) {
		font-size: 0.58em;
	}
}

/* .s_important ._list {
	height: 2em;
	overflow: hidden;
	transition: height 0.5s ease;
}

.s_important ._list.open{
	height: auto;
} */




/*PC*/
@media (min-width: 768px) {

	#header ._menu {
		padding-inline: var(--s10);
	}

	.is-menuClose #header ._menu {
		flex-grow: 2;
		display: block;
	}

	.is-menuClose #header ._menu>ul {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.is-menuClose #header ._submenu ul {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 2em;
	}

	.is-menuClose #header ._menu li a {
		display: inline-block;
		padding: 1em 1em;
		position: relative;
	}
	
	#header ._menu li a:hover {
		color: var(--c-blue);	
	}
	
	#header ._submenu li a:hover {
		text-decoration: underline;
		text-underline-offset: 6px;
	}


	.is-menuClose #header ._submenu {
		background-color: #fff;
		position: fixed;
		left: 0;
		z-index: 500;
		width: 100%;
		box-shadow: 0px 12px 10px 0 rgba(0, 0, 0, 0.05);
		overflow: hidden;
		/* transition: 0.3s height ease 0s, 0.3s padding ease 0s; */
	}

	.is-menuClose #header ._menu li:hover>._submenu {
		padding-top: 80px;
		padding-bottom: 150px;
	}


	.is-menuClose #header ._submenu ._s_inr {
		width: 100%;
		max-width: 1000px;
		margin-inline: auto;
		display: grid;
		grid-template-columns: 1fr 3fr;
		align-items: center;
	}

	.is-menuClose #header ._menu>li:hover>._submenu ul {
		display: flex;
		column-gap: 3em;
	}

	.is-menuClose #header ._submenu h4 {
		font-size: var(--f20);
	}

	.is-menuClose #header ._submenu h4::after {
		color: var(--c-gcc);
		content: attr(data-en);
		display: block;
		font-size: var(--f12);
	}
	
	#footer a:hover {
		color: var(--c-blue);
		text-decoration: underline;
		text-underline-offset: 4px;
	}
	
	#footer .active a {
		color: var(--c-blue);
	}

	.is-menuClose #header ._submenu>li {
		break-inside: avoid;
	}

	.is-menuClose #header ._menu li._tit>a {
		display: none;
	}

	.is-menuClose #header ._menu li._tit:not(.-glnv) {
		display: none;
	}

	.is-menuClose #header ._menu li._tit.-glnv>a::after {
		content: "";
		position: absolute;
		bottom: 2px;
		left: 12%;
		width: 0%;
		height: 3px;
		border-radius: 4px;
		background-color: var(--c-blue);
		transition: width .2s ease 0s;
	}

	.is-menuClose #header ._menu li._tit.-glnv>a:hover::after,
	.is-menuClose #header ._menu li._tit.-glnv.current>a::after {
		content: "";
		position: absolute;
		bottom: 2px;
		left: 12%;
		width: 76%;
		height: 3px;
		border-radius: 4px;
		background-color: var(--c-blue);
	}

	.is-menuOpen {
		overflow: hidden;
	}

	.is-menuOpen #header ._menu {
		display: block;
		background-color: #fff;
		position: fixed;
		left: 0;
		top: 80px;
		z-index: 500;
		width: 100%;
		padding-block: var(--s10);
		box-shadow: 0px 12px 10px 0 rgba(0, 0, 0, 0.05);
		transition: 0.3s height ease 0s, 0.3s padding ease 0s;
	}

	/* .is-menuClose #header ._menu >ul{
		height: 0;	
	} */

	.is-menuOpen #header ._menu>ul {
		columns: 5;
		/* height: auto;	 */
	}

	.is-menuOpen #header ._menu ._tit.-break {
		break-before: column;
	}

	.is-menuOpen #header ._menu ._tit>a,
	.is-menuOpen #header ._menu ._tit>h5 {
		padding-block: .8em;
		font-size: var(--f18);
	}

	.is-menuOpen #header ._menu ._tit ul a {
		padding-block: .5em;
	}

	.is-menuOpen #header h4 {
		display: none;
	}

}

/*PC-large*/
@media (min-width: 1201px) {
	.is-menuClose #header ._menu li._tit>a {
		display: block;
	}
}


/*SP*/
@media (max-width: 767px) {
	#header ._menu {
		position: fixed;
		top: var(--header-h);
		left: 0;
		display: none;
		background-color: #fff;
		width: 100%;
		height: calc(100% - var(--header-h));
		overflow-y: scroll;
	}

	.is-menuOpen #header ._menu {
		display: block;
	}

	#header ._inr {
		grid-template-columns: 1fr 2fr 70px;
	}

	#header ._submenu h4 {
		display: none;
	}

	.is-menuOpen #header ._menu .current ._submenu {
		height: auto !important;
	}

	/* #header ._inr .inner {
		margin: 0;
		padding: 0;
		overflow-y: scroll;
		height: 100%;
	} */

	#header ._menu ul {
		width: 100%;
		/* padding-left: .5em; */
		/* position: absolute;
		top: 50%;
		left: 0;
		background-color: #fff; */
	}

	#header li:has(ul) {
		/* background-color: var(--c-palegray); */
	}

	#header ul.inner>li {
		background-color: var(--c-menu);
	}

	#header li {
		background-color: #fff;
		/* border-top: 1px solid var(--c-blue);	
		border-left: 1px solid var(--c-blue);	 */
	}

	#header ._menu ._tit>a,
	#header ._menu li>h5 {
		font-weight: 600;
	}

	#header ._menu li>a,
	#header ._menu li>h5 {
		display: block;
		padding: .5em var(--s2) .5em var(--s10);
		position: relative;
	}
	


	#header ._menu li a::before {
		content: "";
		position: absolute;
		top: 52%;
		left: var(--s4);
		transform: translateY(-50%);
		transform-origin: center; 
		font-family: sanseki;
		content: "\e82a";
		transition: 0.3s transform ease 0s;
	}
	
	/* #header ._menu li._tit.is-Open>a {
		color: red;	
	} */
	
	#header ._menu li._tit.current>a::before,
	#header ._menu li._tit.is-Open>a::before{
		transform: rotate(90deg) translateX(-50%) translateY(10%);
	}

	#header ._menu ._tit>a {
		background-color: var(--c-blue);
		color: #fff;
		border-bottom: 1px solid #fff;
	}


	#header ._menu li._tit.active>a {
		color: #fff;
	}

	#header ._menu>ul>li>a,
	#header ._menu>ul>li>span {
		font-size: var(--f20);
		font-weight: 600;
	}

	#header ._inr ul.inner>li:not(.current) ul {
		display: none;
	}

	/* #header ._inr>ul.inner>li.current>ul>li.active{
	} */

	#header ._inr>ul.inner>li.current>ul>li:not(.current) ul {
		display: none;
	}



}

#header ._bt {
	display: grid;
	place-content: center;
}

.menuBtn {
	width: 60px;
	height: 60px;
	display: block;
	/* width: var(--header-inner);
	height: var(--header-inner); */
	cursor: pointer;
	position: relative;
	background-color: #fff;
	border: none;
	border-radius: 0;
}

/* .menuBtn::after {
	color: var(--c-blue);
	font-weight: bold;
	font-size: 10px;
	content: "MENU";
	position: absolute;
	bottom: 5px;
	left: 50%;
	transform: translateX(-50%);
} */

.menuBtn i {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%);
	width: 24px;
	height: 2px;
	background-color: #000;
	border-radius: 100px;
	transition: .3s;
	transition-property: top, left, transform;
}

.menuBtn i:nth-of-type(2) {
	top: calc(50% - 10%);
}

.menuBtn i:nth-of-type(3) {
	top: calc(50% + 10%);
}

.is-menuOpen .menuBtn i:nth-of-type(1),
.is-menuOpen .menuBtn i:nth-of-type(3) {
	top: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
}

.is-menuOpen .menuBtn i:nth-of-type(2) {
	top: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
}

.menuBtn span {
	position: absolute;
	bottom: 10%;
	left: 0;
	color: var(--c-red);
	font-size: 10px;
	text-align: center;
	display: block;
	width: 100%;
}



/* ===================================================================================
FOOTER
====================================================================================== */

/* footer
----------------------------------------------- */
#footer {
	text-align: center;
	padding-top: var(--s5);
	padding-bottom: var(--s8)
}

#footer ._inr {
	width: 96%;
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1em 4em;

	/*SP*/
	@media (max-width: 1000px) {
		justify-content: center;
	}
}

#footer ._box1 {
	display: flex;
	flex-wrap: wrap;
	gap: 1em 2em;
	align-items: center;

	/*SP*/
	@media (max-width: 767px) {
		justify-content: center;
	}

}

#footer ._box1 ul {
	display: flex;
	justify-content: center;
	gap: 2em;
	align-items: center;
}

#footer ._copyright {
	font-size: var(--f12);
	font-family: "Inter", sans-serif;
	letter-spacing: 0;
}

#gl_float {
	position: fixed;
	bottom: var(--s2);
	right: 2vw;
	z-index: 100;
}

.totop {
	width: 60px;
	height: 60px;
	display: grid;
	place-content: center;
	opacity: 0;
	background-color: var(--c-blue);
	color: #fff;
	border-radius: 100px;
	line-height: 1;
	transition: .5s all ease 0s;
	border: 1px solid var(--c-blue);
	font-family: "Inter", sans-serif;
	letter-spacing: 0;
	font-weight: 500;
}

.totop:hover{
	background-color: #fff;
	color: var(--c-blue);
}

.totop::before{
	font-family: sanseki;
	content:"\e82a";
	transform: rotate(-90deg);
	margin-top: -10px;
	font-size: 1.3em;
	transition: 0.3s margin ease 0s;
}

.totop:hover::before{
	margin-top: -15px;
}

.totop.is-show {
	cursor: pointer;
	opacity: 1;
}


/* ===================================================================================
 js-tabs
 ====================================================================================== */

/* .js-tabs>* {
	opacity: .6;
}

.js-tabs>*.is-active {
	opacity: 1;
}

.js-tab_conts>* {
	display: none;
}

.js-tab_conts>*.is-active {
	display: block;
} */

/* ===================================================================================
h2..h6
====================================================================================== */

*[data-en] {
	font-weight: 600;
	position: relative;
}

*[data-en]::after {
	color: var(--c-gcc);
	content: attr(data-en);
	display: block;
	font-size: var(--f16);
	padding-left: 0.1em;
	letter-spacing: 0;
}

h2 {
	font-size: var(--f28);
}

h3 {
	font-size: var(--f24);
}

h4 {
	font-size: var(--f22);
}

h5 {
	font-size: var(--f20);
}

h6 {
	font-size: var(--f18);
}

h1:has(+ *),
h2:has(+ *),
h3:has(+ *) {
	margin-bottom: .8em;
}

h4:has(+ *),
h5:has(+ *),
h6:has(+ *) {
	margin-bottom: .3em;
}


.hd_line {
	padding-bottom: .5em;
	position: relative;
	border-bottom: 1px solid var(--c-gcc);
}


/* ===================================================================================
BUTTON
====================================================================================== */

.bt_st1 {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3);
	margin-top: var(--s3);
}

.bt_st1.ac {
	justify-content: center;
}

.bt_st1.ar {
	justify-content: flex-end;
}

.bt_st1 a,
.bt_st1 ._bt {
	display: inline-block;
	gap: 2em;
	padding: 1em 3em 1em 2em;
	border-radius: 100px;
	background-color: var(--c-blue);
	border: 2px solid var(--c-blue);
	color: #fff;
	font-weight: 600;
	line-height: 1.2;
	position: relative;
	width: 300px;
	max-width: 100%;
	text-align: center;
	cursor: pointer;
	z-index: 1;
	transition: .3s;
	overflow: hidden;
}

.bt_st1 a::before,
.bt_st1 ._bt::before {
	content: "";
	width: 105%;
	height: 105%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	background-color: #fff;
	color: var(--c-blue);
	transition: transform ease .3s;
	transform-origin: 100% 50%;
	transform: scaleX(0);
}

.bt_st1.-white a::before,
.bt_st1.-white ._bt::before {
	background-color: var(--c-lightblue);
}


.bt_st1 a:hover,
.bt_st1 ._bt:hover {
	color: var(--c-blue);
}

.bt_st1.-gray a:hover,
.bt_st1.-gray ._bt:hover {
	color: var(--c-g64);
}

.bt_st1 a:hover::before,
.bt_st1 ._bt:hover::before {
	transform-origin: 0% 50%;
	transform: scaleX(1);
}

.bt_st1 a._reverse {
	padding: 1em 2em 1em 3em;
}

.bt_st1 a._reverse::after {
	right: auto;
	left: .7em;
	transform: translateY(-50%) rotate(180deg);
}

.bt_st1.-free a,
.bt_st1.-free ._bt {
	width: auto;
}


.bt_st1 a::after,
.bt_st1 ._bt::after {
	font-family: sanseki;
	content: "\e82a";
	font-weight: normal;
	font-size: 1.6em;
	position: absolute;
	top: 51%;
	right: .7em;
	transform: translateY(-50%);
}

.bt_st1.-white a {
	background-color: #fff;
	color: var(--c-blue);
}

.bt_st1.-gray a,
.bt_st1.-gray ._bt {
	background-color: var(--c-g64);
	border-color: var(--c-g64);
	max-width: 300px;
	
	/*SP*/
	@media (max-width: 767px) {
		margin-inline: auto;
	}
}


.bt_st1.-small a,
.bt_st1.-small ._bt {
	padding: .5em 3em .5em 2em;
	width: 250px;
	max-width: 100%;
}



a.link::after,
.bt_st1::after,
.bt_st1 ._bt::after {
	font-family: sanseki;
}

a.link::after {
	margin-inline: 0.25em;
}

a.link[href^="http"]::after,
.bt_st1 a[href^="http"]::after,
.bt_st1 ._bt[href^="http"]::after {
	content: "\e824";
}

a.link[href$=".pdf"]::after,
.bt_st1 a[href$=".pdf"]::after,
.bt_st1 ._bt[href$=".pdf"]::after {
	content: "\e82b";
}


.bt_st1 ._bt.-close::after {
	content: "\e827";
}



/* modal
======================================================================================*/

.modal {
	display: none;
	position: fixed;
	z-index: 5000;
	left: 0;
	top: 0;
	height: 100dvh;
	width: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(10px);
}

.modal .modal-box {
	background-color: #fff;
	max-width: 900px;
	width: 90%;
	max-height: 90dvh;
	animation-name: modalopen;
	animation-duration: 1s;
	padding: var(--s6);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-height: 95dvh;
	/* overflow: scroll; */

	/* overflow-y: hidden; */
}

.modal ._inr {
	overflow: scroll;
	max-height: calc(95dvh - (var(--s6))*2);
}

/* .modal ._scroll{
	border: 1px solid green;
	overflow: hidden;
} */

/* .modal.-form .modal-box {
  max-width: 1200px;
  height: 95dvh;
}

.modal.-form .modal-box > div {
	border: 1px solid red;
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
} */

/* .modal .modal-box iframe {
  width: 100%;
  height: 100%;
} */

.modalClose {
	position: absolute;
	top: var(--s1);
	right: var(--s1);
	width: var(--s5);
	height: var(--s5);
	cursor: pointer;
	/* background-color: #fff; */
}

.modalClose::before,
.modalClose::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 2px;
	background-color: var(--c-blue);
	top: 50%;
	right: 0;
	transform: rotate(45deg);
	transform-origin: center;
}

.modalClose::after {
	transform: rotate(-45deg);
}

/*SP*/
/* @media screen and (max-width: 768px) {
  .modal .modal-box {
	padding: var(--w20);
	padding-top: 40px;
	width: 96%;
	max-height: 96dvh;
  }
  .modal.-modal_book .modal-box  {
	overflow: auto;
	overscroll-behavior-y: contain;
  }
} */


/* ===================================================================================
スライダー
====================================================================================== */
/* .s_slider{
	background-color: var(--c-blue);
	padding-top: var(--s6);
	padding-bottom: var(--s6);
	position: relative;
	overflow: hidden;
}

#b_top .s_slider{
	padding-top: var(--s10);
} */

.swiper .swiper-slide {
	height: auto;
}

.swiper .swiper-slide-item {
	height: 100%;
}


.js-swiper-top img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 3 / 1;
	width: 100%;
	height: auto;

	/*SP*/
	@media (max-width: 767px) {
		aspect-ratio: 1 / 1;
		/*aspect-ratio: 1.5 / 1;*/
	}
}

.swiper .inner {
	position: relative;
	height: 3em;
	/*height: 5em;*/
}

.swiper .swiper-pagination {
	left: var(--side);
	text-align: left;
	bottom: 0;
}

.js-swiper-1 {
	padding-block: var(--s8);
	position: relative;
}



.js-swiper-1 .swiper-slide,
.box_select ._target li {
	text-align: center;
	border: 1px solid var(--c-gcc);
	border-radius: var(--radius);
	overflow: hidden;
}

.js-swiper-1 a,
.box_select ._target li > * {
	display: block;
	text-align: left;
	overflow: hidden;
}

.box_select ._target li > a {
	cursor: pointer;
}

.js-swiper-1 img,
.box_select ._target img {
	object-fit: cover;
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	border-top-left-radius: calc(var(--radius) - 2px);
	border-top-right-radius: calc(var(--radius) - 2px);
}

.js-swiper-1.-half img {
	aspect-ratio: 2 / 1;
	width: 100%;
	height: auto;
}

.js-swiper-1 h5,
.box_select ._target h5 {
	padding: 0.5em 2.5em 0.3em var(--s3);
	margin-bottom: 0;
	position: relative;
}

.js-swiper-1 a h5::after,
.box_select ._target a h5::after {
	font-family: sanseki;
	position: absolute;
	top: 52%;
	right: .5em;
	color: var(--c-blue);
	font-weight: normal;
	transform: translateY(-50%);
	font-size: 1.2em;
	content: "\e82a";
}

.js-swiper-1 a.modalOpen h5::after,
.box_select ._target a._search h5::after {
	content: "\e826";
}

.js-swiper-1 a[href$=".pdf"] h5::after,
.box_select ._target a[href$=".pdf"] h5::after {
	content: "\e82b";
}

.js-swiper-1 a[href^="http"] h5::after,
.box_select ._target a[href^="http"] h5::after {
	content: "\e824";
}

.js-swiper-1 ._cate,
.box_select ._target ._cate {
	padding: 0 var(--s3) 1em;
	color: var(--c-gcc);
}

/* ===================================================================================
box_select
====================================================================================== */

.box_select ._selector ul {
	display: flex;
	gap: 3em;
}

.box_select ._selector li {
	position: relative;
	cursor: pointer;
	padding-bottom: 0.25em;
}

.box_select ._selector li::after {
	transition: width 0.3s;
	content: "";
	position: absolute;
	width: 0%;
	height: 2px;
	background-color: var(--c-blue);
	bottom: 0%;
	left: 0%;
}

.box_select ._selector li.active::after {
	width: 100%;
}

.box_select ._target {
	margin-top: var(--s6);
}

.box_select ._target ul {
	display: grid;
	grid-template-columns: repeat(var(--3-2), 1fr);
	gap: var(--s3);
}

.box_select ._target li {
	display: none;
}

.box_select ._target li.show {
	display: block;
}

/* ===================================================================================
メイン内header
====================================================================================== */
.box_header {
	padding-block: var(--s10);
}

.box_header *[data-en] {
	font-size: var(--f36);
}

.box_header.-st1 ._inr {
	display: grid;
	gap: var(--s3);
}

.box_header.-st1 figure img {
	width: 100%;
	height: 60vw;
	max-height: 300px;
	object-fit: cover;
}

/* ===================================================================================
main
====================================================================================== */
main *+section,
main *+article {
	margin-top: var(--s15);
}
main *+aside {
	margin-top: var(--s6);
}

main hr {
	margin-block: var(--s15);
}

/* ===================================================================================
wingボックス
====================================================================================== */

.box_wingR ._inr {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s4) var(--s8);

	@media (min-width: 768px) {
		margin-right: calc(50% - 50vw);
	}

	/*SP*/
	@media (max-width: 767px) {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.box_wingR figure {
		margin-right: calc(50% - 50vw);
	}
}

.box_wingR figure img {
	border-radius: var(--radius) 0 0 var(--radius);
	width: 100%;
	height: min(25vw, 350px);
	/*min-height: 100%;*/
	object-fit: cover;

	/*SP*/
	@media (max-width: 767px) {
		height: min(50vw, 250px);
	}
}

.box_wingL ._inr {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s4) var(--s8);

	@media (min-width: 768px) {
		margin-left: calc(50% - 50vw);
	}

	/*SP*/
	@media (max-width: 767px) {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 768px) {
	.box_wingL ._inr :first-child {
		grid-column: 2 / 3;
		grid-row: 1 /2;
	}

	.box_wingL ._inr :last-child {
		grid-column: 1 / 2;
		grid-row: 1 /2;
	}
}

@media (max-width: 767px) {
	.box_wingL figure {
		margin-left: calc(50% - 50vw);
	}
}

.box_wingL figure img {
	border-radius: 0 var(--radius) var(--radius) 0;
	width: 100%;
	height: min(25vw, 350px);
	min-height: 100%;
	object-fit: cover;

	/*SP*/
	@media (max-width: 767px) {
		height: min(50vw, 250px);
	}
}


/* ===================================================================================
box_photoLink デフォルトは2-1
====================================================================================== */

.box_photoLink {
	display: grid;
	grid-template-columns: repeat(var(--2-1), 1fr);
	gap: var(--s4);
}

.box_photoLink *[data-en] {
	font-size: var(--f28);
	position: relative;
}

/* .box_photoLink *[data-en]::before {
	font-family: sanseki;
	content: "\e82a";
	position: absolute;
	right: 0;
	top: 0.4em;
	color: var(--c-blue);
	display: grid;
	place-content: center;
	background-color: var(--c-blue);
	color:#fff;
	width: 28px;
	height: 28px;
	border-radius: 100px;
	line-height: 1;
	font-weight: normal;
} */

.box_photoLink *[data-en]::before {
	font-family: sanseki;
	content: "\e829";
	position: absolute;
	right: 0;
	top: 0.4em;
	color: var(--c-blue);
	display: grid;
	place-content: center;
	color: var(--c-blue);
	line-height: 1;
	font-weight: normal;
}

.box_photoLink a[href^="http"] *[data-en]{
	display: inline-block;
	padding-right: 1.5em;
}

.box_photoLink a[href^="http"] *[data-en]::before {
	content: "\e824";
}

.box_photoLink figure {
	border-radius: var(--radius);
}

.box_photoLink figure>img {
	object-fit: cover;
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
}

.box_photoLink figure+* {
	margin-top: var(--s3);
}

.box_photoLink.-g31 {
	grid-template-columns: repeat(var(--3-1), 1fr);
}

.box_photoLink.-g31 figure>img {
	aspect-ratio: 4 / 3.4;
	width: 100%;
	height: auto;
	/*SP*/
	@media (max-width: 767px) {
		aspect-ratio: 16 / 9;
	}
}

.box_photoLink a:hover h3{
	color: var(--c-blue);
}



/* ===================================================================================
box_grid デフォルトは2-1
====================================================================================== */

.box_grid {
	display: grid;
	grid-template-columns: repeat(var(--2-1), 1fr);
	gap: var(--s4);
}

.box_grid figure>img {
	border-radius: var(--radius);
	object-fit: cover;
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
}

.box_grid figure+* {
	margin-top: var(--s3);
}

.box_grid.-textL {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: var(--s6);

	/*SP*/
	@media (max-width: 767px) {
		grid-template-columns: 1fr;
	}
}

.box_grid.-textR {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: var(--s6);

	/*SP*/
	@media (max-width: 767px) {
		grid-template-columns: 1fr;
	}
}

.box_grid.-textR ._tit,
.box_grid.-textL ._tit {
	font-size: var(--f24);
}

@media (min-width: 768px) {
	.box_grid.-textR :first-child {
		grid-column: 2 / 3;
		grid-row: 1 /2;
	}

	.box_grid.-textR :last-child {
		grid-column: 1 / 2;
		grid-row: 1 /2;
	}
}

.box_grid.-sideFig {
	grid-template-columns: 1fr 2fr 1fr;
	gap: var(--s8);

	/*SP*/
	@media (max-width: 767px) {
		grid-template-columns: 1fr 1fr;
		gap: var(--s10) var(--s4);
	}
}

.box_grid.-sideFig figure>img {
	border-radius: var(--radius);
	object-fit: cover;
	aspect-ratio: 2 / 3;
	width: 100%;
	height: auto;
}


.box_grid.-sideFig figure:first-child>img {
	/*margin-top: 10vw;*/
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.box_grid.-sideFig figure:last-child>img {
	/*margin-bottom: 10vw;*/
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.box_grid.-leftTitle {
	grid-template-columns: 1fr 5fr;

	/*SP*/
	@media (max-width: 767px) {
		grid-template-columns: 1fr;
	}
}

/*SP*/
@media (max-width: 767px) {
	.box_grid.-sideFig>div {
		grid-column: 1 / 3;
		grid-row: 1 / 2;
		padding-inline: var(--side);
	}

	.box_grid.-sideFig figure:first-child {
		grid-column: 1 / 2;
		grid-row: 2 / 3;
	}

	.box_grid.-sideFig figure:last-child {
		grid-column: 2 / 3;
		grid-row: 2 / 3;
	}
}


.box_grid.-products figure img {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
}

.box_grid.-products {
	grid-template-columns: 1fr 1.3fr;

	/*SP*/
	@media (max-width: 767px) {
		grid-template-columns: 1fr;
	}
}

.box_grid.-products ._cate {
	color: var(--c-gcc);
}

/* ===================================================================================
box_gridLink
====================================================================================== */
.box_gridLink {
	display: grid;
	grid-template-columns: repeat(var(--2-1), 1fr);
	gap: var(--s3);
}

.box_gridLink>* {
	border: 1px solid var(--c-gcc);
	padding: var(--s2);
	border-radius: var(--radius);
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap: var(--s2);
	align-items: center;
	position: relative;
}

.box_gridLink>*:after {
	font-family: sanseki;
	content: "\e829";
	position: absolute;
	top: 50%;
	right: .5em;
	color: var(--c-blue);
	transform: translateY(-50%);
	font-size: var(--f36);
}

.box_gridLink figure {
	border-radius: var(--radius);
}

.box_gridLink figure img {
	object-fit: cover;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius);
	width: 100%;
	height: auto;
}


/* ===================================================================================
.s_frame フレーム類
====================================================================================== */
.box_round {
	padding: var(--s4);
	border-radius: var(--s2);
	background-color: var(--c-gf5);
	/* border: 5px solid #fff; */
}

.box_round ._tit {
	font-size: var(--f28);
}

.box_round *[data-en] {
	font-size: var(--f24);
}

.box_round .box_photoLink ._tit {
	font-size: var(--f24);
}

.box_frame {
	padding: var(--s4);
	border: 5px solid var(--c-gf5);
}

.box_frame ._tit {
	font-size: var(--f28);
}

.box_frame *[data-en] {
	font-size: var(--f24);
}

.box_frame .box_photoLink ._tit {
	font-size: var(--f24);
}



.box_wideFrame {
	padding-block: var(--s8);
	background-color: var(--c-blue);
	color: #fff;
}

.box_wideFrame .box_frame {
	background-color: #fff;
	border: none;
	color: #000;
}

.box_wideFrame ._tit {
	font-size: var(--f24);
}

/* ===================================================================================
.bread
====================================================================================== */

.bread {
	padding-top: var(--s15);
	font-size: var(--f14);
	display: inline-block;
}

.bread ul {
	display: flex;
	flex-wrap: wrap;
}

.bread li+li {
	margin-left: 1em;
}

.bread a {
	color: var(--c-blue);
}

.bread a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.bread li>*::after {
	font-family: sanseki;
	content: "\e82a";
	margin-left: 1em;
	color: var(--c-g64);
	display: inline-block;
}

.bread li a:hover::after {
	text-decoration: none!important;
}

.bread li>a {
	/* color: #fff; */
}

.bread li:last-child>a {
	color: inherit;
	cursor: default;
	pointer-events: none;
}

.bread li:last-child ::after {
	display: none;
}


/* ===================================================================================
.nav_pagelink
====================================================================================== */

.nav_pagelink {
	position: sticky;
	z-index: 500;
	top: 0;
	background-color: #fff;
	text-align: left;
	letter-spacing: 0;
	font-size: var(--f18);
	padding-bottom: 10px;
}

.nav_pagelink ul {
	display: flex;
	justify-content: space-between;
	font-weight: 600;
	gap: var(--s2);
	/* margin-inline: auto; */
}

.nav_pagelink ul li {
	flex-grow: 2;
}

.nav_pagelink ul li a {
	line-height: 1.3;
	display: block;
	padding: .8em var(--s4) .8em 0;
	/* display: grid; */
	/* place-content: center; */
	position: relative;
	height: 100%;
	border-bottom: 1px solid var(--c-gcc);
}

.nav_pagelink ul li a::after {
	font-family: sanseki;
	content: "\e82a";
	position: absolute;
	top: 50%;
	right: .25em;
	transform: translateY(-50%) rotate(90deg);
	color: var(--c-blue);
}

.nav_pagelink ul li a[href$=".pdf"]::after {
	content: "\e82b";
	transform: translateX(-50%);
}

/* ===================================================================================
table
====================================================================================== */

.table_st1 {
	width: 100%;
	/*16px-10px*/
}

.table_st1 th,
td {
	padding: 1em;
	border: 1px solid var(--c-gcc);
	min-width: 5em;

	/*SP*/
	@media (max-width: 767px) {
		display: block;
	}
}

.table_st1 th {
	background-color: #EDF6FF;
}

.table_st1 th.first {
	border-top: 5px solid var(--c-blue);
}

.table_st1 td.first {
	text-align: left;
	border-top-width: 5px;
	background-color: #fff;

	/*SP*/
	@media (max-width: 767px) {
		border-top-width: 1px;
	}
}


/* ===================================================================================
box_news
====================================================================================== */
.box_news li > * {
	border-bottom: 1px solid var(--c-gcc);
	padding: 17px 22px;
	display: grid;
	align-items: center;
	grid-template-columns: 7em auto 1fr;
	gap: .2em 1.2em;

	@media (max-width: 767px) {
		grid-template-columns: 7em auto;
	}
}

.box_news li:first-child > * {
	border-top: 1px solid var(--c-gcc);
}


.box_news li a:hover ._tit{
	color: var(--c-blue);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/*news_list*/
.box_news .news_list {
	flex: 1;
}

.box_news .news_tag {
	display: block;

	@media (max-width: 767px) {
		grid-column: 2 / 3;
		grid-row: 1 / 2;
	}
}

.news_tag span {
	padding: 5px;
	display: inline-grid;
	width: 10em;
	place-content: center;
	font-size: var(--f14);
	line-height: 1.3;
	color: var(--c-blue);
	background-color: var(--c-lightblue);
	border: 1px solid var(--c-blue);
	border-radius: 100px;
}

.news_date {
	font-weight: 500;
	font-family: "Inter", sans-serif;

	@media (max-width: 767px) {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
	}
}

.box_news ._tit {
	font-size: 14px;

	@media (max-width: 767px) {
		grid-column: 1 / 3;
		grid-row: 2 / 3;
	}
}

/* ===================================================================================
article_news
====================================================================================== */
/* .article_news{
	margin-top: var(--s10);
} */

.article_news header {
	padding-bottom: var(--s4);
	margin-bottom: var(--s4);
	border-bottom: 1px solid var(--c-gcc);
}

.article_news header>div {
	display: flex;
	gap: 1em;
}

.article_news ._contents p {
	margin-top: 1em;
}

.article_news ._contents figure {
	margin-top: var(--s6);
	margin-bottom: var(--s6);
}

.article_news ._contents figure img {
	border-radius: var(--radius);
	max-width: 600px;
	object-fit: cover;
	aspect-ratio: 3 / 2;
	width: 100%;
	height: auto;
}

/* ===================================================================================
Youtube
====================================================================================== */
.youtube {
	width: 100%;
	max-width: 640px;
	padding: 0;
	margin: 0 auto;
	box-sizing: border-box;
}

.youtube .ty_inner {
	padding-top: 56.25%;
	position: relative;
	height: 0;
	overflow: hidden;
}

.youtube .ty_inner iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ===================================================================================
ANIMATION
====================================================================================== */

/* 上に向かってフェードイン */
.js-fadeUp {
	opacity: 0;
	transform: translateY(200px);
	transition: 0.5s all ease 0.5s;
}

.js-fadeUp.delay1 {
	transition-delay: 0.3s;
}

.js-fadeUp.delay2 {
	transition-delay: 0.6s;
}

.js-fadeUp.delay3 {
	transition-delay: 0.9s;
}

.js-fadeUp.delay4 {
	transition-delay: 1.2s;
}

.js-fadeUp.delay5 {
	transition-delay: 1.5s;
}

.js-fadeUp.is-inview {
	opacity: 1;
	transform: translateY(0);
}

/* 右からフェードイン */
.js-fadeFR {
	opacity: 0;
	transform: translateX(100px);
	transition: 0.5s all ease 0.5s;
}

.js-fadeFR.is-inview {
	opacity: 1;
	transform: translateX(0);
}

/* 左からフェードイン */
.js-fadeFL {
	opacity: 0;
	transform: translateX(-100px);
	transition: 0.5s all ease 0.5s;
}

.js-fadeFL.is-inview {
	opacity: 1;
	transform: translateX(0);
}

/* シンプルなフェードイン */
.js-fadeIn {
	opacity: 0;
	transition: 1s all ease 0.5s;
}

.js-fadeIn.is-inview {
	opacity: 1;
}

/*ズームイン*/
.js-zoomIn {
	transform: scale(0.6);
}

.js-zoomIn.is-inview {
	animation-name: zoomInAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}

@keyframes zoomInAnime {
	from {
		transform: scale(0.6);
	}

	to {
		transform: scale(1);
	}
}

.js-RBounce {
	opacity: 0;
	transform: rotate(-100deg);
	transition: 1s transform cubic-bezier(0.47, 1.64, 0.41, 0.8) 1s;
}

.js-RBounce.is-inview {
	opacity: 1;
	transform: rotate(0);
}

/* ===================================================================================
開発用
====================================================================================== */

.box_kaihatsu {
	border-top: 3px solid red;
	margin-top: var(--s10);
	padding-top: revertvar(--s2);
}

.box_kaihatsu>h1 {
	color: red;
	font-size: var(--f36);
}