:root {
		--connect-lightblue: #00b7f1;
		--connect-darkblue: #000e4e;
		--connect-mediumblue: #006ecc;
		--connect-beige: #ede9de;
		--connect-darkgray: #6b6b6b;
		--connect-mediumgray: #999999;
		--connect-lightgray: #f2f2f2;
		--connect-lightgreen: #85cc33;
		--connect-orange: #ff6a00;
		--connect-purple: #ad00cc;
		--connect-darkgreen: #006603;
		--connect-yellow: #ffbf00;
		
		--color: var(--connect-darkblue);
		--color2: #fff;
		--size: 60px;
	}
	.bnr-pass {
		/* background: url("../DEF/img/top-head-img.png") top right 20px no-repeat
			, linear-gradient(to bottom right, #14215d, #000729); */
	}
	.bnr-pass p {
		color: #fff;
		padding: 1em;
	}
	/* パーツ */
	.flex {display: flex;}
	.flex.col {flex-direction: column;}
	.flex.center {align-items: center;justify-content: center;}
	ul.fukidashi {list-style: none;padding: 0;margin: 0;}
	ul.fukidashi li {background-color: var(--color);padding: .2em 1em;position: relative;font-weight: bold;}
	ul.fukidashi.left li::after {content: "";position: absolute;top: 50%;left: 1px;border-style: solid;border-width: 0 10px 10px 0;border-color: transparent var(--color) transparent transparent;translate: -100% calc(-50% - 0.4px);}
	ul.fukidashi.right li::after {content: "";position: absolute;top: 50%;right: 1px;border-style: solid;border-width: 10px 0 0 10px;border-color: transparent transparent transparent var(--color);translate: 100% calc(-50% - 0.4px);}
	ul.fukidashi.bottom li::after {content: "";position: absolute;bottom: -95%;left: 50%;border-style: solid;border-width: 10px 10px 10px 0;border-color: var(--color) transparent transparent transparent ;translate: 100% calc(-50% - 0.4px);}
	.slash {position: relative;padding: 0 1em;font-weight: bold;}
	.slash::before, .slash::after {content: "";position: absolute;top: 50%;width: 2px;height: 1.2em;background-color: var(--color);transform: translateY(-50%) rotate(-45deg);}
	.slash::after {right: 0;transform: translateY(-50%) rotate(45deg);}
	.slash::before {left: 0;}
	.icon-box {background-color: var(--color);border-radius: calc(var(--size)/4); padding: 10px; display: flex;align-items: center;justify-content: center;}
	.icon-box .icon {width: var(--size);height: var(--size);color: var(--color2);}
	.tag {width: fit-content;padding:1px .5em; font-weight: bold;color:#fff;background-color: var(--color);}

	.bnr {height: 100%;user-select: none;}
	.bnr h2 {margin: 0;text-wrap: nowrap;}
	.bnr p {font-weight: bold;}
	.swiper-slide a {text-decoration: none;}

	.bnr-1 {
		background-color: var(--connect-lightgray);
		justify-content: space-between;
		font-family: Arial, Helvetica, sans-serif;
	}
	.bnr-1 .title {
		background-color: var(--connect-darkblue);
		width: 50%;
		color: #fff;
	}
	.bnr-1 .subtitle {
		width: fit-content;
		padding: 2px 1em;
		font-weight: bold;
		color: var(--connect-darkblue);
		background-color: var(--connect-lightblue);
	}
	.bnr-1 .tag {
		--color: var(--connect-orange);
		color: var(--connect-darkblue);
	}
	.bnr-1 .fukidashi {
		--color: var(--connect-lightblue);
		margin-bottom: auto;
		margin-left: 2em;
	}
	.bnr-1 .fukidashi li {
		color: var(--connect-darkblue);
		font-size: 80%;
		border-radius: 50%;
		padding: initial;
		width: 60px;
		height: 60px;
	}
	.bnr-1 .scenelist {
		list-style: none;
		padding: 0;
		margin: 0;
		margin-right: 2em;
	}
	.bnr-1 .scenelist li {
		margin: 5px;
		border-radius: 999px;
		width: 15em;
	}
	.bnr-1 .scenelist li a {
		color: var(--connect-darkblue);
		text-decoration: none;
		font-weight: bold;
	}
	.bnr-2 {
		align-items: center;
		justify-content: space-evenly;
		background-color: #A0DCEA;
		color: var(--connect-darkblue);
	}
	.bnr-2 .fukidashi {
		--color: #fff;
	}
	.bnr-2 .fukidashi li {
		border-radius: 999px;
		width: 15em;
		margin: 5px;
		text-align: center;
	}
	.bnr-2 .slash {
		--color: var(--connect-darkblue);
	}
	.bnr-2 h2 {
		text-align: center;
	}
	.bnr-2 .icon-box {
		--color: #58B4CF;
		--color2: #fff;
		--size: 60px;
		margin-left: 15px;
	}
	.bnr-3 {
		background: linear-gradient(to bottom right, #eee, var(--connect-lightgray));
		color: #333;
		position: relative;
	}
	.bnr-3 .tag.new {
		--color: var(--connect-lightgreen);
		color: #333;
		position: absolute;
		top: 0;
		left: 0;
		font-size: 14px;
	}
	.bnr-3 .tag.now {
		--color: var(--connect-orange);
		color: #333;
	}
	.bnr-3 .btn {
		background-color: #fff;
		border: 1px solid var(--connect-darkblue);
		/* margin: 5px; */
		padding: 5px 1em;
		border-radius: 999px;
		width: 10em;
		text-align: center;
		color: var(--connect-darkblue);
		text-decoration: none;
		font-weight: bold;
	}
	.bnr-3 .icon {
		font-size: 50px;
		color: #333;
	}
	.bnr-3 img {
		height: 150%;
		z-index: 999
	}
	.bnr-3 .watermark {
		opacity: 0.2;
		width: 180px;
		height: 180px;
		position: absolute;
		top: -30px;
		left: 30px;
	}
	.bnr-3 .bnr-img {
		width: 100%;
	}