@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&display=swap");

.wrapper {
	line-height: 1;
}

.wrapper a,
.wrapper div,
.wrapper span,
.wrapper img,
.wrapper p,
.wrapper h1,
.wrapper h2,
.wrapper h3,
.wrapper h4,
.wrapper h5,
.wrapper h6,
.wrapper ul,
.wrapper ol,
.wrapper li,
.wrapper dt,
.wrapper dd,
.wrapper table,
.wrapper tr,
.wrapper th,
.wrapper td {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.wrapper h1,
.wrapper h2,
.wrapper h3,
.wrapper h4,
.wrapper h5,
.wrapper h6,
.wrapper ul,
.wrapper ol,
.wrapper dl,
.wrapper li,
.wrapper dt,
.wrapper dd,
.wrapper p,
.wrapper div,
.wrapper span,
.wrapper img,
.wrapper a,
.wrapper table,
.wrapper tr,
.wrapper th,
.wrapper td {
	border: 0;
	font-size: 100%;
	font-weight: normal;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

.wrapper ol,
.wrapper ul {
	list-style: none;
	list-style-type: none;
}

.wrapper a {
	text-decoration: none;
}

/*============================================
# ブレークポイント
============================================*/

/*============================================
# メディアクエリ
============================================*/

/*============================================
# vw変換
============================================*/

/*============================================
# カラー, フォントサイズ
============================================*/

:root {
	--font-color: #333;
	--main-color: #008dc1;
	--bg-color: #f8f8f8;
	--accent-color: #eb0327;
	--fs-xxxlg: 30px;
	--fs-xxlg: 22px;
	--fs-xlg: 20px;
	--fs-lg: 18px;
	--fs-md: 16px;
	--fs-sm: 14px;
}

.wrapper {
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%; /* Safari */
	color: var(--font-color);
	font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-size: var(--fs-md);
	line-height: 1.667;
	overflow: clip;
	position: relative;
}

.wrapper img {
	height: auto;
	max-width: 100%;
	vertical-align: bottom;
}

.wrapper a {
	color: inherit;
}

.wrapper .pc {
	display: inline-block;
}

.wrapper .sp {
	display: none;
}

.wrapper .ls {
	letter-spacing: -0.05em;
}

/*============================================
# 共通パーツ
============================================*/

.content-header {
	background: url(../images/common/bg_head.png) repeat-x 0 0/contain;
}

.content-header .content-header__ttl {
	display: block;
	text-align: center;
}

.content-footer .content-footer__bnrs {
	-moz-column-gap: 44px;
	column-gap: 44px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin: 0 auto;
	padding: 200px 0;
	width: -moz-fit-content;
	width: fit-content;
}

.content-footer .content-footer__bnr {
	margin-inline: auto;
	width: 490px;
}

.content-footer .content-footer__bnr a {
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.16);
	display: block;
}

.content-footer .content-footer__bnr p {
	font-weight: 500;
	line-height: 1.5;
	margin-top: 10px;
}

@media screen and (min-width: 767px) {

.wrapper {
	min-width: 1080px;
}

.wrapper a {
	transition: opacity 0.2s ease;
}

.wrapper a:hover {
	opacity: 0.8;
}

.content-footer .content-footer__bnr p {
	text-align: center;
}

}

@media screen and (max-width: 766.9px) {

:root {
	--fs-xxxlg: 8vw;
	--fs-xxlg: 5.8666666667vw;
	--fs-xlg: 5.3333333333vw;
	--fs-lg: 4.8vw;
	--fs-md: 4.2666666667vw;
	--fs-sm: 3.7333333333vw;
}

.wrapper {
	line-height: 1.6;
}

.wrapper img {
	width: 100%;
}

.wrapper .pc {
	display: none;
}

.wrapper .sp {
	display: block;
}

.wrapper .ls {
	letter-spacing: -0.1em;
}

.wrapper .ls--s {
	letter-spacing: -0.05em;
}

.wrapper .ls--ss {
	letter-spacing: -0.04em;
}

.content-footer .content-footer__bnrs {
	-moz-column-gap: 5.3333333333vw;
	column-gap: 5.3333333333vw;
	padding: 26.6666666667vw 5.3333333333vw calc(26.6666666667vw - 68px);
}

.content-footer .content-footer__bnr {
	width: -moz-fit-content;
	width: fit-content;
}

.content-footer .content-footer__bnr a {
	box-shadow: 0.8vw 0.8vw 2.6666666667vw rgba(0, 0, 0, 0.16);
}

.content-footer .content-footer__bnr p {
	font-size: var(--fs-sm);
	margin-top: 2.6666666667vw;
}

}

