@charset "utf-8";
/*------------------------------------------------------------
	game
------------------------------------------------------------*/
.comFvBox {
	padding-bottom: 190px;
}
#gNavi {
	bottom: 0;
}
#gNavi.fix {
    top: 106px;
}
#gNavi li a {
    padding: 21px 26px 28px;
}
#main {
/*
	padding: 30px 0 324px;
	background: url(./../img/common/bg01.png) no-repeat left 39% bottom 21px / 96.7% auto,url(./../img/common/bg02.png) no-repeat center bottom -332px / 100% 1353px;
	background-color: #FFFED2;
*/
}
#main .mainBox {
	margin: 0 auto;
	width: 78.1%;
	min-width: 1360px;
}
#main h2 {
	margin-bottom: 36px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#main h2 .imgtext {
	width: 244px;
}
#main h2 .txt {
	margin: 0 12% 0 -10px;
	color: #0B318F;
	font-size: 67px;
	letter-spacing: 0.02em;
}
#main .innerBox {
	margin-bottom: 58px;
	padding: 0 0 103px;
	position: relative;
	box-sizing: border-box;
	border-radius: 161px;
	background: rgba(255, 255, 255, 1);
}
#main .innerBox .title01 {
    margin: 0 auto -56px;
    max-width: 289px;
    transform: translate(-12px,-103px);
}
#main .innerBox p {
	font-size: 60px;
	font-weight: bold;
	line-height: 1.73;
}
#main .innerBox p ruby {
	position: relative;
}
#main .innerBox p rt {
	width: 100%;
	display: block;
	position: absolute;
	left: 0;
	top: -0.55em;
	text-align: center;
	font-size: 18px;
}
#main .innerBox .text01 {
	margin: 0 1% 73px 13.6%;
}

.flexB {
    justify-content: center;
}


#main .innerBox .btnList li {
	margin: 0 1.4%;
	width: 32%;
	position: relative;
}

