@charset "utf-8";

#rule-box ul {
	display: none;
}

#catch-box p {
	color: #802186;
	font-weight: bold;
}
#catch-box p span.pink {
	color: #ff48ff;
}


@media screen and (max-width: 640px) {
	#main-box {
		width: 100%;
	}
	#main-box-inner {
		padding: 0 0 24.6%;
	}

	/* #logo-box */
	#logo-box {
		width: 86%;
		margin: 0 auto 9.6%;
	}
	#logo-box h2 {
		display: block;
		background: url(../sakkyoku/images/logo.png) no-repeat 0 0;
		font-size: 0px;
		line-height: 0px;
		text-indent: -9999px;
		padding: 62.727272% 0 0;
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
	}

	/* #catch-box */
	#catch-box {
		width: 93.75%;
		margin: 0 auto 16.4%;
	}
	#catch-box h4 {
		display: block;
		background: url(../sakkyoku/images/catch-sp.png) no-repeat 0 0;
		font-size: 0px;
		line-height: 0px;
		text-indent: -9999px;
		padding: 29.46128% 0 0;
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		margin: 0 0 11.6%;
	}
	#catch-box p {
		font-size: 5.0vw; /* 32px */
		line-height: 1.5;
	}

	/* #rule-box */
	#rule-box {
		width: 93.75%;
		margin: 0 auto 22.6%;
	}
	#rule-box-inner {
	}
	#rule-box h5 {
		display: block;
		background: url(../sakkyoku/images/rule-sp.png) no-repeat 0 0;
		font-size: 0px;
		line-height: 0px;
		text-indent: -9999px;
		padding: 155.298013% 0 0;
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
	}

	/* #profile-box */
	#profile-box {
		width: 93.75%;
		margin: 0 auto;
	}
	#profile-box-inner {
	}

	#profile-box h3 {
		width: 95%;
		background: #ffeb25;
		font-size: 8.125vw; /* 52px */
		line-height: 1.0;
		color: #f643f2;
		text-align: center;
		padding: 0.8em 0.8em 0.7em;
		margin: 0 auto 30px;
	}

	#profile-box .profile-corner {
		width: 100%;
		margin: 0 auto;
	}
	#profile-box .profile-frame {
		width: 100%;
		margin: 0 auto 12.4%;
	}
	#profile-box .profile-frame:nth-of-type(2) {
		margin: 0 auto;
	}
	#profile-box .profile-frame figure {
		display: block;
		background: url(../sakkyoku/images/fr-pink-sp.png) no-repeat 0 0;
		padding: 98.6711% 0 0;
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		position: relative;
	}
	#profile-box .profile-frame:nth-of-type(2) figure {
		background: url(../sakkyoku/images/fr-green-sp.png) no-repeat 0 0;
		padding: 98.6711% 0 0;
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
	}
	#profile-box .profile-frame figure img {
		width: 86.66667%;
		position: absolute;
		top: 20.8754%;
		left: 9.9668%;
	}
	#profile-box .profile-frame .detail {
		width: 93.33333%;
		background: #ff48ff;
		padding: 0 1.2em 1.8em;
		margin: 0 0 0 6.66667%;
	}
	#profile-box .profile-frame:nth-of-type(2) .detail {
		background: #29dab4;
	}
	#profile-box .profile-frame .detail h4 {
		font-size: 9.375vw; /* 60px */
		color: #6b0073;
		padding: 0.36em 0 0 0;
		margin: 0 0 7.2%;
		text-shadow : 
			2px 2px 1px #fff,
			-2px 2px 1px #fff,
			2px -2px 1px #fff,
			-2px -2px 1px #fff,
			2px 0px 1px #fff,
			0px 2px 1px #fff,
			-2px 0px 1px #fff,
			0px -2px 1px #fff;
	}
	#profile-box .profile-frame:nth-of-type(2) .detail h4 {
		line-height: 1.2;
		padding: 0;
		margin: 0 0 3.6%;
	}
	#profile-box .profile-frame .detail h4 span {
		font-size: 7.5vw; /* 48px */
	}
	#profile-box .profile-frame .detail p {
		font-size: 5.0vw; /* 32px */
		font-weight: bold;
		line-height: 1.8;
		color: #fff;
	}
}


