@charset "utf-8";

/* 変数 -----------------------------------------------------------------------------------------*/
:root {
	--family-go: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

	--wrapper: 86%;
	--wrapper-max: 960px;
	--wrapper-max-l: 1160px;
	--footer-wrapper: 94%;
	--footer-wrapper-max: 1280px;

	--header-msr-h: 25px;
	--logo-msr-h: 15px;
	--header-h: 72px;
	--logo-h: 42px;
	--logo-margin: 15px;
	--global-t: calc(var(--header-msr-h) + var(--header-h));

	--logo-msr-max: 342px;
	--logo-max: 169px;
	--button-min: 240px;

	--color-black: #424242;
	--color-white: #fff;
	--color-sub: #f3f3f3;
	--color-sub-hover: #dfdfdf;
	--color-footer: #d9d9d9;
	--color-shadow: #949494;
	--color-tag: #52639e;
	--color-button: #555;
	--color-hover: #185aa5;

	--font-menu: 1.6rem;
	--font-tag: 1.4rem;
	--font-button: 1.6rem;
	--font-pan: 1.2rem;
	--font-footer: 1.2rem;
	--font-sitemap: 1.5rem;
	--font-sitemap-s: 1.3rem;

	--weight-m: 400;
	--weight-b: 600;

	--line: 1.4;

	--margin-5: 5px;
	--margin-10: 10px;
	--margin-15: 15px;
	--margin-20: 20px;
	--margin-30: 30px;
	--margin-40: 40px;
	--margin-50: 50px;
	--margin-60: 60px;
	--margin-80: 80px;
	--margin-100: 80px;/*100px;*/
	--margin-150: 120px;/*150px;*/
	--margin-200: 160px;/*200px;*/
	--margin-250: 200px;/*250px;*/
	--margin-300: 240px;/*300px;*/

	--button-padding: 19px 0 21px;
	--button-padding-s: 14px 0 16px;
	--button-padding-l: 31px 0 33px;
}
/*-----------------------------------------------------------------------------------------------*/


/*html, body { height: 100%; }*/
html { font-size: 62.5%; }
body {
	background-color: var(--color-white);
	background-size: 5px auto;
	color: var(--color-black);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/*font-feature-settings: "palt";*/
	line-height: 1;
	overflow-x: hidden;
	min-width: 320px;
}
img/*,
svg*/ {
	height: auto;
	width: 100%;
	max-width: 100%;
}
a:link, a:visited, .hover {
	color: var(--color-black);
	transition: 0.2s ease-out;
	transition-property: background-color, color, opacity;
	text-decoration: none;
}
a[href*="tel:"] { text-decoration: underline; }
a:hover, a:active, .hover:hover {
	color: var(--color-hover);
	/*text-decoration: underline;*/
}
a:focus { outline: none; }

strong { font-weight: var(--weight-b); }

li { list-style: none; }
th,
dt { font-weight: var(--weight-m); }

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

/*::selection {
	background-color: var(--color-black);
	color: var(--color-white);
}*/

.indent {
	padding-left: 1em;
	text-indent: -1em;
}

.fc::first-letter { font-feature-settings: "palt"; }



/* フォント -------------------------------------------------------------------------------------*/
body {
	font-family: var(--family-go);
	font-weight: var(--weight-m);
}

body { opacity: 0; }
.wf-active body,
.wfno-load body { opacity: 1; }
/*-----------------------------------------------------------------------------------------------*/


/* wrapper --------------------------------------------------------------------------------------*/
.wrapper {
	margin: 0 auto;
	width: var(--wrapper);
	max-width: var(--wrapper-max);
}
.footer .wrapper {
	width: var(--footer-wrapper);
	max-width: var(--footer-wrapper-max);
}
/*-----------------------------------------------------------------------------------------------*/


/* lazy -----------------------------------------------------------------------------------------*/
.js-lazy {
	opacity: 0;
	transform: translateY(10%) scale(1);
	transition-duration: 0.8s;
	transition-property: opacity, transform;
	transition-timing-function: cubic-bezier(0.61, 1, 0.88, 1);/*cubic-bezier(0.5, 1, 0.89, 1);*/
}
/*-----------------------------------------------------------------------------------------------*/


/* swiper ---------------------------------------------------------------------------------------*/
.swiper-container { position: relative; }

.swiper-pagination { bottom: -20px !important; }
.swiper-pagination-bullet {
	background-color: var(--color-gray);
	height: 6px;
	opacity: 1;
	margin: 0 4px !important;
	width: 6px;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--color-black); }
