@charset "UTF-8";


.mode01 header{
	display:none;
}

.mode01 main{
	padding-top:0;
}


main > .container{
	display:none;
	overflow:hidden;
	width:100%;
	position:relative;
}


/* for Sp --------------------*/
@media screen and (max-width:768px){

}

/* for Tb --------------------*/
@media screen and (min-width: 751px) {


}

/* for PC --------------------*/
@media screen and (min-width: 751px) {


}

/***********************************

 フッタ
 
***********************************/
footer ul{
	display:flex;
	justify-content:center;
	align-items:center;
	height:100%;
}

footer ul > li{
	flex:1;
	white-space:nowrap;
}

footer ul > li:nth-child(1),
footer ul > li:nth-child(4){
	display:none;
}

footer ul > li button[class^='icf-']{
	width: 100%;
	height: var(--vpad);
}

footer ul > li button[class^='icf-']::before{
	font-size:2.8rem;
	line-height:125%;
	color:#D8FFFF;
	vertical-align:middle;
	margin-right:0.25em;
}

footer ul > li button[class^='icf-'] > span{
	font-family: "M PLUS 1p", serif;
	font-size:2.0rem;
	font-weight:700;
	line-height:125%;
	color:#D8FFFF;
	vertical-align:middle;
}

.mode02 footer ul > li button[class^='icf-']::before{
	display:block;
	overflow:hidden;
	font-size:3.8rem;
	line-height:125%;
	margin-right:0;
}

.mode02 footer ul > li button[class^='icf-'] > span{
	display:block;
	overflow:hidden;
	font-size:1.2rem;
	line-height:125%;
}


.mode02 footer ul > li:nth-child(4){
	display:initial;
	flex:3;
	padding-right:2vw;
}


.mode02 button.shd_wh > span{
	padding:0.5em 0;
}


/***********************************

 ホーム画面
 
***********************************/
#titleFrame{
	text-align:center;
	height:calc(100vh - var(--vpad));
	height:calc(100dvh - var(--vpad));
	/*height:125vh;*/
	background-color:#2A475D;
}

/*カバー画像*/
#cvrImage{
	display:block;
	overflow:hidden;
	width:100%;
	height: 100%;
	position:relative;
	text-align:center;
	background: url(../images/cover.png) no-repeat 0 0;
	background-size: 100% auto;
}


#logoImg{
	display:inline-block;
	overflow:hidden;
	width:min(78%,560px);
	height:auto;
	position:absolute;
	/*top:25%;*/
	top:15vh;
	top:15dvh;
	left:50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index:3;
}
#logoImg > img{
	width:100%;
	height:auto;
	position:relative;
	animation: fluffy 0.5s infinite;
}

@keyframes fluffy {
	0%, 100% {
		transform: rotate(0);
	}
	25% {
		transform: rotate(1deg);
	}
	75% {
		transform: rotate(-1deg);
	}
}



/* for PC --------------------*/
@media screen and (min-width: 751px) {

	#cvrImage{
		background-image: url(../images/cover_pc.png);
	}

}


/*----------------------
 * 本文
 ----------------------*/
#cvrContent{
	display:block;
	overflow:hidden;
	width: 120vw;
	min-height:45vh;
	min-height:45dvh;
	border-top-left-radius:50% 25%;
	border-top-right-radius:50% 25%;
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(235,255,255,1) 100%);
	position:absolute;
	bottom:0;
	left:-10vw;
}

#cvrContent > p{
	margin:3em 0 2em;
	font-size:clamp(1.4rem,2vw,2.1rem);
	line-height:155%;
	color:#4A8DA2;
}

#cvrContent button{
	width:80vw;
	margin:0 auto 15px;
}

a.modeSwitch{
	display:inline-block;
	overflow:hidden;
}

a.modeSwitch > *{
	position:relative;
	vertical-align:middle;
}

a.modeSwitch > span{
	display:inline-block;
	overflow:hidden;
	text-align:right;
	font-size:1.6rem;
	font-weight:700;
	line-height:155%;
	margin-right: 0.5em;
}

a.modeSwitch img{
	width:auto;
	height:4em;
}