@media screen and (min-width: 641px) {
	#main-box {
		width: 100%;
		padding: 122px 0 120px;
		margin: -122px 0 0;
	}
	#main-box-inner {
	}

	/* #logo-box */
	#logo-box {
		width: 406px;
		margin: 0 auto 64px;
	}
	#logo-box h2 {
		display: block;
		background: url(../sakkyoku/images/logo.png) no-repeat 0 0;
		font-size: 0px;
		line-height: 0px;
		text-indent: -9999px;
		text-decoration: none;
		width: 406px;
		height: 255px;
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
	}

	/* #catch-box */
	#catch-box {
		width: 750px;
		margin: 0 auto 54px;
	}
	#catch-box h4 {
		display: block;
		background: url(../sakkyoku/images/catch-pc.png) no-repeat 0 0;
		font-size: 0px;
		line-height: 0px;
		text-indent: -9999px;
		text-decoration: none;
		width: 746px;
		height: 79px;
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		margin: 0 0 20px;
	}
	#catch-box p {
		font-size: 16px;
		line-height: 2.2;
	}
	#catch-box p span {
		font-size: 18px;
	}

	/* #rule-box */
	#rule-box {
		width: 980px;
		margin: 0 auto 120px;
	}
	#rule-box-inner {
	}
	#rule-box h5 {
		display: block;
		background: url(../sakkyoku/images/rule-pc.png) no-repeat 0 0;
		font-size: 0px;
		line-height: 0px;
		text-indent: -9999px;
		text-decoration: none;
		width: 960px;
		height: 310px;
	}

	/* #profile-box */
	#profile-box {
		width: 980px;
		margin: 0 auto;
	}
	#profile-box-inner {
	}

	#profile-box h3 {
		width: 940px;
		background: #ffeb25;
		font-size: 34px;
		line-height: 1.0;
		color: #f643f2;
		text-align: center;
		padding: 0.8em 0.8em 0.7em;
		margin: 0 auto 30px;
	}

	#profile-box .profile-corner {
		overflow: hidden;
		position: relative;
		zoom: 1;
		width: 100%;
		margin: 0 auto;
	}
	#profile-box .profile-frame {
		float: left;
		width: 480px;
		margin: 0 0 0 10px;
	}
	#profile-box .profile-frame figure {
		display: block;
		background: url(../sakkyoku/images/fr-pink-pc.png) no-repeat 0 0;
		width: 460px;
		height: 390px;
		position: relative;
	}
	#profile-box .profile-frame:nth-of-type(2) figure {
		background: url(../sakkyoku/images/fr-green-pc.png) no-repeat 0 0;
	}
	#profile-box .profile-frame figure img {
		width: 400px;
		position: absolute;
		top: 78px;
		left: 50px;
	}
	#profile-box .profile-frame .detail {
		width: 421px;
		background: #ff48ff;
		padding: 30px 20px 36px;
		margin: 0 0 0 39px;
	}
	#profile-box .profile-frame:nth-of-type(2) .detail {
		background: #29dab4;
	}
	#profile-box .profile-frame .detail h4 {
		font-size: 32px;
		line-height: 1.0;
		color: #6b0073;
		margin: 0 0 20px;
		text-shadow : 
			2px 2px 1px #fff,
			-2px 2px 1px #fff,
			2px -2px 1px #fff,
			-2px -2px 1px #fff,
			2px 0px 1px #fff,
			0px 2px 1px #fff,
			-2px 0px 1px #fff,
			0px -2px 1px #fff;
	}
	#profile-box .profile-frame .detail h4 span {
		font-size: 26px;
	}
	#profile-box .profile-frame .detail p {
		font-size: 16px;
		font-weight: bold;
		line-height: 2.0;
		color: #fff;
	}
}