@charset "utf-8";

:root {
	--bg       : #f6fbff;
	--white    : #ffffff;
	--text     : #000000;
	--muted    : --text;
	--blue     : #4eb3e8;
	--blue-dark: #1687c4;
	--blue-soft: #e4f5ff;
	--blue-ex-dark: #0b4365;
	--line     : #cdeeff;
	--shadow   : 0 18px 45px rgba(45, 123, 171, .13);
	--radius   : 28px;
}

* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth;
}

body {
	margin     : 0;
	background :
		radial-gradient(circle at 10% 5%, #d9f4ff 0 0, transparent 32%),
		radial-gradient(circle at 92% 12%, #fff6c9 0 0, transparent 28%),
		linear-gradient(180deg, #ffffff 0%, var(--bg) 58%, #eef9ff 100%);
}

.content {
	font-family: Meiryo, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif;
	color      : var(--text);
	line-height: 1.9;
}

.directoryFrame {
	margin: 1em 0;
	font-size: .9em;
}

.page {
	/* max-width: 1120px; */
	max-width: 1268px;;
	margin   : 0 auto;
	padding  : 20px 24px 72px
}

.hero {
	position     : relative;
	overflow     : hidden;
	background   : rgba(255, 255, 255, .82);
	border       : 1px solid rgba(205, 238, 255, .9);
	box-shadow   : var(--shadow);
	border-radius: 36px;
	padding      : 56px 52px;
}

.hero:before {
	content      : "";
	position     : absolute;
	width        : 260px;
	height       : 260px;
	border-radius: 50%;
	background   : linear-gradient(135deg, #87dbff, #e9f9ff);
	right        : -80px;
	top          : -80px;
	opacity      : .75;
}

.hero:after {
	content      : "";
	position     : absolute;
	width        : 130px;
	height       : 130px;
	border-radius: 34px;
	background   : #fff4a8;
	right        : 140px;
	bottom       : -46px;
	transform    : rotate(18deg);
	opacity      : .6;
}

.hero-inner {
	position : relative;
	z-index  : 1;
	/* max-width: 780px */
}

.eyebrow {
	display       : inline-flex;
	align-items   : center;
	gap           : 10px;
	padding       : 7px 16px;
	border-radius : 999px;
	background    : var(--blue-soft);
	color         : var(--blue-dark);
	font-weight   : 700;
	font-size     : 14px;
	letter-spacing: .04em;
}

.pg_top .content h1 {
	margin        : 24px 0 18px;
	font-size     : clamp(34px, 5vw, 58px);
	line-height   : 1.18;
	letter-spacing: .02em;
}

.lead {
	font-size  : clamp(20px, 2.2vw, 28px);
	font-weight: 700;
	color      : #1f405a;
	margin     : 0 0 28px;
}

.intro {
	display   : grid;
	gap       : 18px;
	margin-top: 34px;
	font-size : 18px;
	color     : var(--muted);
}

.question-box {
	margin       : 42px 0;
	background   : rgba(255, 255, 255, .86);
	border       : 1px solid rgba(205, 238, 255, .95);
	border-radius: 30px;
	padding      : 30px;
	box-shadow   : 0 16px 38px rgba(45, 123, 171, .10);
}

.question-list {
	list-style: none;
	margin    : 0;
	padding   : 0;
	display   : grid;
	gap       : 14px;
}

.question {
	position     : relative;
	background   : linear-gradient(90deg, #f0fbff 0%, #ffffff 100%);
	border       : 1px solid var(--line);
	border-radius: 18px;
	padding      : 17px 20px 17px 58px;
	box-shadow   : 0 8px 20px rgba(45, 123, 171, .07);
	font-size    : 18px;
	font-weight  : 700;
	color        : #061624;
}

.question:before {
	content      : "";
	position     : absolute;
	left         : 22px;
	top          : 50%;
	width        : 14px;
	height       : 14px;
	border-radius: 50%;
	background   : var(--blue);
	transform    : translateY(-50%);
	box-shadow   : 0 0 0 7px var(--blue-soft);
}

.pg_lower .section {
	margin-top   : 34px;
	background   : rgba(255, 255, 255, .78);
	border       : 1px solid rgba(205, 238, 255, .95);
	border-radius: var(--radius);
	padding      : 34px;
	box-shadow   : 0 14px 34px rgba(45, 123, 171, .08);
}

.pg_lower .section.no-bg {
	background    : transparent;
	border        : none;
	box-shadow    : none;
	padding: 0;
	border-radius : 0;
}

.section p {
	margin   : 0 0 18px;
	font-size: 18px;
	color    : var(--muted)
}

.section p:last-child {
	margin-bottom: 0
}

.nav-title {
	margin     : 20px 0 20px;
	font-size  : 28px;
	line-height: 1.35;
	text-align : center;
}

.cards {
	display              : grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap                  : 18px;
}

.card {
	min-height     : 118px;
	display        : flex;
	align-items    : center;
	justify-content: center;
	text-align     : center;
	padding        : 24px;
	border-radius  : 24px;
	background     : linear-gradient(180deg, #ffffff 0%, #e8f7ff 100%);
	border         : 1px solid var(--line);
	box-shadow     : 0 12px 28px rgba(45, 123, 171, .09);
	color          : #0b4365;
	font-weight    : 800;
	font-size      : 17px;
}

.card a {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color          : inherit;
}

.card a:hover {
	opacity: .7;
}

.card.wide {
	grid-column: span 1
}

.section>.container {
	padding: 0;
}

@media(max-width:820px) {
	.hero {
		padding      : 42px 26px;
		border-radius: 28px
	}

	.question-box,
	.cards {
		grid-template-columns: 1fr
	}

	.page {
		padding: 28px 16px 48px
	}

	.section {
		padding: 26px 22px
	}
}

/* -----------------------------
 下層ページ
 ------------------------------ */
 .pg_lower .content .container {
	max-width: 1430px !important;
 }

 .section__lower {
	background: #fff;
	border-radius: var(--radius);
	padding: clamp(2em, 4.5vw, 3.5em) clamp(1em, 2.25vw, 1.5em);
 }

 @media (max-width: 820px) {
	.section__lower .container {
		padding-inline: max(2.5vw, 10px);
	}
 }

.page-title {
	margin: 0 0 .75em;
	padding: 0 0 .5em;
	font-size: clamp(1.68em, 4.5vw, 2.8em);
	color: var(--blue-ex-dark);
	border-bottom: 1px solid #b1cbde;
	letter-spacing: .03em;
	line-height: 1.4;
 }

 .section__lower p + p {
	margin-top: 1.5em;
 }
 
 .section__title {
	font-size: clamp(1.5em, 3vw, 1.8em);
	margin: 1.5em 0 .5em;
	line-height: 1.4;
	/* color: var(--blue-ex-dark); */
	color: #303030;
 }

 .article + .article {
	margin-top: 2.5em;
 }

 .article .section__title {
	margin-top: 0;
 }

 .section__title.--ordered {
	position: relative;
	display: flex;
	gap: .25em;
 }

 .section__title.--ordered .idx {
	color: var(--blue-ex-dark);
 }

 .article {
	margin: 2.5em 0;
 }

 .article.--border-top {
	border-top: 1px solid #b1cbde;
	padding-top: 2.5em;
 }

 .article.--border-bottom {
	border-bottom: 1px solid #b1cbde;
	padding-bottom: 2.5em;
 }

 .article.--border-bottom > *:last-child {
	margin-bottom: 0;
 }

 .w16per {
	width: 16%;
 }

 .min-w640 {
	min-width: 640px;
 }

 .f-bold {
	font-weight: bold;
 }

 .list-disc {
	margin: 1.5em 0;
 }

 .list-disc > li {
	position: relative;
	padding-left: 1.5em;
 }

 .list-disc > li + li {
	margin-top: .5em;
 }

 .list-disc > li:before {
	content: "";
	position: absolute;
	left: 0;
	top: .6em;
	width: .5em;
	height: .5em;
	border-radius: 50%;
	background: var(--blue);
}

.list-check {
	margin: 1.5em 0;
}

.list-check > li {
	position: relative;
	padding-left: 1.65em;
}

.list-check > li + li {
	margin-top: .5em;
}

.list-check > li:before {
	--color: rgb(35, 147, 35);
	content: "";
	position: absolute;
	left: 0;
	top: .5em;
	width: .8em;
	height: .5em;
	border-left: 3px solid var(--color);
	border-bottom: 3px solid var(--color);
	transform: rotate(-45deg);
}

.list-note {
	margin: .75em 0 2em;
}

.list-note > li {
	display: flex;
	gap: .5em;
	color: #404040;
	font-size: .85em;
}

.list-note > li + li {
	margin-top: .5em;
}

.list-note >li:before {
	content: "※";
}

.dl-arrow {
	margin: 1.5em 0;
}

.dl-arrow dt {
	position: relative;
	padding-left: 1.2em;
	font-weight: bold;
}

.dl-arrow dt:before {
	content: "";
	position: absolute;
	left: 0;
	top: .65em;
	width: .5em;
	height: .5em;
	border-top: 3px solid var(--blue);
	border-right: 3px solid var(--blue);
	transform: rotate(45deg);
}

.dl-arrow dt:not(:first-child) {
	margin-top: 1em;
}

.dl-arrow dd {
	padding-left: 1.2em;
}

.table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5em auto;
}

.tblWrap .table {
	margin-block: 0;
}

.tblWrap {
	margin-block: 1.5em;
}

 @media (max-width: 820px) {
	.table {
		font-size: .9em;
		line-height: 1.65;
	}
 }

.table th,
.table td {
	padding: .5em 1em;
	border: 1px solid #a2a2a2;
}

.table thead th {
	background: var(--blue-soft);
	font-weight: bold;
}

/* .table tbody tr:nth-child(odd) {
	background: #f6fbff;
} */

.table tbody .th {
	font-weight: bold;
	background: #f8fbff;
}

/* ----- 活用 ----- */
.usage__merit-tbl {
	margin-top: 1.5em;
}

.usage__merit-box {
	--borderColor: #a3a3a3;
	border-top: 1px solid var(--borderColor);
}

.usage__merit-box:last-child {
	border-bottom: 1px solid var(--borderColor);
}

.usage__merit-head {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: .9em;
	font-weight: bold;
	background: #eef9ff;
	padding: .5em 1em;
	line-height: 1.2;
	text-align: center;
}

.usage__merit-head .maru {
	display: block;
	font-size: 2.5em;
	color: var(--blue-dark);
}

.usage__merit-desc {
	padding: 1em 1.5em;
}

.usage__merit-box:nth-child(2) .usage__merit-head {
    background: #fff1f1;
}

.usage__merit-box:nth-child(2) .usage__merit-head .maru {
    color: #ff5555;
}

.usage__merit-box:nth-child(3) .usage__merit-head {
    background: #eefff0;
}

.usage__merit-box:nth-child(3) .usage__merit-head .maru {
    color: #30880e;
}

@media screen and (min-width: 768px) {
	.usage__merit-box {
		display: grid;
		grid-template-columns: 12em 1fr;
	}

	.usage__merit-head {
		flex-direction: column;
	}

	.usage__merit-desc {
		display: grid;
		align-items: center;
		min-height: 8em;
	}
}