@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700&display=swap');

body{
	font-family: 'Noto Serif JP', serif;
	background:url(../img/bg_blue.jpg);
	color: #584960;
	min-height:100vh;
	line-height:1.8em;
	letter-spacing:0.05em;
	font-feature-settings: "pkna" 1, "pwid" 1;
}

body:before {
	content: '';
	background: url(../img/bg_left.png) no-repeat;
	background-size: contain;
	width: 40%;
	height: 60vh;
	position: fixed;
	display: block;
	z-index: -1;
	bottom: 1vh;
	left: 5vw;
}

body:after {
	content: '';
	background: url(../img/bg_right.png) no-repeat;
	background-size: contain;
	width: 40%;
	height: 60vh;
	position: fixed;
	display: block;
	z-index: -1;
	top: 1vh;
	right: -20%;
}

@media screen and (max-width:961px){
	body:before {
		width: 80%;
		height: 60vh;
		bottom: -10vh;
		left: -40%;
		opacity:.5;
	}

	body:after {
		width: 60%;
		height: 60vh;
		top: 1vh;
		right: -20%;
		opacity:.5;
	}
}

h1,
h2{
	text-align:center;
	font-family: fot-chiaro-std, sans-serif;

}

h1{
	font-size:2.5em;
}

h2{
	font-size:2em;
}

h2 span{
	position:relative;
	padding:0 40px;
	display:inline-block;
}

h2 span:before {
	content: '';
	background: url(../img/ctit_parts.png) no-repeat;
	width: 25px;
	height: 25px;
	background-size: contain;
	position: absolute;
	transform: translate(0, -50%);
	top: 50%;
	left: 0;
}

h2 span:after {
	content: '';
	background: url(../img/ctit_parts.png) no-repeat;
	width: 25px;
	height: 25px;
	background-size: contain;
	position: absolute;
	transform: translate(0, -50%);
	top: 50%;
	right: 0;
}

h3{
	font-family: fot-chiaro-std, sans-serif;
	padding-left:30px;
	position:relative;
	padding:0.3em 0 0.3em 30px;
	margin-top:2.5em;
}

h3:before{
	content:'';
	background:url(../img/parts_sakura1.png) no-repeat;
	background-size:contain;
	width:25px;
	height:25px;
	position:absolute;
	transform:translate(0, -50%);
	top:50%;
	left:0;
}

