@import url('https://fonts.googleapis.com/css2?family=Edu+TAS+Beginner&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oooh+Baby&display=swap');

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin:0; padding:0; border:0; vertical-align:baseline; font-weight:normal;}
img { border:0 none; }
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
 body { line-height: 1.3; }
 ol, ul { list-style: none; margin:0; }
 blockquote, q { quotes: none; }
 blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
 table { border-collapse: collapse; border-spacing: 0; }
 
 body{
  	font-family: "M PLUS Rounded 1c", serif;
 	font-size: 12px;
 	font-weight: 400;
 	font-style: normal;
 }
 
p{

}

.mainPage{
}

.mainPage::before{
	background-image: url(../img/0-2.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top;
	background-color: #0b0f29;
	position: fixed;
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height:100vh;
	content:"";
}

.main{
	background-color: rgba(255, 255, 255, 0.8);
	margin:2%;
	padding:2%;
}

h1{
	font-family: "Oooh Baby", serif;
	color:white;
	font-size:5rem;
	margin:0;
}

h2{
	font-family: "M PLUS Rounded 1c", serif;
	font-size:2rem;
	text-align:center;
	margin:0.5rem;
}

h3{
	font-family: "M PLUS Rounded 1c", serif;
	font-size:1.5rem;
	margin:0.5rem;
}

h4{
	font-family: "M PLUS Rounded 1c", serif;
	font-size:1.2rem;
	margin:0.5rem;
}

a{
	color:black;
}

img{
	display:block;
	max-width:100%;
	max-height:80vh;
	height:auto;
	width:auto;
	margin:0.5rem auto;
	pointer-events: none;
}

.icon{
	width:100%;
	height:auto;
}

ul{
	padding:0.5rem;
	list-style-position: outside;
}

li{
	text-indent:-1rem;
	padding-left:1rem;
	font-family: "M PLUS Rounded 1c", serif;
	font-size: 12px;
}

li::before{
	content: "・ ";
}

.waku{
	text-align:center;
	border: 1px solid #fffacd;
	margin:2%;
	padding:1%;
}

.tpg{
	position: absolute;
	right: 5%;
	top: 5%;
	width: 250px;
	height:auto;
	z-index: -1;
}

.naka{
	text-align:center;
}

.container{
	display: flex;
	flex-wrap: wrap;
	width:100%;
	height:auto;
	margin:auto;
	text-align:center;
	justify-content: center;
}

.container2{
	display: flex;
	flex-wrap: wrap;
	width:100%;
	height:auto;
	margin:auto;
	text-align:center;
}

.container .box
{
	width:45%;
	height:auto;
	margin:0 0.25rem;
}

.container2 .rkgk
{
	display: flex;
	width:30vw;
	height:30vw;
	text-align:center;
	text-decoration:none;
	
}

.rkbox{
	
}

@media (max-width: 640px) {
	.mainPage::before{
		background-image: url(img/0-3.png);
	}
}

@media (min-width: 641px) {

	p{
		font-size:16px;
	}
	
	h1{
		position:relative;
		margin:10px auto 0 80px;
		font-size: 10rem;
	}
	
	h2{
		font-size:3rem;
		margin:0 1rem 1rem 1rem;
	}
	
	h3{
		font-size:1.5rem;
		margin:0.5rem;
	}
	
	h4{
		font-size:1.2rem;
		margin:0.5rem;
	}
	
	li{
		text-indent:-1rem;
		padding-left:1rem;
		font-family: "M PLUS Rounded 1c", serif;
		font-size: 16px;
	}
	
	.tpg{
		width:500px;
	}
	
	.container .box{
	width:25%;
	height:auto;
	margin:0.25rem;
	text-align:center;
	}
	
	.container2 .rkgk{
	display: flex;
	width:10vw;
	height:10vw;
	text-align:center;
	text-decoration:none;
	}
}