@charset "utf-8";

/* ヘッダー */
header {
	position: relative;
	margin: 0 auto;
	display: block;
	width: 100%;
}
header #keyvisual {
	position: relative;
	margin: 0 auto;
	display: block;
	background-image: url("../images/main.jpg");
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: contain;
	padding-top: 56.181%;
	width: 100%;
}

/* check */
#check {
	position: relative;
	margin: 0 auto;
	padding: 50px 0 30px 0;
	background-image: url("../images/bg_play01.png"), url("../images/bg_play02.png"), url("../images/bar02.png"),
		url("../images/bar01.png"), url("../images/bg_catch.jpg");
	background-position: 0 24px, 100% 24px, 0 0, 0 100%, 50% 100%;
	background-repeat: no-repeat, no-repeat, repeat-x, repeat-x, repeat-x;
	background-size: auto calc(100% - 31px), auto calc(100% - 31px), auto 41px, auto 14px, auto 120%;
}
#check .Ttl {
	position: relative;
	margin: 0 auto;
	padding: 15px 0;
	width: calc(100% - 55px);
	max-width: 900px;
	background-color: #ffffff;
}
#check .Ttl::before {
	position: absolute;
	top: 5px;
	left: 5px;
	width: calc(100% - 12px);
	height: calc(100% - 12px);
	border: solid 1px #7d1f22;
	content: "";
	display: block;
}
#check .Ttl::after {
	position: absolute;
	top: 0;
	left: -8px;
	width: 40px;
	height: 300%;
	background-image: url("../images/ttl_point_icon.png");
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: block;
}
#check .Ttl .checkBTtl {
	position: relative;
	margin: 0 auto;
	padding: 10px 0 0 15px;
	text-align: center;
	font-size: 0.18rem;
	font-weight: 900;
}
#check .Ttl .checkBTtl span {
	font-size: 0.13rem;
	font-weight: 500;
	display: block;
}
#check .checkTxt {
	position: relative;
	margin: 20px auto 0 auto;
	width: calc(100% - 30px);
	max-width: 600px;
	padding: 20px 10px 1px 10px;
}
#check .checkTxt .checkBlock {
	position: relative;
	margin: 0 auto 20px auto;
}
#check .checkTxt .checkBTxt {
	position: relative;
	margin: 0;
	width: calc(100% - 25px);
}
#check .checkTxt .checkBTxt p {
	font-size: 0.12rem;
	color: #7c2728;
	line-height: 1.5em;
}

/* play */
#play {
	position: relative;
	margin: 0 auto;
	padding: 60px 0 30px 0;
	background-image: url("../images/bar02.png"), url("../images/bg_story01.png"), url("../images/bg_story02.png"),
		url("../images/bg_red.jpg");
	background-position: 0 0, 0 25px, 0 100%, 0 0;
	background-repeat: repeat-x, no-repeat, no-repeat, repeat;
	background-size: auto 41px, 100% auto, 100% auto, 124px auto;
}
#play .playWrap {
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
	max-width: 960px;
	background-color: #ffffff;
	border: solid 1px #707070;
	border-radius: 10px;
}
#play .playWrap h2 {
	position: relative;
	margin: 0 auto;
	padding: 10px 0;
	color: #ffffff;
	font-size: 0.18rem;
	font-weight: 700;
	text-align: center;
	background-color: #231916;
	border-top-left-radius: 9px;
	border-top-right-radius: 9px;
}
#play .playWrap h2::after {
	position: absolute;
	top: -5px;
	left: 12%;
	width: 30px;
	height: 200%;
	background-image: url("../images/ttl_play_icon.png");
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: block;
}
#play .playWrap ul {
	position: relative;
	margin: 30px auto 0 auto;
	max-width: 960px;
}
#play .playWrap li {
	position: relative;
	margin: 20px auto;
	padding-bottom: 20px;
	width: calc(100% - 30px);
	border-bottom: solid 1px #d0d0d0;
	gap: 0 10px;
}
#play .playWrap li:last-child {
	border-bottom: none;
}
#play .playWrap li .playImg {
	position: relative;
	margin: 0;
	width: 30%;
	max-width: 80px;
}
#play .playWrap li .playTxt {
	position: relative;
	margin: 0;
	width: calc(70% - 10px);
	min-width: calc(100% - 90px);
}
#play .playWrap li .playTxt .attention {
	position: relative;
	margin: 0 auto;
	padding-bottom: 10px;
	font-size: 0.16rem;
	font-weight: 700;
	color: #cf141f;
}
#play .playWrap li .playTxt .attention span {
	background-color: #cf141f;
	color: #ffffff;
	display: inline-block;
	width: auto;
	padding: 0 3px;
	margin-right: 10px;
}