/* for PC --------------------*/
@media screen and (min-width: 751px) {

	#titleFrame{
		/*
		*/
	}

	#cvrContent{
		width: 120%;
		min-height:auto;
		left:-10%;
	}

	#cvrContent button{
		width:min(70%,720px);
		margin:0 auto 15px;
	}

}


/***********************************

 プレイ画面
 
***********************************/
#playFrame{
	height:calc(100vh - 2 * var(--vpad));
	height:calc(100dvh - 2 * var(--vpad));
}


#playMonitor{
	display:block;
	overflow:hidden;
	aspect-ratio:4/3;
	width:min(100%,750px);
	height:calc(100% - 40px);
	margin:0 auto;
	background:#C4DCDF url('../images/main/bg.png') no-repeat 50% bottom;
	/*background-size:auto 100%;*/
}

ul#layers{
	display:block;
	overflow:hidden;
	width:100%;
	height:100%;
	position: relative;
}
ul#layers > li{
	display:block;
	overflow:hidden;
	width:100%;
	height:100%;
	position: absolute;
	top:0;
	left:0;
}

ul#layers > li:first-child{

}

ul#layers > li:nth-child(2){
	mix-blend-mode: soft-light;
}

ul#layers > li:last-child{
	
}


ul#layers > li:nth-child(2) img{
	width:100%;
	height:100%;
	opacity:0.7;
}

ul#layers > li:last-child img{
	width:100%;
	height:auto;
	position:absolute;
	bottom: 0;
	left: 0;
}
ul#layers > li img.blink {
	animation: fadeMotion 4s infinite;
}
ul#layers > li img:nth-child(2).blink {
	animation-delay: 2s;
}


@keyframes fadeMotion {
	0%, 100% { opacity: 0; }
	50% { opacity: 1; }
}


/*----------------------
 * 水槽
 ----------------------*/
.mode02 #fishTank p.haras{
	display:inline-block;
	overflow:hidden;
	width:calc(100%/3);
	position:absolute;
	animation: brubru 0.25s  infinite;
}

#fishTank p.haras img{
	width:100%;
	height:auto;
}


@keyframes brubru {
	0% {transform: translate(0px, 0px) rotateZ(0deg)}
	25% {transform: translate(2px, 4px) rotateZ(3deg)}
	50% {transform: translate(0px, 4px) rotateZ(0deg)}
	75% {transform: translate(2px, 0px) rotateZ(-3deg)}
	100% {transform: translate(0px, 0px) rotateZ(0deg)}
}


.grownUp {
	animation:hide_anim 0.25s ease-in 0s 1 normal forwards running;
}

@keyframes hide_anim {
	0% {
		filter: blur(0px);
	}
	100% {
		filter: blur(25px);
	}
}


#harasMeter{
	display:inline-block;
	overflow:hidden;
	width:min(78vw,588px);
	height:auto;
	position:absolute;
	top:4vw;
	left:5vw;
}




/* for PC --------------------*/
@media screen and (min-width: 751px) {

	.mode02 #fishTank p.haras{
		width:250px;
	}

}


/*----------------------
 * マイクアイコン
 ----------------------*/

#recogState{
	display:inline-block;
	overflow:hidden;
	width:max(10vw,40px);
	height:auto;
	aspect-ratio:1/1;
}

.st_on > #recogState{
	animation: motionSet 0.25s infinite;
}

@keyframes motionSet {
	from { scale:1.0; }
	to { scale: 1.15; }
}

#recogIcon{
	display:inline-block;
	position: absolute;
	top: 5vw;
	right: 4vw;
}

#recogIcon::before{
	content:"";
	display:none;
	width:100%;
	height:4px;
	background-color:#ff0000;
	position:absolute;
	top: calc(50% - 4px);
	left: 0;
	transform: rotate(45deg);
	z-index:4;
}
#recogIcon::after{
	content:"";
	display:none;
	width:100%;
	height:4px;
	background-color:#ff0000;
	position:absolute;
	top: calc(50% - 4px);
	left: 0;
	transform: rotate(-45deg);
}


div[class^="regoner_"] #recogIcon::before,
div[class^="regoner_"] #recogIcon::after{
	display:block;
}

.regoner_02 #recogIcon::before,
.regoner_02 #recogIcon::after{
	background-color:#00ff00;
}



