/* CSS Document */

@charset "UTF-8";

@import url('reset.css');
@import url('menu.css');

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700;900&display=swap');

@import url('https://use.fontawesome.com/releases/v6.3.0/css/all.css');

/*----------------------------------------------------------------------
変数定義
-----------------------------------------------------------------------*/
:root {
	--line-height-regular: 1.6;
	--gray: #F1F1F1;
	--primary-color: #224092;
	--text-color: #292526;
	--text-hover-color: #4D89C8;
}

/*----------------------------------------------------------------------
全体
-----------------------------------------------------------------------*/
body {
	background-color: #FFF;
	font-family: 'Noto Sans JP', sans-serif;
	overflow-x: hidden;
}

/*----------------------------------------------------------------------
ヘッダー
-----------------------------------------------------------------------*/
header {
	display: flex;
	justify-content: space-between;
	place-items: center;
	width: 100%;
	height: 136px;
	padding: 0px 200px 0px 50px;
	background: var(--primary-color);
	transition: 0.2s;
}

a.header-logo {
	display: inline-block;
	font-size: 3.25rem;
	letter-spacing: 0.06em;
}

a.header-logo {
	color: #FFF;
	text-decoration: none;
}

div#g-navi {
	display: flex;
	justify-content: center;
	gap: 110px;
	padding: 10px 20px 12px;
	background: #E9E9E9;
}

div#g-navi > a {
	font-size: 1.1875rem;
	font-weight: 700;
	color: var(--text-color);
	text-decoration: none;
}
div#g-navi > a:hover {
	color: var(--text-hover-color);
}

@media screen and (max-width: 1080px) {
	header {
		padding: 0px 130px 0px 50px;
	}
}

@media screen and (max-width: 960px) {
	header {
		height: 100px;
		padding: 0px 0px 0px 20px;
	}

	header img {
		display: none;
	}
}

@media screen and (max-width: 736px) {
	a.header-logo {
		font-size: 2.5rem;
		white-space: nowrap;
	}

	header img {
		display: none;
	}

	div#g-navi {
		font-size: 0.8rem;
	}
}

@media screen and (max-width: 620px) {
	div#g-navi {
		display: none;
	}
}

/*----------------------------------------------------------------------
メイン
-----------------------------------------------------------------------*/
main {
	width: 1100px;
	max-width: 100%;
	margin: 0 auto;
	padding: 80px 0px 90px;
	box-sizing: border-box;
}

main article {
	text-align: justify;
}

main article p {
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.9;
}

@media screen and (min-width: 1140px) {
	main article {
		padding: 0px 48px;
	}
}

@media screen and (max-width: 1140px) {
	main {
		width: 100%;
		padding: 80px 20px 90px;
	}
}

/*----------------------------------------------------------------------
見出し
-----------------------------------------------------------------------*/
main h1 {
	position: relative;
	display: inline-block;
	margin-bottom: 3rem;
	font-size: 2.375rem;
	color: var(--text-color);
	text-align: center;
}
main h1::before {
	position: absolute;
	top: 3.875rem;
	left: 50%;
	content: "";
	display: inline-block;
	width: 3.5rem;
	border-bottom: 8px solid var(--text-hover-color);
	transform: translateX(-50%);
}
main h1::after {
	content: attr(data-subtitle);
	display: block;
	padding-top: 1rem;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.04em;
}

main h2 {
	margin-bottom: 2rem;
	font-size: 1.625rem;
}

main h3 {
	margin-bottom: 1rem;
	font-size: 1.25rem;
}

/*----------------------------------------------------------------------
リスト
-----------------------------------------------------------------------*/
main ul {
	line-height: var(--line-height-regular);
}

ul.disc, ul.square, ol.number {
	padding: 0px 5px;
}

ul.disc > li, ul.square > li {
	margin-left: 0.75em;
	text-indent: -1.05em;
}

ul.disc > li::before, ul.square > li::before {
	color: var(--primary-text-color);
}
ul.disc > li::before {
	content: "\025cf";
	margin-right: 0.25em;
	font-size: 0.6875em;
	vertical-align: 1px;
}
ul.square > li::before {
	content: "\025a1";
	margin-right: 0.25em;
	font-size: 1em;
	vertical-align: 2px;
	color: #686868;
}

ol.number > li {
	list-style-position: inside;
}

/*----------------------------------------------------------------------
リンク
-----------------------------------------------------------------------*/
main a:link {
	color: var(--text-color);
}
main a:hover {
	color: var(--text-hover-color);
}

main article p > a, main article li > a {
	margin: 0px 3px;
}

/*----------------------------------------------------------------------
強調・装飾
-----------------------------------------------------------------------*/
main article mark {
	background: linear-gradient(transparent 62%, #F9F291 70%);
	font-weight: bold;
}

/*----------------------------------------------------------------------
間隔調整
-----------------------------------------------------------------------*/
main article+h1 {
	margin-top: 5.5rem;
}

main p+p, ul+p, p+ul, img+p, p+img, figure+p, p+figure, table+p, p+table, table+table {
	margin-top: 1.5rem;
}

ul.disc > li+li, ul.square > li+li, ol.number > li+li {
	margin-top: 0.25em;
}

.bottom {
	margin-bottom: 0;
}

/*----------------------------------------------------------------------
フッター
-----------------------------------------------------------------------*/
footer {
	position: sticky;
	top: 100vh;
	width: 100%;
	padding: 40px 0px 15px;
	background: var(--primary-color);
	color: #FFF;
	text-align: center;
}

footer ul {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px 20px;
	margin: 0 auto;
	padding: 15px 20px 25px;
	width: 76vw;
}

footer a.footer-logo {
	display: table;
	max-width: 80%;
	margin: 0 auto;
}

footer ul > li a {
	color: #FFF;
}
footer ul > li a:not(.tel) {
	text-decoration: none;
	pointer-events: none;
}

p.copyright {
	margin-top: 0;
}

@media screen and (min-width: 600px) {
	footer a.footer-logo {
		width: 449px;
	}

	footer ul > li a {
		text-decoration: none;
		pointer-events: none;
	}
}

@media screen and (max-width: 800px) {
	footer {
		height: auto;
		padding: 30px 20px;
	}

	footer ul {
		flex-direction: column;
	}

	footer ul li:first-of-type {
		display: none;
	}
}

@media screen and (max-width: 600px) {
	footer ul li {
		font-size: 1.1875rem;
	}
}

/*----------------------------------------------------------------------
レスポンシブ
-----------------------------------------------------------------------*/
@media screen and (min-width: 736px) {
	main .sp {
		display: none;
	}
}

@media screen and (max-width: 736px) {
	main article br:not(.sp):not(.all) {
		display: none;
	}
}