/* 動作環境 */
#env {
	position: relative;
	margin: 0 auto;
	padding: 0 0 30px 0;
	background-image: url("../images/bar02.png");
	background-position: 0 0;
	background-repeat: repeat-x;
	background-size: auto 41px;
}
#env h2 {
	position: absolute;
	top: 22px;
	left: 0;
	width: 100%;
	background-color: #231916;
	padding: 10px 0;
	color: #ffffff;
	font-size: 0.18rem;
	font-weight: 700;
	text-align: center;
}
#env h2::after {
	position: absolute;
	top: -5px;
	left: 16%;
	width: 30px;
	height: 200%;
	background-image: url("../images/ttl_env_icon.png");
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: block;
}
#env .envWrap {
	position: relative;
	margin: 0 auto;
	padding: 80px 0 30px 0;
}
#env .envWrap ul {
	position: relative;
	margin: 20px auto 0 auto;
	width: calc(100% - 40px);
}
#env .envWrap ul li {
	position: relative;
	margin: 0;
	padding: 0 0 10px 1.2em;
	line-height: 1.6em;
}
#env .envWrap ul li::before {
	position: absolute;
	top: 0;
	left: 0;
	content: "■";
	color: #cf141f;
}
#env .ttlS {
	position: relative;
	margin: 20px auto 0 auto;
	width: calc(100% - 30px);
	max-width: 800px;
	background-color: #cf141f;
	color: #ffffff;
	text-align: center;
}
#env dl {
	position: relative;
	margin: 0 auto;
	width: calc(100% - 60px);
	max-width: 780px;
}
#env dl dt {
	position: relative;
	margin: 0;
	padding: 3px 0.5em 3px 0;
	width: 6em;
	text-align: right;
}
#env dl dd {
	position: relative;
	margin: 0;
	padding: 5px 0;
	width: calc(100% - 6.5em);
}
#env .linkArea {
	position: relative;
	margin: 20px auto 0 auto;
	width: calc(100% - 110px);
	max-width: 520px;
}
#env p {
	position: relative;
	margin: 20px auto 0 auto;
	width: calc(100% - 80px);
	max-width: 720px;
}

/* FAQ */
#precautions {
	position: relative;
	margin: 0 auto;
	padding: 70px 0 30px 0;
	background-image: url("../images/bar02.png"), url("../images/bg_story01.png"), url("../images/bg_story02.png"),
		url("../images/bg_red.jpg");
	background-position: 0 0, 0 25px, 0 100%, 0 0;
	background-repeat: repeat-x, no-repeat, no-repeat, repeat;
	background-size: auto 41px, 100% auto, 100% auto, 124px auto;
}
#precautions .cautionWrap {
	position: relative;
	margin: 0 auto 15px auto;
	width: calc(100% - 30px);
	max-width: 960px;
	background-color: #ffffff;
}
#precautions .cautionWrap::before {
	position: absolute;
	top: 5px;
	left: 5px;
	width: calc(100% - 12px);
	height: calc(100% - 12px);
	border: solid 1px #7d1f22;
	content: "";
	display: block;
}
#precautions .cautionWrap::after {
	position: absolute;
	top: 18px;
	left: 12px;
	width: 20px;
	height: 20px;
	background-position: 0 50%;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: block;
}
#precautions .cautionWrap.cautionlist::after {
	background-image: url("../images/icon01.png");
}
#precautions .cautionWrap.faqlist::after {
	background-image: url("../images/icon02.png");
}
#precautions .cautionWrap.limitlist::after {
	background-image: url("../images/icon03.png");
}
#precautions .cautionWrap .ttl {
	position: relative;
	margin: 0 auto;
	padding: 15px 0;
	z-index: 10;
	cursor: pointer;
}
#precautions .cautionWrap .ttl p {
	position: relative;
	margin: 0 auto;
	width: calc(100% - 65px);
	text-align: center;
	line-height: 1.8em;
	font-weight: 900;
}
#precautions .ttl::after {
	position: absolute;
	top: 50%;
	right: 15px;
	content: "▼";
	display: block;
	font-size: 0.1rem;
	transition: all 0.3s ease-out;
	transform: translateY(-50%);
}
#precautions .ttl.disp::after {
	transform: translateY(-50%) rotate(-180deg);
}
#precautions .faqWrap {
	position: relative;
	margin: 0 auto;
	padding: 0 20px;
	height: 0;
	overflow: hidden;
	transition: all 0.3s ease-out;
	z-index: 9;
}
#precautions .faqWrap.disp {
	height: auto !important;
	padding: 0 20px 20px 20px;
	margin: 0 auto;
}
#precautions .faqWrap dl {
	position: relative;
}
#precautions .faqWrap dl dd {
	padding: 15px 0;
}
#precautions #faq.faqWrap dl dd {
	padding: 5px 0 0 0;
}
#precautions .faqWrap dl dd p {
	position: relative;
	padding-bottom: 0.8em;
	text-align: left;
	line-height: 1.5em;
}
#precautions dl dd p {
	padding-left: 1.2em;
}
#precautions #faq.faqWrap dl dt p {
	color: #7d1f22;
	font-weight: 500;
	text-align: left;
	line-height: 1.6em;
	font-size: 0.14rem;
}
#precautions dl dd p::before {
	position: absolute;
	content: "■";
	left: 0;
	color: #cf141f;
}
#precautions .faqWrap dl dd .caution {
	line-height: 1.4em;
	display: block;
	padding: 5px 0 0 0;
	text-align: left;
}