#harassCounter{
	display:none;
}





/* for PC --------------------*/
@media screen and (min-width: 751px) {

	#recogIcon{
		top: 2em;
		right: 2em;
	}


}


/*----------------------
 * タイマーパーツ
 ----------------------*/
#playTimer{
	display:block;
	overflow:hidden;
	height:40px;
	padding:0 3vw;
	background-color:#2A475D;
}



#timeCounter{
	display:block;
	overflow:hidden;
	color:#A1DEE2;
	position:relative;
	text-align:center;
}

#timeCounter::before{
	font-size:1.8rem;
	line-height:40px;
	margin-right:0.25em;
	vertical-align: middle;
}

#timeCounter > span{
	font-family: "M PLUS 1p", serif;
	font-size:2.4rem;
	font-weight:700;
	line-height:40px;
	vertical-align: middle;
}


/* for PC --------------------*/
@media screen and (min-width: 751px) {

	#playMonitor{
		width:100%;
		/*height:auto;*/
		background:unset;
		aspect-ratio:unset;
	}

	#playFrame{
		width:100%;
		aspect-ratio:unset;
		background-image:url('../../images/bg_left.png'),url('../../images/bg_right.png'), url('../images/bg_base.png');
		background-repeat:no-repeat;
		background-position:bottom left,bottom right,50% center;
		background-size:auto,auto,cover;
	}

	ul#layers > li:last-child img{
		width:720px;
		height:auto;
		display:none;
	}

	#harasMeter{
		width:auto;
		height:60px;
		top:1em;
		left:2em;
	}


	#recogState{
		width:60px;
		/*top:2em;
		right:2em;*/
	}


	#playTimer{
		width: min(100%,740px);
		margin:0 auto;
		/*position:relative;*/
	}

	#playTimer::before{
		content:"";
		display:block;
		width:100%;
		height:25px;
		background-color:#2A475D;
		position:absolute;
		bottom:0;
		left:0;
	}

}





/***********************************

 結果画面
 
***********************************/
#resultFrame{
	background:#ffffff;
}


#dlIamge{
	display:block;
	overflow:hidden;
	width:min(100%,480px);
	height:auto;
	margin:0 auto;
	/*background-color:#c3c3c3;*/
	background-color:#ffffff;
	position:relative;
}

#dlIamge > p{
	display:none;
	overflow:hidden;
	position:absolute;
	bottom:1em;
	right:1em;
	font-size:1.2rem;
	line-height:125%;
}

#dlIamge.capt {
	background:unset;
}

#dlIamge.capt_ex {
	background:url("../../images/haramon/kirabase.png") no-repeat 50% 50%;
	background-size:contain;
}

#dlIamge[class^="capt"] > p#imgCopyR{
	display:inline-block;
}


/*----------------------
 * 最終ハラス画像
 ----------------------*/
#harassPict{
	display:block;
	overflow:hidden;
	position:relative;
	width:100%;
	aspect-ratio:1/1;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size:cover;
}


#harassPict figcaption{
	display:block;
	width:100%;
	font-family:"Mochiy Pop One", suns-serif;
	font-size:3.4rem;
	line-height:125%;
	text-align:center;
	color:#F1413C;
	position:absolute;
	bottom:1em;
	left:0;
}
#harassPict figcaption > span{
	display:inline-block;
}

#harassPict figcaption > span:nth-child(1){
	position:relative;
	color:#FFFFFF;
	-webkit-text-stroke:6px #FFF;
	text-stroke:6px #FFF;
}

#harassPict figcaption > span:nth-child(2){
	color:#F1413C;
	position:absolute;
	top:0;
	left:0;
	right:0;
}


#harassPict img{
	width:100%;
	height:auto;
	aspect-ratio:1/1;
	pointer-events:none;
}

#harassPict[class$='_l1'],
#harassPict[class$='_l6']{
	background-image:url('../../images/haramon/bg_01.png');
}

#harassPict[class$='_l2'],
#harassPict[class$='_l5']{
	background-image:url('../../images/haramon/bg_02.png');
}

#harassPict[class$='_l3']{
	background-image:url('../../images/haramon/bg_03.png');
}

#harassPict[class$='_l4'],
#harassPict[class$='_l100']{
	background-image:url('../../images/haramon/bg_04.png');
}

