.pink{
	color: #ffeeee;
	text-decoration: none;
}

/*へっだー-----------------------------------------------------------*/

header{
	position: fixed;
	width : 100vw;
	background-color: #000000;
}
img#logo{
	position: absolute;
	left: 1vw;
	bottom: 0;
	max-height: 10vh;
	max-width: 23vw;
}
div#hd_parent{
	position: absolute;
	bottom: 0;
	right: 25vw;
	width : 50vw;
	background-color: #aa0000;
}
a#uragaesu{
	position: absolute;
	bottom:0;
	right:3vw;
}

/*めいんぼっくす-----------------------------------------------------------------*/
div.mainbox{
	position: absolute;
	display: none;
	left: 20vw;
	width:70vw;
	background-color: rgba(255,200,200,0.9);
	z-index: -2;
	border: dashed #aa8888;
}
div#mainbox2{
	text-align: left;
}
div#mainbox3{
	text-align: left;
}
div#mainbox4{
	text-align: left;
	overflow-y: scroll;
}
p.maintext{
	text-align: left;
}
div#history{
	border: dashed #aa8888;
}
.glitchsample{
	position: absolute;
}
div#midbox{
	width:100%;
	text-align: center;
}
a.linktxt{
	text-decoration: none;
	color: #aa0000
}
#realfork{
	position: fixed;
	bottom: 0;
	right: 0;
	width: 100vw;
	display: none;
}

/*すいっち-----------------------------------------------------------------*/
.switchtext{
	position: absolute;
	text-align: right;
	right: 85vw;
	width:20vw;
	background-color: #fff;
	color:#f55;
}
.switchtext:after {
	content: "□";
}
#switchtext5:after {
	content: "→";
}
#switch1:checked ~ #mainbox1,
#switch2:checked ~ #mainbox2,
#switch3:checked ~ #mainbox3,
#switch4:checked ~ #mainbox4
{
  display: block;
}

#switch1:checked ~ #switchtext1:after,
#switch2:checked ~ #switchtext2:after,
#switch3:checked ~ #switchtext3:after,
#switch4:checked ~ #switchtext4:after
{
  content: "■";
}
#switch1:checked ~ #switchtext1,
#switch2:checked ~ #switchtext2,
#switch3:checked ~ #switchtext3,
#switch4:checked ~ #switchtext4
{
   right: 83vw;
}
#switch1:checked ~ #imgbox1,
#switch2:checked ~ #imgbox2,
#switch3:checked ~ #imgbox3,
#switch4:checked ~ #imgbox4
{
  display: block;
}

/*ふきだし-----------------------------------------------------------------*/
#icon{
	width: 10vh;
}
div.imgbox{
	text-align: center;
	position: fixed;
	bottom: 0;
	right:0;
	display: none;
}
img.lyqjw_chan{
	max-width: 100%;
	bottom: 0;
	max-height: 50vh;
}
.fkdsbox{
	position: absolute;
	text-align: center;
	z-index: 3;
	display:none;
}
.fkdslink{
	color:#000;
	text-decoration: none;
}
.fkds_arrow_right{
	position: absolute;
	z-index: 3;
	font-size: xx-large;
	color:#f55;
}
.fkds_arrow_right:after{
	content: ">";
}
input {
 	display:none;
}

#fkdsswitch_to2_1l:checked ~ #fkdsbox2_1,
#fkdsswitch_to2_2r:checked ~ #fkdsbox2_2
{
  display: block;
}

#fkdsbox1_1{
	display: block;
}
#fkdsbox3_1{
	display: block;
}


/*-----------------------------------------------------------------*/

@media screen and (max-width:480px){
	/*へっだー-----------------------------------------------------------*/
	header{
		height: 5vh;
	}
	div#hd_parent{
		height: 3vh;
		font-size: 2vh;
	}
	a#uragaesu{
		font-size: small;
	}
	/*めいんぼっくす-----------------------------------------------------------------*/
	div.mainbox{
		top:10vh;
		height: 85vh;
		padding-left: 0;
	}
	p.maintext{
		font-size: medium;
		margin: 2vh;
		white-space: nowrap;
		line-height: 150%;
	}
	div#history{
		left: 5%;
		width:90%;
		height: 18%;
		font-size: medium;
	}
	#music{
		margin-left: 10vw;
		width:48vw;
		height:27vw;
	}
	.glitchsample{
		width:60%;
		left: 20%;
		top: 7vh;
	}
	#mainbox4{
		font-size: small;
	}

	/*ふきだし-----------------------------------------------------------------*/
	div.imgbox{
		width: 80vw;
		max-height: 50vh;
	}
	img.fukidashi{
		width:90%;
	}
	.fkdsbox{
		line-height: 4vh;
		top:6vw;
		left:0;
		width: 100%;
	}
	.icon{
		height: 4vh;
	}
	.fkds_arrow_right{
		line-height: 6vh;
		height: 6vh;
		top:1vw;
		left:78%;
	}
	/*すいっち-----------------------------------------------------------------*/
	#switchtext1{
		top:10vh;
	}
	#switchtext2{
		top:20vh;
	}
	#switchtext3{
		top:30vh;
	}
	#switchtext4{
		top:50vh;
	}
	#switchtext5{
		top:40vh;
	}
	.switchtext{
		padding-top: 1vw;
		height:6vw;
		font-size: 3vw;
	}
}

@media screen and (min-width:481px){
	*{
		font-size: x-large;
	}

	/*へっだー-----------------------------------------------------------*/
	header{
		height: 10vh;
	}
	a#uragaesu{
		font-size: large;
	}
	/*めいんぼっくす-----------------------------------------------------------------*/
	div.mainbox{
		top:20vh;
		height: 70vh;
		padding-left: 2vw;
	}
	p.maintext{
		margin-left: 8vh;
		margin-top: 5vh;
		line-height: 200%;
	}
	div#history{
		position: absolute;
		left: 1%;
		width:48%;
		bottom: 1%;
		margin:1vh;
		height: 38%;
	}
	#music{
		margin-left: 5vw;
		width:32vw;
		height:18vw;
	}
	.glitchsample{
		width:35%;
		top: 7vh;
	}
	/*ふきだし-----------------------------------------------------------------*/
	div.imgbox{
		max-width: 50vw;
		max-height: 70vh;
	}
	img.fukidashi{
		width: 50%;
	}
	.fkdsbox{
		line-height: 3vw;
		top:2vw;
		left:0;
		width: 100%;
	}
	.icon{
		height: 2vw;
	}
	.fkds_arrow_right{
		line-height: 5vw;
		height: 6vw;
		top:1vw;
		left:68%;
	}
	/*すいっち-----------------------------------------------------------------*/
	#switchtext1{
		top:20vh;
	}
	#switchtext2{
		top:35vh;
	}
	#switchtext3{
		top:50vh;
	}
	#switchtext4{
		top:80vh;
	}
	#switchtext5{
		top:65vh;
	}
	.switchtext{
		height:4vw;
		font-size: 3vw;
	}
}