/* confirm */
#confirm {
	position: relative;
	margin: 0 auto;
	padding: 50px 0;
	padding: 50px 0 30px 0;
	background-image: url("../images/bar02.png"), url("../images/bar01.png"), url("../images/bg_product.jpg");
	background-position: 0 0, 0 100%, 50% 100%;
	background-repeat: repeat-x, repeat-x, repeat;
	background-size: auto 41px, auto 14px, 320px auto;
}
#confirm .confWrap {
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	z-index: 40;
	padding: 20px 15px;
	max-width: 900px;
	background-color: #ffffff;
}
#confirm .confWrap::before {
	position: absolute;
	top: 5px;
	left: 5px;
	width: calc(100% - 12px);
	height: calc(100% - 12px);
	border: solid 1px #7d1f22;
	content: "";
	display: block;
}
#confirm .confWrap .confBtn {
	position: relative;
	margin: 0 auto;
	opacity: 0.5;
	pointer-events: none;
	transition: all 0.3s ease-out;
}
#confirm .confWrap .confBtn.disp {
	opacity: 1;
	pointer-events: auto;
}
#confirm .confWrap .checkBlock {
	position: relative;
	margin: 0 auto 10px auto;
}
#confirm .confWrap .checkBlock .inputArea {
	margin: 6px 0;
}
#confirm .confWrap .checkBlock .confirmTxt {
	position: relative;
	margin: 5px 0 10px 0;
	text-align: center;
	width: 100%;
}
#confirm .confWrap .checkBlock .confirmAtt {
	width: 100%;
	font-size: 80%;
	text-align: center;
}
#confirm #msgBlock {
	position: relative;
	margin: 0 auto;
	width: calc(100% - 50px);
	z-index: 40;
	padding: 0;
	max-width: 960px;
	font-weight: 900;
	background-color: #ffffff;
	text-align: center;
}
#confirm #msgBlock div {
	margin: 30px 0 !important;
}
#confirm input[type="checkbox"] + label:before {
	width: 25px;
	height: 25px;
}