h3:after{
	content:'';
	width:100%;
	height:2px;
	border-bottom: 2px solid #c21500;
	border-image: linear-gradient(to right, #8D8393 0%, #8D8393 10%, #E5D4EF 10%, #E5D4EF 100%);
	border-image-slice: 1;
	position:absolute;
	bottom:0;
	right:0;
}

h4{
	background:#986ED0;
	color:#fff;
	padding:0.5em;
	font-size:1.1em;
	font-family: fot-chiaro-std, sans-serif;
}

h4 strong{
	color:#FFFF00;
}

ul,ol{
	list-style:none;
	padding-left:0;
}

ul li {
	list-style:none;
}

em{
	font-style:normal;
	color:#f22;
}

dd{
	margin-left:0;
}

.sp{
	display:none !important;
}

p{
	margin:0;
	font-size:16px;
}

@media screen and (max-width:961px){
	body{
		line-height:1.5em;
	}
	.pc{
		display:none !important;
	}

	.sp{
		display:block !important;
	}

	.dots_flx.sp{
		display:flex !important;
		justify-content:center;
	}

	h1{
		font-size:2em;
		margin-bottom:0;
	}

	h2{
		font-size:1.7em
	}

	h3:after{
		border-bottom: 2px solid #c21500;
		border-image: linear-gradient(to right, #8D8393 0%, #8D8393 20%, #E5D4EF 20%, #E5D4EF 100%);
		border-image-slice: 1;

	}
}

.inr{
	width:800px;
	max-width: calc(100% - 2em);
	margin:0 auto;
	padding: 1.5em;
}

img{
	max-width:100%;
}

section{
	margin-top:2.5em;
	padding-top:1.5em;
}

p.caution{
	text-align:center;
	margin-bottom:1.5em;
}

.contents{
	margin-top:0;
	margin-left:20vw;
}

@media screen and (max-width:961px){
	section{
		margin-top:0;
	}
	.contents{
		margin-left:0;

	}

}

.contents .logo {
	width:200px;
	margin:0 auto;
	max-width:30%;
}

.inr {
		padding:1em;
}

.txt_area{
	background:#ffffff80;
	padding:2em;
}

@media screen and (max-width:961px){
	.txt_area{
		padding:1.5em;
	}
}

.waku{
	margin:3em 0 1.5em;
	position:relative;
	filter: drop-shadow(0px 2px 2px #00000020);
}

.waku:before{
	content:'';
	background:url(../img/bg_midashi_parts1.png) no-repeat;
	width:40px;
	height:40px;
	background-size:contain;
	position:absolute;
	top:-15px;
	left:-15px;
	z-index:2;
}

.waku:after{
	content:'';
	background:url(../img/bg_midashi_parts2.png) no-repeat;
	width:40px;
	height:40px;
	background-size:contain;
	position:absolute;
	bottom:-15px;
	right:-15px;
	z-index:2;
}


.waku_inr{
	display:flex;
	padding:0.5em 1.5em;
	align-items:center;
	justify-content:center;
	background: url(../img/bg_midashi.png);
	background-size: cover;
	border-radius:2px;
	position:relative;
}



.waku_inr:before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	border: solid 4px #d9c05b;
	color: #bca748;
	border-radius: 5px;
	filter: drop-shadow(0.5px 0.5px 0px #bca748) drop-shadow(-0.5px -0.5px 0px #bca748);
}

.waku_inr:after {
	content: '';
	width: 100%;
	height: 101.8%;
	position: absolute;
	top: -3.5px;
	left: 2px;
	border-top: solid 1.5px #ffffff80;
	border-bottom: solid 1.5px #ffffff80;
	border-radius: 5px;
}

.waku_inr p.icon{
	width:30%;
}

.waku_inr p.icon img{
	width: 120px;
	max-width:100%;
	margin: 0 auto;
	display: block;
}

.waku_inr p {
	font-size:1.1em;
}
.waku_inr p.disp{
	width:60%;
	font-family: fot-chiaro-std, sans-serif;
}

@media screen and (max-width:961px){
	.waku_inr{
		padding:0.5em 0;
	}
	.waku_inr p.icon img{
		width:80%;
		margin:0 auto 0 0;
	}

	.waku_inr p.disp{
		font-size:16px;
	}
}

.game_flow ol {
	font-weight:600;
	font-size:1.1em;
}

.game_flow ol li {
	margin-bottom:0.5em;
}

.game_flow ul {
	display:flex;
	align-items:center;
	justify-content:center;
}

.game_flow ul li {
	width:30%;
	margin:0 0.5em;
	margin-left:0;
}

.game_flow ul.two li {
	width:50%;
}

.game_flow dl {
	display:flex;
	flex-wrap:wrap;
	border:solid 1px #986ED0;
}

.game_flow dl dt {
	width:30%;
	padding:1em;
	text-align:center;
	background:#986ED0;
	color:#fff;
	box-sizing: border-box;
}

.game_flow dl dt:not(:last-child){
	border-bottom:solid 1px #b799e5;
}



.game_flow dl dd {
	width:70%;
	padding:1em;
	box-sizing: border-box;
	background:#fff;
}

.game_flow dl dd:not(:last-child){
	border-bottom:solid 1px #986ED0;
}

.game_flow .waku{
	margin:3em 0;
}

@media screen and (max-width:961px){
	.game_flow dl{
		display:block;
	}

	.game_flow dl dt,
	.game_flow dl dd{
		width:100%;
		padding:0.5em;
		text-align:left;
	}
	.game_flow ul{
		display:block;
	}

	.game_flow ul li {
		width:100%;
	}

	.game_flow ul.two li {
		width:100%;
	}
}

.fuda_list{
	color:#584960;
}
.fuda_list .txt_area{
	background:#ffffff80;

}
.fuda_list dl{
	display:flex;
}

.fuda_list dl:not(:last-child){
	border-bottom:solid 1px #eee;
}

.fuda_list dl dt {
	width:20%;
	padding:1em;
	font-family: fot-chiaro-std, sans-serif;
	font-size:1.3em;
}

.fuda_list dl dd{
	width:80%;
	padding:1em;
}

.fuda_list dl dd ul{
	display:flex;
	margin:0;
}

.fuda_list dl dd ul li {
	width:23%;
	margin-right:1%;
}

@media screen and (max-width:961px){
	.fuda_list dl{
		display:block;
	}

	.fuda_list dl dt{
		width:100%;
		padding:0 0 0.5em 0;
	}

	.fuda_list dl dd{
		width:100%;
		padding:0 0 1em 0;
	}

	.fuda_list dl dd ul{
		justify-content:space-between;
	}

	.fuda_list dl dd ul li{
		margin-right:0;
	}

	.fuda_list dl dd ul li p{
		font-size:11px;
		line-height:1.5em;
	}
}

.score .single_role,
.special_role .single_role{
	padding-bottom:1em;
}

.score .single_role:not(:last-child),
.special_role .single_role:not(:last-child){
	border-bottom:solid 1px #ccc;
}

.score .single_role ul,
.special_role .single_role ul {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
}

.score .single_role ul li,
.special_role .single_role ul li {
	width:9%;
	margin-right:1%;
	text-align:center;
}

@media screen and (max-width:961px){
	.score .single_role ul li,
	.special_role .single_role ul li{
		width:19%;
	}

	.score .single_role ul li.spacer,
	.special_role .single_role ul li.spacer{
		width:100%;
	}
}

.p_footerNavWrap {
	background: #7e4ebd;
	padding: 36px 20px;
	position: relative;
	width: 100%;
	z-index: 2;
	box-sizing: border-box;
}
.p_footerNavWrap .p_footerNavWrapInner {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 1200px;
	width: 100%;
}
.p_footerNavWrap .p_footerNav ul {
	display: flex;
	gap: 0 40px;
	justify-content: center;
}
.p_footerNavWrap .p_footerNav ul li {
	font-size: 1.1em;
}
.p_footerNavWrap .p_footerNav ul li a {
	color: #fff;
	text-decoration: none;
}
.p_footerNavWrap .p_footerNav ul li:hover a {
	text-decoration: underline;
}
.p_footerNavWrap .p_footerCopyRight {
	color: #fff;
	display: block;
	font-size: 1.1em;
}


@media screen and (max-width: 768px){
	.p_footerNavWrap {
		margin-top: -0%;
		padding: 15px 0 30px;
	}
	.p_footerNavWrap .p_footerNavWrapInner {
		display: block;
	}
	.p_footerNavWrap .p_footerNav ul {
		gap: 0 7%;
	}
	.p_footerNavWrap .p_footerNav ul li {
		font-size: 0.8em;
	}
	.p_footerNavWrap .p_footerCopyRight {
		font-size: 0.8em;
		margin-top: 30px;
		text-align: center;
	}
}

/*modaal*/
.popupyoutube {
	width: 100%;
	max-width: 700px;
	margin: 5% auto;
}
.hide-area{
	display: none;
}

.modaal-wrapper {
	height: 100%;
}


.modaal-close:after,
.modaal-close:before{
	background:#fff;
	width:  4px;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#584960;
}

.modaal-close {
	right: 20px;
	top: 20px;
	left: auto;
}

.modaal-video-wrap {
	margin: auto 200px;
}

@media screen and (max-width:961px){
	.modaal-close {
		right: 20px;
		top: 20px;
		left: auto;
	}

	.modaal-video-wrap {
		margin: auto 5%;
	}
}

@media screen and (min-width:1400px){
	.modaal-video-wrap {
	margin: auto 10%;
	}
}

ruby > rt
{
	line-height: 100%;
	transform: translateY(10%);
}
/*
ruby[data-ruby]
{
	position: relative;
}
ruby[data-ruby]::before
{
	content: attr(data-ruby);
	position: absolute;
	line-height: 100%;
	text-align: center;
	left: -3em;
	right: -3em;
	transform-origin: bottom center;
	transform: scale(0.7);
	bottom: 1.25em;
}
ruby[data-ruby] rt
{
	display: none;
}
*/
h4
{
	padding-left: 1.7em;
	text-indent: -1.2em;
}

.indent,
.game_flow ol > li
{
	padding-left: 1.1em;
	text-indent: -1.1em;
}
.fuda_list dl dd ul li p{
	text-align: center;
}
.small {
	font-size: 11px;
}
@media screen and (max-width:480px){
	.spSmall, .spSmall .small {
		font-size: 8px;
	}
	.spHide
	{
		display: none;
	}
	.spLeft
	{
		text-align: left !important;
	}
	#rules h2 span{
		position:relative;
		padding:0 30px;
		display:inline-block;
	}
	.spWidth9p { width: 9% !important; }
}

html.app .contents
{
	padding-top: 0;
}
html.app .logo.sp,
html.app h1,
html.app .appHide
{
	display: none !important;
}

html.app section#about
{
	padding-top: 0;
}


/* start .p_stickBanner */
.p_stickBanner
{
	opacity:0;
	position:fixed;
	right:10px;
	top:20px;
	transition:all .5s cubic-bezier(.19,1,.22,1);
	visibility:hidden;
	width:7.5%;
	aspect-ratio: 137 : 664;
	max-width: 90px;
	z-index:999;
}
.p_stickBanner.View
{
	opacity:1;
	visibility:visible;
}
.p_stickBanner:hover
{
	opacity:.5;
}
.p_stickBanner > *
{
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}
.p_stickBanner > * > img.icon
{
	position: absolute;
	width: 70%;
	height: auto;
	top: -2%;
	left: 50%;
	transform: translateX(-50%);
	filter: drop-shadow(0px 0px 4px rgba(255, 255, 255, 1));
}

@media screen and (max-width:768px)
{
	.p_stickBanner
	{
		bottom:0;
		right:5dvmin;
		top:unset;
		width:90dvmin;
		aspect-ratio: 638 : 144;
		max-width: 400px;
	}
	.p_stickBanner.SPView
	{
		opacity:0;
		visibility:hidden;
	}
	.p_stickBanner.SPViewOut
	{
		opacity:1;
		visibility:visible;
	}
	.p_stickBanner > * > img.icon
	{
		width: auto;
		height: 70%;
		top: 50%;
		left: -2%;
		transform: translateY(-58%);
	}
}
/* end   .p_stickBanner */