@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600&display=swap');

:root {
	--10px: 0.625rem;
	--11px: 0.6875rem;
	--12px: 0.75rem;
	--13px: 0.8125rem;
	--14px: 0.875rem;
	--15px: 0.9375rem;
	--16px: 1rem;
	--17px: 1.0625rem;
	--18px: 1.125rem;
	--19px: 1.1875rem;
	--20px: 1.25rem;
	--21px: 1.3125rem;
	--22px: 1.375rem;
	--23px: 1.4375rem;
	--24px: 1.5rem;
	--28px: 1.75rem;
	--35px: 2.1875rem;
	--50px: 3.125rem;

	--space-5: 5px;
	--space-10: 10px;
	--space-15: 15px;
	--space-20: 20px;
	--space-30: 30px;
	--space-40: 40px;
	--space-50: 50px;
	--space-60: 60px;
	
	--font-family: "Noto Sans JP", 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", メイリオ, sans-serif;
	--font-weight: 400;
	--font-weight-b: 600;
	
	--color-text: #212121;
	--color-text-light: #555555;
	
	--color-bg: #FFFFFF;
	--color-bg-start: #FCD9D7;
	--color-bg-end: #D1DDEC;

	--color-primary: #EC2E20;
	--color-secondary: #004098;
	
	--color-summer: #1A7AC5;
	
	--color-border: #999999;
	--color-border-strong: #4D4D4D;

	--gradient-primary: linear-gradient(135deg, #D1DDEC 5%,	#FCD9D7 95% );
	
	--radius-l: 10px 30px 10px 30px;
	--radius-m: 8px 20px 8px 20px;
	--radius-s: 5px 12px 5px 12px;
	
	--shadow-s: 0 2px 5px rgba(0, 0, 0, 0.15);
	
}

.txt-c{ text-align:center; }
.txt-l{ text-align:left; }
.txt-r{ text-align:right; }

.block-c{
    margin-inline: auto;
    max-inline-size: max-content;
}

.mb10{ margin-bottom: 10px; }
.mb15{ margin-bottom: 15px; }
.mb20{ margin-bottom: 20px; }
.mb30{ margin-bottom: 30px; }
.mb40{ margin-bottom: 40px; }
.mb50{ margin-bottom: 50px; }

.mt30{ margin-top: 30px;}

.px10{ padding-inline: 10px; }
.px20{ padding-inline: 20px; }
.px30{ padding-inline: 30px; }

.indent--1{ padding-left: 1em; text-indent: -1em; }
.indent--18{ padding-left: 1.8em; text-indent: -1.8em; }

.gap5{ gap: 5px; }
.gap10{ gap: 10px; }
.gap15{ gap: 15px; }
.gap20{ gap: 20px; }

strong{ font-weight: var(--font-weight-b); }

.txt--red{ color: var(--color-primary); }
.txt--sub{ color: var(--color-secondary); }
.txt--light{ color: var(--color-text-light); }

.txt--large{ font-size:115%;}
.txt--small{ font-size:85%;}

@media (max-width: 899px) {
	.pc{ display: none;}
}