#harassPict.t4_l4 figcaption,
#harassPict.t6_l4 figcaption{
	top:1em;
	bottom:auto;
}



/*----------------------
 * 結果テキスト
 ----------------------*/
#dataTxt{
	display:block;
	overflow:hidden;
	padding:5vw 5vw;
	font-size:1.4rem;
	line-height:155%;
	color:#4A8DA2;
}

#dataTxt h3{
	font-size:1.8rem;
	line-height:155%;
	text-align:center;
	color:#1B5B70;
	margin-bottom:0.5em;
}

#dataTxt h3 > strong{
	display:block;
	overflow:hidden;
	font-size:2.8rem;
	line-height:125%;
}

#dataTxt h4{
	font-size:1.6rem;
	line-height:125%;
	text-align:center;
	color:#1B5B70;
	margin-bottom:0.5em;
}

/*#dataTxt h3 > .about{*/
#harasAbout{
	font-size:1.6rem;
	line-height:155%;
}

.resFld{
	display: block;
	overflow: hidden;
	padding:3vw 20vw 0;
	width: 140vw;
	min-height: 45vh;
	min-height: 45dvh;
	border-top-left-radius: 50% 25%;
	border-top-right-radius: 50% 25%;
	background: linear-gradient(to bottom,  rgba(196,220,223,1) 0%,rgba(196,220,223,1) 50%,rgba(255,255,255,1) 100%);
	position: relative;
	left: -20vw;
	text-align:center;
}


#scoreBox{
	display:block;
	overflow:hidden;
	text-align:center;
	position:relative;
}

#scoreBox p{
	display:inline-block;
	overflow:hidden;
	font-family: "Mochiy Pop One", suns-serif;
	font-size: 2.4rem;
	line-height: 155%;
}
#scoreBox p:nth-child(1) {
	position: relative;
	color: #FFFFFF;
	-webkit-text-stroke: 6px #FFF;
	text-stroke: 6px #FFF;
}
#scoreBox p:nth-child(2) {
	color: #F1413C;
	position: absolute;
	top:0;
	left: 0;
	right:0;
}

#scoreBox p > span{
	display:block;
	overflow:hidden;
	font-size: 3.8rem;
	line-height: 125%;
}



/*----------------------
 * ランキングデータ
 ----------------------*/
#rankData{
	display:block;
	overflow:hidden;
	padding:5vw 5vw;
	font-size:1.4rem;
	line-height:125%;
	color:#4A8DA2;
}

#rankData h3{
	font-size:1.6rem;
	line-height:125%;
	color:#1B5B70;
	border-top: 2px dotted #4b8da2;
	margin-top:1em;
	padding-top:1em;
}


#rankData p{
	display:block;
	overflow:hidden;
	font-size:2.4rem;
	line-height:155%;
}


.rankTxt{
	font-size:4.8rem;
	line-height:125%;
}

.countTxt{
	font-size:3.6rem;
	line-height:155%;
}

#countTxt::after{
	content:"中";
}

p#updateTxt{
	font-size:1.2rem;
	line-height:155%;
	color:#808080;
	text-align:right;
	border-top: 2px dotted #4b8da2;
	margin-top:1em;
	padding-top:0.5em;
}


#resultFrame .buttonBox{
	display:block;
	overflow:hidden;
	padding:5vw 4vw;
	letter-spacing:-.4em;
∂}

#resultFrame .buttonBox > button[name='postBtn'],
#resultFrame .buttonBox > button[name='downloadBtn']{
	display:inline-block;
	width:calc(50% - 1vw);
	margin-bottom:2vw;
}

#resultFrame .buttonBox > button > span{
	padding:0.75em 0;
	letter-spacing:normal;
}

#resultFrame .buttonBox > button[name='postBtn'] > span,
#resultFrame .buttonBox > button[name='downloadBtn'] > span{
	font-size:1.6rem;
}
#resultFrame .buttonBox > button[name='postBtn']{
	float: left;
}
#resultFrame .buttonBox > button[name='downloadBtn']{
	float: right;
}
#resultFrame .buttonBox > button[name='replayBtn']{
	clear:both;
}