/* enq form */
.formArea {
	position: relative;
	margin: 20px auto 0 auto;
	width: calc(100% - 20px);
	max-width: 500px;
}
.formArea dl {
	position: relative;
	margin: 0 auto;
}
.formArea dl dt {
	position: relative;
	font-weight: 700;
	padding-left: 1.5em;
}
.formArea dl dt::before {
	position: absolute;
	top: 0;
	left: 0;
	content: "\025b6";
	color: #af0036;
	font-size: 0.14rem;
}
.formArea dl dt p {
	position: relative;
	display: block;
}
.formArea dl dt span {
	padding: 0;
	font-size: 0.12rem;
	display: inline-block;
	font-weight: 500;
}
.formArea dl dt.formcheck span {
	padding: 10px 0;
}
.formArea dl dt span.check {
	color: #ca2f8a;
	font-size: 0.14rem;
	padding-left: 0.5em;
}
.formArea dl dd {
	position: relative;
	margin: 5px 0 25px 1.5em;
	width: calc(100% - 20px);
	font-size: min(3.5vw, 0.16rem);
}
.formArea label {
	display: inline-block;
	width: 49%;
	padding: 2px 0;
}
.formArea .width100 label {
	display: block;
	width: 100%;
	padding: 2px 0;
}
.formArea .inputRadio,
.formArea .inputCheck {
	margin-right: 10px;
}
.formArea .radioBtn {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: space-between;
}
.inputRadio_Btn {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
}
.labelRadio {
	display: inline-block;
	margin: 0;
	width: calc(10% - 6px) !important;
	height: 50px;
	text-align: center;
	line-height: 50px;
	cursor: pointer;
	background-color: #cccccc;
	border-radius: 5px;
	box-shadow: 0px 0px 2px 1px #ffffff;
}
.inputRadio_Btn:checked + .labelRadio {
	background: rgb(255, 255, 255, 0.8);
	color: #000000;
	box-shadow: 0px 0px 2px 1px #999999;
}
.inputRadio_Btn:focus + .labelRadio {
	outline-color: transparent;
	outline-offset: -2px;
	outline-style: auto;
	outline-width: 5px;
}
.formArea button#btn_enq {
	padding: 8px 2.5em;
	display: block;
	margin: 30px auto;
	background: #163376;
	color: #ffffff;
	font-weight: 900;
	border-radius: 10px;
	font-size: 0.15rem;
	border: solid 1px #163376;
	transition: all 0.3s ease-out;
}
.formArea input[type="checkbox"] {
	display: inline;
}

