@charset "utf-8";
/*-----------------------------------*
 * welcome_box
 *-----------------------------------*/
.welcome_box {
	background-image:url("/img/langtop/louisa_langtop.png");
	background-size: 380px;
	background-position-x:-25px;
	background-position-y:-30px;
	background-repeat:no-repeat;
}
.welcome_box .inner {
	test-align:left;
	margin-left:370px;
	min-height:500px;
}
.welcome_box .inner h1{
	font-family: 'Archivo Black', sans-serif;
	font-family: 'Zen Old Mincho', Helvetica, Arial, sans-serif;
	font-weight: 900;
	font-size: 40px;
}
/*-----------------------------------*
 * story_box
 *-----------------------------------*/
.story_box {
	min-width:500px;
	position: relative;
	width: 100%;
	min-height: 220px;
	margin-top: 20px;
	padding: 0px;
	box-sizing: border-box;
	color: #eee;
}
/* 本文 */
.story_box .inner_content {
	padding: 0 50px;
	top:110px;
	left:0;
	right:0;
	z-index: 2;
	text-align: center;
	font-family: "Zen Old Mincho", serif;
}
.story_box .inner_content h2 {
	font-weight: 900;
	font-size: 30px;
	color:#cdb79b;
	letter-spacing: .18em;
	margin-top: 10px;
	margin-bottom: 5px;
}
body.ja .story_box .inner_content h2 {
	font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
body.en .story_box .inner_content h2 {
	font-family: Georgia, "Times New Roman", serif;
}
.story_box .inner_content p {
	margin: 12px 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.8;
}
.story_box .top {
	margin-bottom: -100px;
	position:relative;
	width:100%;
	height: 208px;
	background: url("/img/langtop/story_box/top/bar.png") repeat-x top;
}
.story_box .top .frame_left {
	z-index:1;
	position: absolute;
	top: 0;
	left: 0;
	width: 181px;
	height: 216px;
	background: url("/img/langtop/story_box/top/left.png") no-repeat left top / contain;
}
.story_box .top .frame_right {
	z-index:1;
	position: absolute;
	top: 0;
	right: 0;
	width: 181px;
	height: 216px;
	background: url("/img/langtop/story_box/top/right.png") no-repeat right top / contain;
}
.story_box .top .frame_center {
	z-index:2;
	position: absolute;
	top: 0px;
	left: 50%;
	width: 220px;
	height: 100px;
	transform: translateX(-50%);
	background: url("/img/langtop/story_box/center/top.png") no-repeat center top / contain;
}
.story_box .bottom .frame_left {
	z-index:1;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 176px;
	height: 199px;
	background: url("/img/langtop/story_box/bottom/left.png") no-repeat left bottom / contain;
}
.story_box .bottom .frame_right {
	z-index:1;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 176px;
	height: 199px;
	background: url("/img/langtop/story_box/bottom/right.png") no-repeat right bottom / contain;
}
.story_box .bottom {
	margin-top: -100px;
	position:relative;
	width:100%;
	height:199px;
	background: url("/img/langtop/story_box/bottom/bar.png") repeat-x bottom;
}
.story_box .bottom .frame_center {
	z-index:2;
	position: absolute;
	bottom: -12px;
	left: 50%;
	width: 220px;
	height: 112px;
	transform: translateX(-50%);
	background: url("/img/langtop/story_box/center/bottom.png") no-repeat center bottom / contain;
}
/*-----------------------------------*
 * howtoplay
 *-----------------------------------*/
.howtoplay {
	
}
.howtoplay h3{
	font-size: 30px;
	font-family: 'Zen Old Mincho', Helvetica, Arial, sans-serif;
	font-weight: 900;
	margin-top: 50px;
	margin-bottom: 30px;
	border-bottom: 2px solid #4d78cd;
	padding-bottom: 10px;
}
.howtoplay h4 {
	margin:50px 0 20px ;
	position: relative;
	padding-left: 18px;
}
.howtoplay h4:before {
	content: "";
	position: absolute;
	left: 0;
	top: 18px;
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 12px solid #f8676a;
	transform: translateY(-50%);
}
.explain {

}
.gameflow {
	margin-top:20px;
	display:flex;
	align-items: center;
	justify-content:space-between;
	gap:20px;
}
.gameflow .flowbox{
	padding:20px;
	border:2px solid #00f3ff;
	width:250px;
	border-radius: 10px;
}
.gameflow .flowbox .stage{
	text-align: center;
	margin-bottom: 20px;
	padding: 10px;
	background: #00f3ff;
	color: #000;
	border-radius: 5px;
}
.gameflow .flowbox .round{

}
.gameflow .flowbox .clear{
	white-space: nowrap;
	padding-left:30px;
	color:#00f3ff;
}
.gameflow .arrow{
	width:40px;
	height:40px;
	background:linear-gradient(
		90deg,
		#00f3ff,
		#00f3ff
	);
	clip-path:polygon(
		0 0,
		0% 0,
		100% 50%,
		0% 100%,
		0 100%
	);
}
.gameflow .last_arrow{
	width:50px;
	height:40px;
	background:linear-gradient(
		90deg,
		#00f3ff,
		#000
	);
	clip-path:polygon(
		0 0,
		0% 0,
		100% 50%,
		0% 100%,
		0 100%
	);
}
.medal {

}
.selectkeyboard {
	
}
.selectable {
	margin-top:20px;
	display:flex;
	flex-wrap:wrap;
	gap:20px 20px;
}
.selectkeyboard dl{
	border:1px solid #fff;
	max-width:400px;
	min-width:380px;
	width:100%;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
}
.selectkeyboard dt{
	padding:10px;
	text-align:center;
}
.selectkeyboard dd{
	padding:10px;
}
.selectkeyboard dt img{
	margin:0 !important;
	width:100px;
}
.medal img,
.guage img,
.extrastage img,
.selectkeyboard img,
.superlouisa img{
	margin:20px 0;
	width:100%;
}
.mt10 {
	margin-top:10px;
}
.mt20 {
	margin-top:20px;
}
.mt50 {
	margin-top:50px;
}
.mb80 {
	margin-bottom:80px;
}

/*===============================*
 * ★media query
 *===============================*/
@media (max-width: 768px){
	.selectable {
		margin-top:20px;
		display:block;
		gap:20px 50px;
	}
	.story_box {
		min-width:100%;
	}
	.story_box .inner_content h2 {
		font-size:24px;
	}
	.gameflow {
		flex-wrap:wrap;
	}
	.gameflow .flowbox{
		width:100%;
	}
	.gameflow .arrow,
	.gameflow .last_arrow {
		transform: rotate(90deg);
		margin:0 auto;
	}
	.selectkeyboard dt {
		width:100%;
	}
	.tg-start-main {
		font-size:26px !important;
	}
}
@media (max-width: 1300px){
	.selectkeyboard dl{
		margin-top:20px;
		min-width:100%;
		width:100%;
		flex-wrap: wrap;
	}
	.tg-start-btn {
		width:100% !important;
	}
}
@media (max-width: 1489px){
	.welcome_box {
		background-image:none;
	}
	.welcome_box .inner {
		margin-left:0;
	}
}














/*===============================*
 * ★tg-start-btn
 *===============================*/
.tg-start-btn {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: min(760px, 100%);
	height: 110px;
	margin: 60px auto 0;
	color: #00f0ff;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: .18em;
	filter: drop-shadow(0 0 10px rgba(0,240,255,.75));
	transition: .18s ease;
}

/* 外枠 */
.tg-start-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;

	background: #00f0ff;

	clip-path: polygon(
		18px 0,
		100% 0,
		100% calc(100% - 28px),
		calc(100% - 28px) 100%,
		0 100%,
		0 18px
	);
}