/*-----------------------------------------------------------------------------------------------*/


/* 共通 -----------------------------------------------------------------------------------------*/
.tsume::first-letter { font-feature-settings: "palt"; }

/* タグ */
.tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--margin-10);
}
.tags li a,
.tags li span,
.tag {
	background-color: var(--color-tag);
	border-radius: 20px;
	color: var(--color-white);
	display: inline-block;
	font-size: var(--font-tag);
	font-weight: var(--weight-b);
	line-height: 1;
	padding: 2px 20px 3px;
	white-space: nowrap;
}

/* ボタン */
.button a,
.button .a {
	background-color: var(--color-button);
	border-radius: 5px;
	color: var(--color-white);
	display: inline-block;
	font-size: var(--font-button);
	font-weight: var(--weight-b);
	line-height: 1;
	padding: var(--button-padding);
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease-out;
	min-width: var(--button-min);
}

.button a span,
.button .a span {
	padding-right: 30px;
	position: relative;
}
.button a span::after,
.button .a span::after {
	background-image: url("../images/icon_arrow.svg");
	background-size: 22px auto;
	content: "";
	height: 22px;
	position: absolute;
	top: 2px;
	right: 0;
	width: 22px;
}
.button a.win span::after,
.button .a.win span::after { background-image: url("../images/icon_win.svg"); }

.button a.back span {
	padding-right: 0;
	padding-left: 30px;
}
.button a.back span::after,
.button .a.back span::after {
	right: auto;
	left: 0;
	transform: rotate(180deg);
}

.button a:not(.off):hover { background-color: var(--color-hover); }

.button a.off { opacity: 0.2; }
/*-----------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------*/
/* ヘッダー -------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
.header {
	background-color: var(--color-white);
	box-shadow: 0 -6px 20px 0 var(--color-shadow);
	/*height: var(--header-h);*/
	position: sticky;
	top: calc(var(--header-msr-h) * -1);
	left: 0;
	width: 100%;
	z-index: 102;
}

.header .msr {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: var(--header-msr-h);
}
.header .msr img {
	height: var(--logo-msr-h);
	width: auto;
}

.header .logo {
	display: flex;
	align-items: center;
	height: var(--header-h);
	padding-left: var(--logo-margin);
}
.header .logo img {
	height: var(--logo-h);
	width: auto;
}
/*-----------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------*/
/* ナビ -----------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
/* ＝ -------------------------------------------------------------------------------------------*/
.nav {
	cursor: pointer;
	height: var(--header-h);
	margin-top: calc(var(--header-h) * -1);
	margin-left: auto;
	position: sticky;
	top: 0;
	transition: 0.2s ease-out;
	transition-property: color top transform;
	width: var(--header-h);
	z-index: 103;
}

.nav::before,
.nav::after {
	background-color: var(--color-black);
	content: "";
	height: 2px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	transition: background-color 0.2s ease-out;
	width: 28px;
}
.nav::before { top: 42px; }
.nav::after { bottom: 22px; }
.nav.actived::before { top: 45px; transform: translateX(-50%)rotate(45deg); }
.nav.actived::after { bottom: 25px; transform: translateX(-50%)rotate(-45deg); }

/*.nav:hover { color: var(--color-active); }
.nav:hover::before,
.nav:hover::after { background-color: var(--color-active); }*/

/* × */
@keyframes navt {
	0% { top: 42px; transform: translateX(-50%) rotate(0deg); }
	50% { top: 45px; transform: translateX(-50%) rotate(0deg); }
	100% { top: 45px; transform: translateX(-50%) rotate(45deg); }
}
.nav.active::before { animation: navt 0.2s linear forwards; }
.nav.reverse::before { animation: navt 0.2s linear reverse both; }
@keyframes navb {
	0% { bottom: 22px; transform: translateX(-50%) rotate(0deg); }
	50% { bottom: 25px; transform: translateX(-50%) rotate(0deg); }
	100% { bottom: 25px; transform: translateX(-50%) rotate(-45deg); }
}
.nav.active::after { animation: navb 0.2s linear forwards; }
.nav.reverse::after { animation: navb 0.2s linear reverse both; }
/*-----------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------*/
/* グローバル -----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
.global {
	background-color: var(--color-white);
	height: calc(100svh - var(--global-t));
	overflow-y: auto;
	padding: var(--margin-30) 0;
	position: fixed;
	top: var(--global-t);
	left: 0;
	transform: translateX(100%);
	width: 100%;
	z-index: 101;
}
.global.ready { transition: transform 0.2s ease-out; }
.global.active { transform: translateX(0); }


/* メニュー -------------------------------------------------------------------------------------*/
.global .menu {
	display: flex;
	flex-direction: column;
}
.global .menu > li { position: relative; }
.global .menu a {
	color: var(--color-black);
	display: block;
	font-size: var(--font-menu);
	font-weight: var(--weight-b);
	padding: 15px 0 16px 8%;
	position: relative;
	text-decoration: none;
}