/*----------------------
 * チャート
 ----------------------
#resChart{
	display:block;
	overflow:hidden;
	width:calc(100% - 10vw);
	margin:0 auto;
	padding:0 5vw;
	background-color:#ffffff;
}
*/


/* for PC --------------------*/
@media screen and (min-width: 751px) {

	#resChart,
	#rankData{
		width: min(100%,480px);
		margin:0 auto;
	}

	#dataTxt,
	#rankData + .buttonBox{
		width: min(100%,740px);
		margin:0 auto 2em;
		padding: 0 0;
	}

}




.mode01 #titleFrame,
.mode02 #playFrame,
.mode03 #resultFrame{
	display:block;
}



/***********************************

 途中終了時の処理

***********************************/
.qtply #resChart,
.qtply #rankData,
.qtply #dataTxt h3,
.qtply #dataTxt h4,
.qtply button[name='postBtn'],
.qtply button[name='downloadBtn']{
	display: none!important;
}

.qtply #harassPict{
	filter: grayscale(100%);
}
.qtply #harassPict figcaption{
	filter: grayscale(0%);
}

.qtply #dataTxt{
	text-align:center;
}

.qtply #harassPict figcaption > span::after{
	content:"";
	display:none;
}


/***********************************

 タイムアウト時の処理

***********************************/
.tout #resChart,
.tout #rankData,
.tout #dataTxt h3,
.tout #dataTxt h4,
.tout button[name='postBtn'],
.tout button[name='downloadBtn']{
	display: none!important;
}

.tout #harassPict{
	filter: grayscale(100%);
}
.tout #harassPict figcaption{
	filter: grayscale(0%);
}

.tout #dataTxt{
	text-align:center;
}

.tout #harassPict figcaption > span::after{
	content:"";
	display:none;
}


/*----------------------
 * Go・Finishタイトル
 ----------------------*/
#abantFrarme{
	display:none;
	/*overflow:hidden;*/
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:5;
}

#abantFrarme.start{
	display:block;
}

#abantFrarme.finish{
	display:block;
	background-color:rgba(0,0,0,0.5);
}

#abantFrarme > section{
	display:block;
	position:absolute;
	top:50%;
	left:0;
	opacity:1.0;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.mode02 #abantFrarme > section{
	opacity:1.0;
}

#abantFrarme > section > p{
	display:block;
	width:100%;
	background:url('../images/main/call_bg.png') no-repeat 0 0;
	background-size:contain;
	position:relative;
}


#abantFrarme > section > p > img{
	width:100%;
	height:auto;
	position:relative;
	left:100%;
	/*opacity:0.0;*/
}
#abantFrarme.start img#txtGo{
	animation: 1.2s ease-in 0.3s slideInOut;
}

@keyframes slideInOut {
	0% {
		left:100%;
		opacity:0.0;
	}
	10% {
		opacity:1.0;
	}
	25% {
		left:0;
	}
	45% {
		left:0;
	}
	90% {
		opacity:1.0;
	}
	100% {
		opacity:0.0;
		left:-100%;
	}
}

#abantFrarme.finish img#txtGo{
	display:none;
}
#abantFrarme.finish img#txtFin{
	animation: 0.8s ease 0.0s slideInShake;
	animation-fill-mode: forwards;
}
@keyframes slideInShake {
	0% {
		opacity:0.0;
		left:-100%;
	}
	5% {
		opacity:1.0;
	}
	50% {
		left:120px;
	}
	60% {
		left:0;
	}
	70% {
		left:60px;
	}
	80% {
		left:0;
	}
	90% {
		left:30px;
	}
	/*95% {
		opacity:1.0;
	}*/
	100% {
		/*opacity:0.0;*/
		left:0;
	}
}

#abantFrarme button[name='finishPlay']{
	width:80vw;
	margin:2em auto 0;
}

#abantFrarme.start button[name='finishPlay'],
#abantFrarme.start img#txtFin{
	display:none;
}


button[name='abortBtn']:disabled{
	pointer-events:none;
	filter: brightness(50%);
}