/* 本体 */
.tg-start-btn::after {
	content: "";
	position: absolute;
	inset: 2px;
	z-index: -1;

	background:
		linear-gradient(
			90deg,
			rgba(0,240,255,.12),
			rgba(0,240,255,.03) 45%,
			rgba(0,240,255,.12)
		),
		#031014;

	clip-path: polygon(
		17px 0,
		100% 0,
		100% calc(100% - 27px),
		calc(100% - 27px) 100%,
		0 100%,
		0 17px
	);

	box-shadow:
		inset 0 0 18px rgba(0,240,255,.25),
		inset 0 0 0 1px rgba(0,240,255,.35);
}

/* 内側ボーダー：左下 */
.tg-start-corner-bl {
	position: absolute;
	left: 16px;
	bottom: 14px;
	z-index: 2;

	width: 42px;
	height: 42px;

	border-left: 2px solid #00f0ff;
	border-bottom: 2px solid #00f0ff;

	pointer-events: none;
}

/* 内側ボーダー：右上 */
.tg-start-corner-tr {
	position: absolute;
	right: 16px;
	top: 14px;
	z-index: 2;

	width: 42px;
	height: 42px;

	border-top: 2px solid #00f0ff;
	border-right: 2px solid #00f0ff;

	pointer-events: none;
}

.tg-start-sub,
.tg-start-main {
	position: relative;
	z-index: 3;
}

.tg-start-sub {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 0px;
	text-shadow: 0 0 2px #00f0ff;
}

.tg-start-main {
	color: #00ff10;
	font-size: 34px;
	font-weight: 800;
	text-shadow:
		0 0 2px #00f0ff,
		0 0 2px rgba(0,240,255,.1);
}

.tg-start-btn:hover {
	filter:
		brightness(1.25)
		drop-shadow(0 0 18px rgba(0,240,255,.95));
}

.tg-start-btn:active {
	transform: translateY(1px);
	filter: brightness(.9);
}