/* サブメニュー */
.global .menu .sub {
	cursor: pointer;
	height: 49px;
	position: absolute;
	top: 0;
	right: 8%;
	width: 49px;
}
.global .menu .sub::before,
.global .menu .sub::after {
	background-color: var(--color-black);
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: opacity 0.2s ease-out;
}
.global .menu .sub::before { height: 2px; width: 12px; }
.global .menu .sub::after { height: 12px; width: 2px; }
.global .menu .sub.active::after { opacity: 0; }

.global .menu ul {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}
.global .menu ul li { padding-left: 2em; }
.global .menu ul a {
	font-weight: var(--weight-r);
	padding-top: 10px;
	padding-bottom: 11px;
}


/* ボタン ---------------------------------------------------------------------------------------*/
.global .button {
	margin-top: var(--margin-30);
	text-align: center;
}
/*-----------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------*/
/* パンくず -------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
.pan ul {
	display: flex;
	column-gap: 0.5em;
	font-size: var(--font-pan);
}
.pan a,
.pan span {
	display: inline-block;
	padding: 20px 0 21px;
}
.pan li:not(:last-child)::after {
	content: ">";
	padding-left: 0.5em;
}

.pan li:first-child {
	padding-left: 20px;
	position: relative;
}

.pan li:last-child { display: none; }
.pan li:nth-child(2) { display: block; }
/*-----------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------*/
/* フッター -------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
.footer {
	background-color: var(--color-footer);
	font-size: var(--font-footer);
	/*margin-top: var(--margin-300);*/
	padding: var(--margin-40) 0;
	text-align: center;
}
.footer .text { margin-top: var(--margin-60); }

/* ロゴ */
.footer .msr img { max-width: var(--logo-msr-max); }
.footer .logo img { max-width: var(--logo-max); }


/* サイトマップ ---------------------------------------------------------------------------------*/
.footer .sitemap {
	display: inline-block;
	text-align: left;
}
.footer .sitemap > ul {
	display: inline-flex;
	flex-direction: column;
	margin-top: var(--margin-30);
}
.footer .sitemap .sub {
	margin-top: var(--margin-5);
	padding-bottom: var(--margin-20);
}

.footer .sitemap a {
	display: inline-block;
	font-size: var(--font-sitemap);
	font-weight: var(--weight-b);
	padding: 5px 0 6px;
}
.footer .sitemap .sub a {
	font-size: var(--font-sitemap-s);
	font-weight: var(--weight-m);
	line-height: var(--line);
}

.footer .sitemap .sub li {
	padding-left: 1.5em;
	position: relative;
}
.footer .sitemap .sub li::before {
	content: "－";
	position: absolute;
	top: 8px;
	left: 0;
}

.footer .sitemap a:hover { text-decoration: underline; }

.footer .law {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--margin-15) var(--margin-20);
	margin-top: var(--margin-20);
}


/* ボタン ---------------------------------------------------------------------------------------*/
.footer .button {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--margin-10) var(--margin-20);
	margin-top: var(--margin-60);
}


/* コピーライト ---------------------------------------------------------------------------------*/
.footer .copyright,
.footer .notes { line-height: var(--line); }
.footer .copyright { margin-top: var(--margin-30); }
.footer .notes { margin-top: var(--margin-5); }
/*-----------------------------------------------------------------------------------------------*/





@media(min-width: 530px) {
}



