@charset "UTF-8";

:root {
	--size1px: 0.062rem;
	--size2px: 0.125rem;
	--size3px: 0.1875rem;
	--size5px: 0.312rem;
	--size8px: 0.5rem;
	--size10px: 0.625rem;
	--size12px: 0.75rem;
	--size12_5px: 0.781rem;
	--size14px: 0.875rem;
	--size15px: 0.937rem;
	--size16px: 1rem;
	--size18px: 1.125rem;
	--size20px: 1.25rem;
	--size22px: 1.375rem;
	--size24px: 1.5rem;
	--size25px: 1.562rem;
	--size26px: 1.625rem;
	--size27px: 1.687rem;
	--size28px: 1.75rem;
	--size30px: 1.875rem;
	--size32px: 2rem;
	--size33px: 2.062rem;
	--size34px: 2.125rem;
	--size35px: 2.187rem;
	--size40px: 2.5rem;
	--size-40px: -2.5rem;
	--size45px: 2.812rem;
	--size50px: 3.125rem;
	--size-50px: -3.125rem;
	--size60px: 3.75rem;
	--size-60px: -3.75rem;
	--size70px: 4.375rem;
	--size80px: 5rem;
	--size100px: 6.25rem;
	--size140px: 8.75rem;
	--size200px: 12.5rem;
	--font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	--mainBlue: #004da2;
	--mainBlack: #222;
}

html {
	scroll-behavior: smooth;
	font-family: var(--font-family);
}
*, *::before, *::after {
	box-sizing:border-box;
}
.clearfix::after {
	content: '';
	display: block;
	clear: both;
}
ul {
	list-style: none;
}
a {
	text-decoration: none;
	display: block;
}
a,a:hover,a:visited {
	color: inherit;
}
img {
	width: 100%;
	vertical-align: top;
}
footer {
	font-size: var(--size12px);
	background:var(--mainBlack);
	color:#FFF;
	line-height: 1.6;
	text-align: center;
	padding: var(--size20px);
	margin: var(--size80px) 0 0 0;
	font-weight: 500;
}
main {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
}
header{
	background:var(--mainBlack);
	width:100%;
	margin: 0 auto var(--size20px);
}
header h1 {
	padding: var(--size15px);
	line-height: 1;
}

@media (min-width:768px) {
	.titleWrap {
		position: relative;
		margin: 0 auto;
		width: 70%;
		max-width: 453px;
	}
	.titleWrap .langSelect {
		position: absolute;
		right: -20vw;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		justify-content: center;
		margin-left: auto;
		margin-right: 20px;
		color: #fff;
	}
	.titleWrap .langSelect li {
		display: flex;
	}
	.titleWrap .langSelect li:first-child:after {
		content: "|";
		display: inline-block;
		padding: 0 10px;
		color: #999999;
	}
	.titleWrap .langSelect li.active {
		color: #999999;
		pointer-events: none;
	}
	.titleWrap .langSelect li a {
		text-decoration: none;
	}
}
@media (max-width:767px) {
	.titleWrap {
		position: relative;
		margin: 0 auto;
		width: 100%;
		max-width: 453px;
		display: flex;
    justify-content: space-between;
    align-items: center;
	}
	header h1 {
    padding: var(--size15px);
    line-height: 1;
    width: 80vw;
		margin-bottom: 0;
	}
	.titleWrap .langSelect {
		display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: 20px;
		color: #fff;
	}	
	.titleWrap .langSelect li {
		display: flex;
	}
	.titleWrap .langSelect li:first-child:after {
		content: "|";
		display: inline-block;
		padding: 0 5px;
		color: #999999;
	}
	.titleWrap .langSelect li.active {
		color: #999999;
		pointer-events: none;
	}
	.titleWrap .langSelect li a {
		text-decoration: none;
	}
}
.pcNone {
	display: none!important;
}
.spNone {
	display: block!important;
}

body {
	font-size: var(--size18px);
	background:#ECF1F5;
	color:var(--mainBlack);
	line-height: 1.6;
}
/* タグ */
.tagList {
	width: 100%;

}
.tagList ul {
	display: flex;
	gap: var(--size10px);
	flex-wrap: wrap;
}
.tagList li {
	display: inline-block;
	margin: 0 0 0 0;
}
.tagList .tagItem {
	font-size: var(--size12px);
	color: #004EA2;
	border: solid 1px #004EA2;
	border-radius: 100vmax;
	font-weight: 700;
	padding: var(--size10px) var(--size15px);
	white-space: nowrap;
	/*transition: background-color .3s, color .3s;*/
	display: block;
	background-color: #FFF;
}
/*
.tagList .tagItem:hover {
	background-color: #004EA2;
	color: #FFF;
}
*/

/*▼SP-----------------------*/
@media (max-width: 767px) {
	body {
		font-size: var(--size14px);
	}
	.pcNone {
		display: block!important;
	}
	.spNone {
		display: none!important;
	}
/* タグ */
	.tagList ul {
		display: flex;
		gap: var(--size5px);
		flex-wrap: wrap;
	}
	.tagList .tagItem {
		padding: var(--size5px) var(--size10px);
	}
}

/* btn pagetop */
#pageTop {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 20px;
	padding: 10px 15px;
	border-radius: 5px;
	cursor: pointer;
	z-index: 15;
}

@media (max-width: 767px) {
	#pageTop {
		display: none;
		position: fixed;
		bottom: 20px;
		right: 20px;
		padding: 10px 15px;
		border-radius: 5px;
		cursor: pointer;
		z-index: 15;
	}
}