/* select */
#select {
	position: relative;
	margin: 0 auto;
	min-height: calc(100vh - 90px);
	padding: 60px 0 30px 0;
	background-image: url("../images/bar01.png"), url("../images/bar02.png"), url("../images/bg_story01.png"),
		url("../images/bg_story02.png"), url("../images/bg_red.jpg");
	background-position: 0 100%, 0 0, 0 25px, 0 100%, 0 0;
	background-repeat: repeat-x, repeat-x, no-repeat, no-repeat, repeat;
	background-size: auto 12px, auto 41px, 100% auto, 100% auto, 124px auto;
}
#select .selectWrap {
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
	max-width: 960px;
	background-color: #ffffff;
	border: solid 1px #707070;
	border-radius: 10px;
}
#select .selectWrap h2 {
	position: relative;
	margin: 0 auto 30px auto;
	padding: 10px 20px 10px 50px;
	color: #ffffff;
	font-size: 0.18rem;
	font-weight: 700;
	text-align: center;
	background-color: #231916;
	border-top-left-radius: 9px;
	border-top-right-radius: 9px;
}
#select .selectWrap h2::after {
	position: absolute;
	top: -5px;
	left: 10px;
	width: 30px;
	height: 200%;
	background-image: url("../images/ttl_play_icon.png");
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: block;
}
#select .selectWrap .lead {
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	max-width: 960px;
}
#select .selectWrap .selectBtn {
	position: relative;
	margin: 30px auto;
	width: calc(100% - 10px);
	gap: 0 10px;
}
#select .selectWrap .lead .strong {
	position: relative;
	margin: 20px auto;
	color: #7d1f22;
	font-size: 0.16rem;
}
#select .selectWrap .nextBtn {
	position: relative;
	margin: 30px auto;
	width: calc(100% - 30px);
}
#select .selectWrap #createPlayForm,
#select .selectWrap #joinPlayForm,
#select .selectWrap #continuePlayForm,
#select .selectWrap #selectPlayerForm {
	position: relative;
	margin: 0 auto 30px auto;
}
#select .selectWrap .cautionWrap {
	position: relative;
	margin: 0 auto;
}
#select .selectWrap .cautionWrap p {
	position: relative;
	padding: 0 0 5px 1.2em;
	font-size: 0.12rem;
	line-height: 1.6em;
}
#select .selectWrap .cautionWrap p::before {
	position: absolute;
	top: 0;
	left: 0;
	content: "※";
}
#select .selectWrap .charaList {
	position: relative;
	margin: 10px auto 30px auto;
	width: calc(100% - 30px);
	gap: 10px 30px;
}
#select .selectWrap .charaList div {
	position: relative;
	margin: 0;
	width: calc(50% - 70px);
	max-width: 80px;
	padding: 20px;
	border: solid 2px #ffffff;
	border-radius: 5px;
	transition: all 0.3s ease-out;
}
#select .selectWrap .charaList div:hover {
	cursor: pointer;
	border: solid 2px #7d1f22;
}
.charaNoSelect {
	border: solid 2px #bbbbbb !important;
	background-color: rgba(211, 211, 211, 0.4);
	opacity: 0.3;
	pointer-events: none;
}
.charaSelected {
	border: solid 2px #7d1f22 !important;
	background-color: rgba(255, 221, 221, 0.4);
}
.charaSelected::after {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	content: "";
	display: block;
	background-image: url("../images/checkmark.png");
	background-position: 50% 50%;
	background-size: contain;
}
#select .selectWrap .opMovie {
	position: relative;
	margin: 30px auto;
	width: calc(100% - 30px);
}
#select .selectWrap .warning {
	position: relative;
	margin: 0 auto;
	color: #7d1f22;
	font-size: 0.16rem;
}
#select .nextTxt {
	padding-top: 30px;
}
#select button:disabled,
#select input:disabled {
	opacity: 0.3;
	pointer-events: none;
}
#select #loadingRoomId {
	position: relative;
	display: none;
}
#select .loadingTxt {
	position: relative;
	padding: 5px 0;
}
#select .loadingTxt p {
	position: relative;
	margin: 0;
	width: 10em;
}
#select .loadingTxt .loader {
	position: relative;
	margin: 0;
	width: 20px;
	aspect-ratio: 1;
	border-radius: 50%;
	padding: 6px;
	background: conic-gradient(from 135deg at top, currentColor 90deg, #0000 0) 0 calc(50% - 4px) / 17px 8.5px,
		radial-gradient(farthest-side at bottom left, #0000 calc(100% - 6px), currentColor calc(100% - 5px) 99%, #0000)
			top right/50% 50% content-box content-box,
		radial-gradient(farthest-side at top, #0000 calc(100% - 6px), currentColor calc(100% - 5px) 99%, #0000) bottom /
			100% 50% content-box content-box;
	background-repeat: no-repeat;
	animation: l11 1s infinite linear;
}
@keyframes l11 {
	100% {
		transform: rotate(1turn);
	}
}

/* ----- pc ----- */
@media screen and (min-width: 641px) {
	/* header */
	header #keyvisual {
		background-image: url("../images/main_pc.jpg");
	}

	/* check */
	#check {
		background-position: 0 34px, 100% 34px, 0 0, 0 100%, 50% 100%;
		background-size: auto calc(100% - 41px), auto calc(100% - 41px), auto 60px, auto 14px, auto 120%;
		padding: 100px 0 60px 0;
	}
	#check .Ttl::after {
		left: 30px;
		width: 50px;
	}
	#check .Ttl .checkBTtl {
		padding: 15px 0 0 0;
		font-size: 0.24rem;
	}
	#check .Ttl .checkBTtl span {
		font-size: 0.15rem;
		font-weight: 500;
	}
	#check .checkTxt {
		width: calc(100% - 30px);
		padding: 20px 55px;
	}
	#check .checkTxt .checkBTxt {
		width: calc(100% - 35px);
	}
	#check .checkTxt .checkBTxt p {
		font-size: 0.14rem;
	}

	/* play */
	#play {
		padding: 80px 0 60px 0;
		background-image: url("../images/bar02.png"), url("../images/bg_story01_pc.png"),
			url("../images/bg_story02_pc.png"), url("../images/bg_red.jpg");
		background-position: 0 0, 50% 35px, 50% 100%, 0 0;
		background-size: auto 60px, min(100%, 1226px) auto, min(100%, 1216px) auto, 248px auto;
	}
	#play .playWrap h2 {
		padding: 15px 0;
		font-size: 0.24rem;
	}
	#play .playWrap h2::after {
		top: -5px;
		left: 12%;
		width: 50px;
	}
	#play .playWrap ul {
		margin: 70px auto 0 auto;
	}

	#play .playWrap li {
		margin: 40px auto;
		padding-bottom: 40px;
		width: calc(100% - 120px);
		gap: 0 30px;
	}
	#play .playWrap li .playImg {
		max-width: 90px;
	}
	#play .playWrap li .playTxt {
		width: calc(70% - 30px);
		min-width: calc(100% - 140px);
	}
	#play .playWrap li .playTxt .attention {
		padding-bottom: 20px;
		font-size: 0.2rem;
	}
	#play .playWrap li .playTxt .attention span {
		padding: 0 6px;
	}

	/* 動作環境 */
	#env {
		background-size: auto 60px;
		padding: 0 0 60px 0;
	}
	#env h2 {
		top: 38px;
		padding: 15px 0;
		font-size: 0.24rem;
	}
	#env h2::after {
		left: calc(50% - 300px);
		width: 50px;
		height: 200%;
	}
	#env .envWrap {
		padding: 100px 0 0 0;
		background-position: 0 31px, 100% 31px;
		background-size: auto calc(100% - 31px), auto calc(100% - 31px);
	}
	#env .ttlS {
		margin: 60px auto 0 auto;
		padding: 3px 0;
	}
	#env .envWrap ul {
		margin: 60px auto 0 auto;
		max-width: 800px;
	}

	/* FAQ */
	#precautions {
		padding: 120px 0 60px 0;
		background-image: url("../images/bar02.png"), url("../images/bg_story01_pc.png"),
			url("../images/bg_story02_pc.png"), url("../images/bg_red.jpg");
		background-position: 0 0, 50% 35px, 50% 100%, 0 0;
		background-size: auto 60px, min(100%, 1226px) auto, min(100%, 1216px) auto, 248px auto;
	}
	#precautions .cautionWrap {
		margin: 0 auto 25px auto;
	}

	#precautions .cautionWrap::after {
		top: 22px;
		left: 25px;
		width: 30px;
		height: 30px;
	}
	#precautions .cautionWrap .ttl {
		padding: 20px 0;
	}
	#precautions .cautionWrap .ttl p {
		width: calc(100% - 120px);
		font-size: 0.2rem;
	}
	#precautions .ttl::after {
		right: 40px;
		font-size: 0.13rem;
	}
	#precautions .faqWrap {
		padding: 0 40px;
	}
	#precautions .faqWrap.disp {
		padding: 20px 40px;
	}

	/* confirm */
	#confirm {
		padding: 70px 0;
	}
	#confirm::before {
		top: 19px;
		height: calc(100% - 38px);
		background-size: 22px auto, 22px auto;
	}
	#confirm::after {
		left: 22px;
		width: calc(100% - 44px);
		background-size: auto 22px, auto 22px;
	}
	#confirm .confWrap {
		max-width: 1000px;
		padding: 40px 0;
	}
	#confirm .confWrap .checkBlock {
		margin: 0 auto;
	}
	#confirm .confWrap .checkBlock .confirmTxt {
		font-size: 0.16rem;
		font-weight: 900;
		width: auto;
		margin: 0.2em 0 0 0;
		display: inline-block;
	}
	#confirm .confWrap .checkBlock .br {
		width: 100%;
		height: 1px;
	}
	#confirm .confWrap .checkBlock .confirmAtt {
		padding-bottom: 1em;
	}
	.formArea {
		margin: 20px auto;
	}
	#confirm #msgBlock {
		font-size: 120%;
		line-height: 1.9em;
	}
	#confirm input[type="checkbox"] + label:before {
		width: 20px;
		height: 20px;
	}

	/* select */
	#select {
		min-height: calc(100vh - 180px);
		padding: 120px 0 60px 0;
		background-image: url("../images/bar01.png"), url("../images/bar02.png"), url("../images/bg_story01_pc.png"),
			url("../images/bg_story02_pc.png"), url("../images/bg_red.jpg");
		background-position: 0 100%, 0 0, 50% 35px, 50% 100%, 0 0;
		background-size: auto 29px, auto 60px, min(100%, 1226px) auto, min(100%, 1216px) auto, 248px auto;
		text-align: center;
	}
	#select .selectWrap h2 {
		padding: 15px 0;
		font-size: 0.24rem;
		margin: 0 auto 50px auto;
	}
	#select .selectWrap h2::after {
		top: -5px;
		left: 30px;
		width: 50px;
	}

	#select .selectWrap .selectBtn {
		margin: 50px auto;
		width: calc(100% - 30px);
	}
	#select .selectWrap .lead .strong {
		margin: 20px auto;
		font-size: 0.18rem;
	}
	#select .selectWrap .nextBtn {
		margin: 50px auto;
	}
	#select .selectWrap #createPlayForm,
	#select .selectWrap #joinPlayForm,
	#select .selectWrap #continuePlayForm,
	#select .selectWrap #selectPlayerForm {
		margin: 0 auto 50px auto;
	}
	#select .selectWrap .cautionWrap {
		max-width: 600px;
	}
	#select .selectWrap .cautionWrap p {
		font-size: 0.14rem;
		line-height: 1.6em;
		text-align: left;
	}
	#select .selectWrap .charaList {
		margin: 40px auto 10px auto;
	}
	#select .selectWrap .opMovie {
		margin: 50px auto;
	}
	#select .selectWrap .warning {
		font-size: 0.18rem;
	}
}