/* for PC --------------------*/
@media screen and (min-width: 751px) {

	#abantFrarme > section{
		width:100%;
		background: url(../images/main/call_bg.png) no-repeat 0 0;
		background-size: 100% 200px;
	}

	#abantFrarme > section > p {
		width:min(100%,720px);
		height: 200px;
		background:unset;
		margin:0 auto;
	}

	#abantFrarme > section > p > img{
		width: auto;
		height: 100%;
	}
}


/***********************************

 情報画面
 
***********************************/
body[class^='pop_']{
	height:100vh;
	overflow:hidden;
}

#subPage{
	display:none;
	overflow:hidden;
	position:relative;
	width:100%;
	height:100%;
	text-align:center;
	position:fixed;
	top:0;
	left:0;
	background-color: rgba(196,220,223,0.95);
	z-index:1024;
}


#subPage > .container{
	display:none;
	overflow-y:auto;
	padding:10vw 6vw;
	width:min(100%,750px);
	height:100%;
	margin:0 auto;
	position:relative;
}

.subContent{
	display:block;
	overflow:hidden;
	margin-bottom:10vw;
	font-size:1.4rem;
	font-weight:initial;
	line-height:155%;
	color:#4A8DA2;
	text-align:left;
	position:relative;
}

.subContent h2{
	display:block;
	overflow:hidden;
	padding-left:0.5em;
	margin-bottom: 1em;
	font-size:1.8rem;
	font-weight:700;
	line-height:125%;
	border-left:0.5em solid #4A8DA2;
}

.subContent section+section{
	margin-top:10vw;
}


.subContent dl{
	margin: 1em 0;
}

.subContent dl > dt{
	font-size:1.6rem;
	font-weight:700;
	line-height:125%;
	color:#1B5B70;
	padding-bottom:0.5em;
}

.subContent dl > dd{

}

.subContent dl > dd + dt{
	margin-top: 1.5em;
}

.subContent dl > dd > p+p{
	margin-top: 1em;
}


.subContent a{
	text-decoration:underline;
}
.subContent strong{
	font-weight:700;
}
.subContent article{
	display:block;
	overflow:hidden;
}

.subContent article + article{
	margin-top:1em;
	padding-top:1em;
}

.subContent h3{
	display:block;
	overflow:hidden;
	padding:0.25em 0.5em;
	font-size:1.2em;
	font-weight:700;
	color:#ffffff;
	margin-bottom:0.5em;
	background-color:#4A8DA2;
}

.subContent ul{
	list-style-type: disc;
	margin-left:1.5em;
}

.subContent ul + *,
.subContent P + *{
	margin-top:1em;
}

button[name='closeBtn']{
	display:inline-block;
	overflow:hidden;
	padding:0.5em;
	aspect-ratio:1/1;
	border-radius:50%;
	background-color:#2A475D;
	-webkit-box-shadow: 3px 3px 0 0 rgba(74, 141, 162, 1.0);
	box-shadow: 3px 3px 0 0 rgba(74, 141, 162, 1.0);

	font-size:2.0rem;
	line-height:100%;
	color:#ffffff;

	position:fixed;
	top:5vw;
	right:5vw;
}

button[name='closeBtn'] > span{
	display:none;
}
button[name='closeBtn']:active{
	margin-top:3px;
	margin-right:-3px;
	-webkit-box-shadow: 0 0 0 0 rgba(161, 222, 226, 1.0);
	box-shadow: 0 0 0 0 rgba(161, 222, 226, 1.0);
}





/* for PC --------------------*/
@media screen and (min-width: 751px) {

	#subPage > .container{
		width:100%;
		padding:0 0 5vw;
		margin:0 auto;
	}

	.subContent{
		display:block;
		overflow:hidden;
		width: min(100%,720px);
		margin:2em auto 2em;
	}

	.subContent section+section{
		margin-top:2em;
	}

	#subPage button[name='returnBtn']{
		display:none;
	}

	button[name='closeBtn']{
		top:2em;
		right:2em;
	}


}



/***********************************

 利用規約
 
***********************************/

#howto{

}


/***********************************

 利用規約
 
***********************************/
#about{

}



body[class^='pop_'] #subPage,
#subPage[class^='pop_'] ,
.pop_a #howto,
.pop_b #about{
	display:block;
}


/***********************************

 無効モード
 
***********************************/
.invalid button[name^='play']{
	pointer-events:none;
	filter: brightness(50%);
}