@media(min-width: 768px) {
	/* 変数 -----------------------------------------------------------------------------------------*/
	:root {
		--margin-100: 100px;
		--margin-150: 150px;
		--margin-200: 200px;
		--margin-250: 250px;
		--margin-300: 300px;
	}
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* パンくず -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	.pan li:last-child { display: block; }
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 1024px) {
	/* 変数 -----------------------------------------------------------------------------------------*/
	:root {
		--header-msr-h: 36px;
		/*--header-h: 92px;
		--logo-h: 51px;
		--logo-margin: 30px;*/
	}
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* ヘッダー -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	.header .msr {
		justify-content: flex-end;
		padding-right: var(--logo-margin);
	}
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* ナビ -----------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* ＝ -------------------------------------------------------------------------------------------*/
	.nav { display: none; }
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* グローバル -----------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	.global {
		background-color: transparent;
		display: flex;
		align-items: flex-end;/*center;*/
		justify-content: space-between;
		column-gap: var(--margin-30);
		height: var(--header-h);
		margin-top: calc(var(--header-h) * -1);
		margin-left: auto;
		overflow: visible;
		padding: 0 0 8px;
		position: sticky;
		top: 0;
		left: auto;
		transform: none;
		width: 82%;
		z-index: 104;
	}
	/* メニュー -------------------------------------------------------------------------------------*/
	.global .menu {
		flex-direction: row;
		column-gap: var(--margin-20);
	}
	.global .menu a {
		padding-left: 0;
		white-space: nowrap;
	}
	.global .menu > li > a::after {
		background-color: transparent;
		content: "";
		height: 2px;
		position: absolute;
		bottom: 5px;
		left: -5px;
		transform: scaleX(0);
		transition: 0.2s ease-out;
		transition-property: background-color transform;
		width: calc(100% + 10px);
	}
	.global .menu > li > a:hover::after {
		background-color: var(--color-hover);
		transform: scaleX(1);
	}
	.global .menu > li > a:hover { color: var(--color-hover); }
	/* サブメニュー */
	.global .menu .sub { display: none; }
	.global .menu .sub::before,
	.global .menu .sub::after { content: none; }
	.global .menu ul {
		background-color: var(--color-sub);
		position: absolute;
		top: 49px;
		left: calc(-2em + -5px);
		min-width: calc(100% + 10px);
		z-index: 1;
	}
	.global .menu ul li {
		border-bottom: var(--color-white) solid 1px;
		padding-left: 0;
	}
	.global .menu ul a {
		/*color: var(--color-white);*/
		padding: 15px 2em 16px;
		white-space: nowrap;
		min-width: 230px;
	}
	.global .menu ul a:hover { background-color: var(--color-sub-hover); }
	/* ボタン ---------------------------------------------------------------------------------------*/
	.global .button {
		margin-top: 0;
		padding-right: var(--logo-margin);
	}
	.global .button a,
	.footer .button a {
		font-size: var(--font-s);
		/*padding-top: 14px;
		padding-bottom: 16px;*/
		padding: var(--button-padding-s);
		min-width: 190px;
	}
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* フッター -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	.footer { text-align: left; }
	.footer .wrapper { position: relative; }
	.footer .text {
		display: flex;
		align-items: flex-end;
		column-gap: var(--margin-60);
		margin-top: var(--margin-80);
	}
	/* サイトマップ ---------------------------------------------------------------------------------*/
	.footer .sitemap {
		display: flex;
		flex-direction: column;
		row-gap: var(--margin-40);
	}
	.footer .sitemap > ul {
		flex-direction: row;
		column-gap: var(--margin-30);
		margin-top: 0;
	}
	.footer .sitemap .sub { padding-bottom: 0; }
	.footer .sitemap .row {
		display: flex;
		flex-direction: column;
	}
	.footer .sitemap > ul > li > a { white-space: nowrap; }
	.footer .law {
		justify-content: flex-start;
		margin-top: 0;
	}
	/* ボタン ---------------------------------------------------------------------------------------*/
	.footer .button {
		/*flex-direction: column;*/
		margin-top: 0;
		position: absolute;
		top: 0;
		right: 0;
	}
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 1280px) {
	/* 変数 -----------------------------------------------------------------------------------------*/
	:root {
		--header-h: 92px;
		--logo-h: 51px;
		--logo-margin: 30px;
	}
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* グローバル -----------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	.global { width: calc(100% - 320px); }
	/* メニュー -------------------------------------------------------------------------------------*/
	.global .menu { column-gap: var(--margin-40); }
	/* ボタン ---------------------------------------------------------------------------------------*/
	/*.global .button {
		margin-top: 0;
		padding-right: var(--logo-margin);
	}*/
	.global .button a {
		font-size: var(--font-button);
		min-width: var(--button-min);
	}
	/*.global .button a {
		padding-top: 19px;
		padding-bottom: 21px;
	}*/
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* フッター -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* サイトマップ ---------------------------------------------------------------------------------*/
	.footer .sitemap > ul { column-gap: var(--margin-40); }
	/*-----------------------------------------------------------------------------------------------*/
}