#main .innerBox .btnList li a {
	display: block;
}
#main .innerBox .btnList li a:hover {
	opacity: 0.64;
}
#main .innerBox .btnList li .img {
	width: 31%;
    position: absolute;
    left: -39%;
    bottom: 10.5%;
}
#main .innerBox .btnList li .img01 {
	width: 49.75%;
    left: auto;
    right: -49.7%;
    bottom: -1%;
}
#gFooter {
    margin-top: 0;
}
@media all and (min-width: 1921px) {
	#main {
		background-size: 1857px auto,100% 1353px;
	}
}
@media (min-width: 897px) and (max-width: 1800px) {
    #gNavi li a {
        padding: 21px 1.5vw 28px;
    }
}
@media all and (min-width: 897px) {
    #gHeader {
        padding: 4px 25px 20px 41px;
        height: 106px;
    }
}
@media all and (min-width: 897px) and (max-height: 1620px) {
	#main h2 {
		margin-bottom: 2.222vh;
	}
	#main h2 .imgtext {
		width: 15.062vh;
	}
	#main h2 .txt {
		margin-left: -0.617vh;
		font-size: 4.136vh;
	}
	#main .innerBox {
		margin-bottom: 3.58vh;
		padding: 0 0 6.358vh;
		border-radius: 9.938vh;
	}
	#main .innerBox .title01 {
		margin-bottom: -3.457vh;
		max-width: 17.84vh;
		transform: translate(-0.741vh,-6.358vh);
	}
	#main .innerBox p {
		font-size: 3.704vh;
	}
	#main .innerBox p rt {
		font-size: 1.111vh;
	}
	#main .innerBox .text01 {
		margin-bottom: 4.506vh;
	}
	#main .innerBox .btnList li {
		margin: 0 1.296vw;
		width: 29.63vh;
	}
}
@media all and (max-width: 896px) {
	.comFvBox {
		margin-bottom: 0;
		padding-bottom: 46px;
	}
	#main {
		padding: 16px 0 178px;
		background: url(./../img/common/sp_bg01.png) no-repeat center bottom 47px / 393px auto,url(./../img/common/sp_bg02.jpg) no-repeat center bottom -117px / 100% 1068px;
		background-color: #FFFED2;
	}
	#main .mainBox {
		width: 94.5%;
		min-width: inherit;
	}
	#main h2 {
		margin-bottom: 0;
	}
	#main h2 .imgtext {
		margin-left: -34px;
		width: 65px;
	}
	#main h2 .txt {
		margin: 0 10px 0 -5px;
		font-size: 20px;
	}
	#main .innerBox {
		margin-bottom: 29px;
		padding: 17px 5% 45px;
		border-radius: 17px;
	}
	#main .innerBox .title01 {
		margin-bottom: -23px;
		width: 105px;
		transform: translate(-2px,-31px);
	}
	#main .innerBox p {
		font-size: 23px;
		line-height: 1.71;
	}
	#main .innerBox p rt {
		font-size: 8px;
	}
	#main .innerBox .text01 {
		margin: -9px -5px 37px 0;
	}
	#main .innerBox .btnList {
		margin: 0 1.1% 0 0;
		justify-content: space-between;
	}
	#main .innerBox .btnList li {
		margin: 0;
		width: 47.5%;
	}
	#main .innerBox .btnList li .img {
		margin: -0.5% 0 0 -5%;
		width: 32%;
		position: static;
		display: block;
	}
	#main .innerBox .btnList li .img01 {
		margin: -13.5% -7.5% 0 auto;
		width: 51%;
	}
    #main .comTxtBox {
        margin: 0;
    }
}
/*------------------------------------------------------------
	gameafter
------------------------------------------------------------*/
#main .after {
	margin-bottom: -33px;
}
#main .after h2 {
	margin-bottom: 56px;
}
#main .after h2 .txt {
	margin-right: 0;
}
#main .after .innerBox {
    margin-bottom: 68px;
	padding: 35px 0 63px;
}
#main .after .innerBox .title02 {
	margin: -138px auto 27px;
	height: 351px;
	text-align: center;
}
#main .after .innerBox .title02 img {
	max-height: 100%;
	width: auto;
}
#main .after .innerBox .text01 {
    margin: 0 10% 3px 12.5%;
    font-size: 63px;
    line-height: 2;
}
#main .after .innerBox .btn {
	position: relative;
}
#main .after .innerBox .btn a {
	margin: 0 auto;
	width: 36.5%;
	display: block;
}
#main .after .innerBox .btn a:hover {
    opacity: 0.64;
}
#main .after .innerBox .btn .img01 {
    margin-top: -130px;
	width: 10%;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
