/* ==========================================================================
   Reset
   ========================================================================== */
@charset "utf-8";
:root {
	--color-blue:#1a2792;
	--color-red:#F0524A;
	--color-yellow:#edf282;
	--color-text:#000000;
	--hero-min-height:448px;
	--color-bggray:rgb(245, 245, 245);
	--dn-line: #e2e5ea;
	--connect-red: var(--color-red, #ee4f4a);
	--connect-blue: var(--color-blue, #202d98);

	--connect-text: #30343b;
	--connect-gray: #f5f7fa;
	--connect-light-blue: #f4f6ff;
	--connect-line: #dfe4eb;
	--dn-red: var(--color-red, #ef5048);
	--dn-blue: var(--color-blue, #202c99);

	/* 赤と青をつなぐ中間色 */
	--dn-purple: #7160ad;

	--dn-text: #30343b;
	--dn-gray: #f5f6f8;

}
.red{
	color:var(--color-red);
}
.blue{
	color:var(--color-blue);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
	color: var(--color-text);
	background-color: #fff;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	font-size:62.5%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family:
		"Roboto",
		"Helvetica Neue",
		Arial,
		"Hiragino Kaku Gothic ProN",
		"Hiragino Sans",
		Meiryo,
		sans-serif;
    font-family: 
		"Noto Sans JP",
		"ヒラギノ角ゴシック",
		YuGothic,
		"Yu Gothic",
		"メイリオ",
		Meiryo,
		"ＭＳ Ｐゴシック",
		"MS PGothic",
		sans-serif;
	font-size: 1.8rem;
	line-height: 1.75;
	overflow-wrap: anywhere;
}
@media (max-width: 767px) {
	body {
		font-size: 1.6rem;
	}
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

ul[role="list"],
ol[role="list"] {
	list-style: none;
}

img,
picture,
svg,
video,
canvas {
	display: block;
	max-width: 100%;
	height: auto;
}

table {
	border-spacing: 0;
	border-collapse: collapse;
}

th {
	text-align: left;
}

address {
	font-style: normal;
}

button,
input,
select,
textarea {
	margin: 0;
	font: inherit;
	color: inherit;
}

button {
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

textarea {
	resize: vertical;
}

a {
	color: var(--color-red);
	text-decoration: none;
}

a:hover {
	color: var(--color-blue);
}

:focus-visible {
	outline: 2px solid var(--color-blue);
	outline-offset: 3px;
}

[hidden] {
	display: none !important;
}