#main .after .innerBox .btn .img02 {
	margin-top: -38px;
	width: 15.9%;
	position: absolute;
	right: 2.4%;
	top: 50%;
	transform: translateY(-50%);
}
@media all and (min-width: 897px) and (max-height: 1620px) {
    #main .after .innerBox .title02 {
		margin: -8.519vh auto 1.3vh;
        height: 22vh;
    }
    #main .after .innerBox .text01 {
        font-size: 3.889vh;
    }
    #main .after .innerBox .btn a {
        height: 8.2vh;
        text-align: center;
    }
    #main .after .innerBox .btn a img {
        height: 100%;
        width: auto;
    }
}
@media all and (max-width: 896px) {
	#main .after {
		margin-bottom: 0;
	}
	#main .after h2 {
		margin-bottom: 0;
	}
	#main .after h2 .txt {
        margin-right: 8px;
	}
	#main .after .innerBox {
        margin-bottom: 31px;
		padding: 1px 4.5% 27px;
	}
	#main .after .innerBox .title02 {
        margin: -14px auto 5px;
		width: auto;
		height: 135px;
	}
	#main .after .innerBox .text01 {
        margin: 0 0 20px;
        font-size: 23px;
		line-height: 2.2;
	}
	#main .after .innerBox .btn a {
		width: 57.05%;
	}
	#main .after .innerBox .btn .img01 {
		margin-top: -6px;
		width: 15.05%;
		position: absolute;
		left: 4.09%;
		top: 50%;
		transform: translateY(-50%);
		z-index: 10;
	}
	#main .after .innerBox .btn .img02 {
		margin-top: -16px;
		width: 24%;
		right: -2%;
	}
}
/*------------------------------------------------------------
	gameend
------------------------------------------------------------*/
#main .end {
	margin-bottom: -37px;
}
#main .end h2 {
	margin-bottom: 52px;
}
#main .end h2 .txt {
	margin-right: -1%;
}
#main .end .innerBox {
    margin-bottom: 73px;
	padding: 0;
	display: flex;
}
#main .end .innerBox .lBox {
	padding: 95px 3% 68px;
	width: 29.05%;
	color: #fff;
	box-sizing: border-box;
	background: #20B5A6;
	border-radius: 161px 0 0 161px;
}
#main .end .innerBox .lBox h3 {
	margin-bottom: 80px;
	text-align: center;
	font-size: 101px;
	font-weight: normal;
	letter-spacing: 0.049em;
	line-height: 1;
}
#main .end .innerBox .lBox h3 ruby {
	position: relative;
}
#main .end .innerBox .lBox h3 rt {
	width: 100%;
	display: block;
	position: absolute;
	left: 0;
	top: -0.9em;
	text-align: center;
	font-size: 23px;
	font-weight: bold;
	letter-spacing: 0.008em;
}
#main .end .innerBox .lBox .txtList li {
	margin-bottom: 20px;
	padding-bottom: 14px;
	display: flex;
	align-items: center;
	border-bottom: 3px dotted #fff;
}
#main .end .innerBox .lBox .txtList li span {
	display: block;
}
#main .end .innerBox .lBox .txtList li .sub01 {
	margin-right: 6.2%;
	width: 49%;
	font-size: 60px;
	font-weight: bold;
	text-align: center;
	line-height: 1;
}
#main .end .innerBox .lBox .txtList li .sub02 {
	width: 27.5%;
	box-sizing: border-box;
}
#main .end .innerBox .rBox {
	box-sizing: border-box;
	padding: 62px 5.2% 45px 4%;
	position: relative;
	flex: 1;
	border-radius: 0 161px 161px 0;
}
#main .end .innerBox .rBox .imgtext {
	margin: -76px -71px 0 0;
    width: 350px;
	margin-left: auto;
}
#main .end .innerBox .rBox p {
	margin-top: -125px;
	margin-bottom: 60px;
	text-align: left;
	color: #E94C52;
	font-weight: bold;
	font-size: 526px;
	line-height: 1;
	letter-spacing: -0.05em;
}
#main .end .innerBox .rBox p span {
	font-size: 204px;
}
#main .end .innerBox .rBox .btn {
	margin-right: 1.5%;
}
#main .end .innerBox .rBox .btn .img01 {
	width: 14%;
	position: absolute;
	left: 2%;
	top: 20px;
}
#main .end .innerBox .rBox .btn a {
	margin: 0 auto;
	width: 60%;
	display: block;
}
#main .end .innerBox .rBox .btn a:hover {
	opacity: 0.64;
}
#main .end .innerBox .rBox .btn .img02 {
	width: 22.35%;
	position: absolute;
	right: 4.35%;
	bottom: 29px;
}
@media all and (min-width: 897px) and (max-height: 1620px) {
	#main .end {
		margin-bottom: -2.284vh;
	}
	#main .end h2 {
		margin-bottom: 3.21vh;
	}
	#main .end .innerBox {
		margin-bottom: 4.506vh;
	}
	#main .end .innerBox .lBox {
		padding: 4.321vh 2.778vh 4.198vh;
		width: 26.914vh;
		border-radius: 9.938vh 0 0 9.938vh;
	}
	#main .end .innerBox .lBox h3 {
		margin-bottom: 4.938vh;
		font-size: 6.235vh;
	}
	#main .end .innerBox .lBox h3 rt {
		font-size: 1.42vh;
	}
	#main .end .innerBox .lBox .txtList li {
		margin-bottom: 1.235vh;
		padding-bottom: 0.864vh;
	}
	#main .end .innerBox .lBox .txtList li .sub01 {
		margin-right: 1.296vh;
		width: 10.432vh;
		font-size: 3.704vh;
	}
	#main .end .innerBox .lBox .txtList li .sub02 {
		width: 5.85vh;
	}
	#main .end .innerBox .rBox {
		padding: 3.827vh 4.815vh 2.778vh 3.704vh;
		border-radius: 0 9.938vh 9.938vh 0;
	}
	#main .end .innerBox .rBox .imgtext {
		margin: -4.691vh -4.383vh 0 auto;
		width: 21.605vh;
	}
	#main .end .innerBox .rBox p {
		margin-top: -7.716vh;
		margin-bottom: 3.704vh;
		font-size: 32.469vh;
		text-align: center;
	}
	#main .end .innerBox .rBox p span {
		font-size: 12.593vh;
	}
	#main .end .innerBox .rBox .btn a {
		width: 33.765vh;
	}
}
@media (min-width: 897px) and (max-width: 1359px) {
	#main .mainBox {
		min-width: inherit;
		width: 100%;
	}
	#main .end .innerBox .rBox p {
		font-size: 200px;
	}
}
@media all and (max-width: 896px) {
	#main .end {
		margin-bottom: 0;
	}
	#main .end h2 {
		margin-bottom: -2px;
	}
	#main .end .innerBox {
        margin-bottom: 30px;
		display: block;
	}
	#main .end .innerBox .lBox {
		padding: 20px 2% 19px;
		width: auto;
		border-radius: 17px 17px 0 0;
	}
	#main .end .innerBox .lBox h3 {
		margin-bottom: 25px;
		font-size: 31px;
	}
	#main .end .innerBox .lBox h3 rt {
		font-size: 7px;
		top: -0.5em;
	}
	#main .end .innerBox .lBox .txtList {
		margin-top: -17px;
		display: flex;
		flex-wrap: wrap;
	}
	#main .end .innerBox .lBox .txtList li {
		margin: 17px 2% 0 0;
		padding-bottom: 5px;
		width: 31.9%;
		align-items: flex-end;
		box-sizing: border-box;
		border-bottom: 1px dotted #fff;
	}
	#main .end .innerBox .lBox .txtList li:nth-child(3n) {
		margin-right: 0;
	}
	#main .end .innerBox .lBox .txtList li .sub01 {
		margin-right: 3%;
		width: 48%;
		font-size: 19px;
		line-height: 1.2;
	}
	#main .end .innerBox .lBox .txtList li .sub02 {
		width: 40%;
		text-align: center;
	}
	#main .end .innerBox .lBox .txtList li .sub02 img {
		width: 32px;
	}
	#main .end .innerBox .lBox .txtList li .sub02.error {
		padding: 0;
	}
	#main .end .innerBox .lBox .txtList li .sub02.error img {
		width: 28px;
	}
	#main .end .innerBox .rBox {
		padding: 30px 4% 27px;
		border-radius: 0 0 17px 17px;
	}
	#main .end .innerBox .rBox .imgtext {
        margin: 0;
		width: 114px;
		position: absolute;
		right: 0;
		top: -49px;
	}
	#main .end .innerBox .rBox p {
		margin: 0 14px 5px 0;
		text-align: center;
		font-size: 184px;
	}
	#main .end .innerBox .rBox p span {
		font-size: 59px;
	}
	#main .end .innerBox .rBox .btn {
		margin-right: 1%;
		position: relative;
	}
	#main .end .innerBox .rBox .btn .img01 {
		width: 14.9%;
		left: 4.2%;
		top: -10px;
	}
	#main .end .innerBox .rBox .btn .img02 {
		width: 24%;
		right: -2%;
		bottom: 0;
	}
}
@media all and (max-width: 374px) {
	#main .end .innerBox .rBox p {
		font-size: 160px;
	}
}