@charset "utf-8";
html{
	height: 100%;
	margin: 0;
	padding: 0;
}

body{
	height: 100%;
	text-align: center;
	padding: 0;
	margin: 0;
	font-family: 'ヒラギノ明朝 ProN','Hiragino Mincho ProN','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',serif;
	-moz-font-feature-settings:  "hkna","kern","ccmp","onum";
	-webkit-font-feature-settings: "hkna","kern","ccmp","onum";
	font-feature-settings: "hkna","kern","ccmp","onum";
}

div.wrapper{
	height: 100%;
	padding: 0;
	margin: 0% auto;
}

.maincontent{
	min-height: 100%;
	background-color: hsla(0,0%,50%,1);
}

header{
	min-height: 10vh;
	margin: 0;
	padding: 0;
	background-color: hsla(0,100%,0%,1);
	border-color: hsla(0,50%,0%,1);
	border-style: solid none outset;
	color: hsla(0,50%,100%,1);
}

h1{
	margin: 0;
}

header p{
	font-size: small;
}

.number{
	font-size: small;
}


.flexbox{
	min-height: 70vh;
	margin: 0 auto;
	padding: 0 0 10vh;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-content: space-around;
}

a.item{
	display: block;
	margin: 10px 0;
	width: 30%;
	min-height: 25vh;
	text-decoration: none;
}

/*レスポンシブル対応*/
@media screen and (max-width: 750px){
	a.item{
		width: 45%;
	}
}

@media screen and (max-width: 480px){
	a.item{
		width: 90%;
	}
}


img.banner{
	width: 95%;
	max-width: 234px;
}

/* main */
#main:link, #main:visited{
	background-color: hsla(0,100%,50%,1);
	border-color: hsla(0,100%,40%,1);
	border-style: outset;
	color: hsla(0,50%,20%,1);
	transition: all 0.2s ease 0s;
}

#main:hover{
	background-color: hsla(0,100%,30%,1);
	border-color: hsla(0,100%,20%,1);
	border-style: inset;
	color: hsla(0,50%,20%,1);
	transition: all 0.2s ease 0s;
}

#main:active{
	background-color: hsla(180,80%,30%,1);
	border-color: hsla(180,80%,20%,1);
	border-style: inset;
	color: hsla(180,100%,100%,1);
	transition: all 0.2s ease 0s;
}

/* cads */
#cards:link, #cards:visited{
	background-color: hsla(60,100%,50%,1);
	border-color: hsla(60,100%,40%,1);
	border-style: outset;
	color: hsla(60,50%,20%,1);
	transition: all 0.2s ease 0s;
}

#cards:hover{
	background-color: hsla(60,100%,30%,1);
	border-color: hsla(60,100%,20%,1);
	border-style: inset;
	color: hsla(60,50%,20%,1);
	transition: all 0.2s ease 0s;
}

#cards:active{
	background-color: hsla(240,80%,30%,1);
	border-color: hsla(240,80%,20%,1);
	border-style: inset;
	color: hsla(240,100%,100%,1);
	transition: all 0.2s ease 0s;
}

/* tex */
#tex:link, #tex:visited{
	background-color: hsla(120,100%,50%,1);
	border-color: hsla(120,100%,40%,1);
	border-style: outset;
	color: hsla(120,50%,20%,1);
	transition: all 0.2s ease 0s;
}

#tex:hover{
	background-color: hsla(120,100%,30%,1);
	border-color: hsla(120,100%,20%,1);
	border-style: inset;
	color: hsla(120,50%,20%,1);
	transition: all 0.2s ease 0s;
}

#tex:active{
	background-color: hsla(300,80%,30%,1);
	border-color: hsla(300,80%,20%,1);
	border-style: inset;
	color: hsla(300,100%,100%,1);
	transition: all 0.2s ease 0s;
}

/* links */
#links:link, #links:visited{
	background-color: hsla(180,100%,50%,1);
	border-color: hsla(180,100%,40%,1);
	border-style: outset;
	color: hsla(180,50%,20%,1);
	transition: all 0.2s ease 0s;
}

#links:hover{
	background-color: hsla(180,100%,30%,1);
	border-color: hsla(180,100%,20%,1);
	border-style: inset;
	color: hsla(180,50%,20%,1);
	transition: all 0.2s ease 0s;
}

#links:active{
	background-color: hsla(0,80%,30%,1);
	border-color: hsla(0,80%,20%,1);
	border-style: inset;
	color: hsla(0,100%,100%,1);
	transition: all 0.2s ease 0s;
}

/* taikai */
#taikai:link, #taikai:visited{
	background-color: hsla(240,100%,50%,1);
	border-color: hsla(240,100%,40%,1);
	border-style: outset;
	color: hsla(180,50%,50%,1);
	transition: all 0.2s ease 0s;
}

#taikai:hover{
	background-color: hsla(240,100%,30%,1);
	border-color: hsla(240,100%,20%,1);
	border-style: inset;
	color: hsla(180,50%,50%,1);
	transition: all 0.2s ease 0s;
}

#taikai:active{
	background-color: hsla(60,80%,30%,1);
	border-color: hsla(60,80%,20%,1);
	border-style: inset;
	color: hsla(60,100%,100%,1);
	transition: all 0.2s ease 0s;
}

/* blog */
#blog:link, #blog:visited{
	background-color: hsla(300,100%,50%,1);
	border-color: hsla(300,100%,40%,1);
	border-style: outset;
	color: hsla(300,50%,20%,1);
	transition: all 0.2s ease 0s;
}

#blog:hover{
	background-color: hsla(300,100%,30%,1);
	border-color: hsla(300,100%,20%,1);
	border-style: inset;
	color: hsla(300,50%,20%,1);
	transition: all 0.2s ease 0s;
}

#blog:active{
	background-color: hsla(120,80%,30%,1);
	border-color: hsla(120,80%,20%,1);
	border-style: inset;
	color: hsla(120,100%,100%,1);
	transition: all 0.2s ease 0s;
}

/* footer */
#foot{
	display: block;
	min-height: calc(10vh - 7px);
	margin: -10vh 0 0;
	padding: 0;
	text-decoration: none;
}

#foot:link, #foot:visited{
	background-color: hsla(0,0%,100%,1);
	border-color: hsla(0,0%,40%,1);
	border-style: outset;
	color: hsla(0,50%,0%,1);
	transition: all 0.2s ease 0s;
}

#foot:hover{
	background-color: hsla(0,0%,40%,1);
	border-color: hsla(0,0%,20%,1);
	border-style: inset;
	color: hsla(0,0%,20%,1);
	transition: all 0.2s ease 0s;
}

#foot:active{
	background-color: hsla(0,0%,10%,1);
	border-color: hsla(0,0%,20%,1);
	border-style: inset;
	color: hsla(0,100%,100%,1);
	transition: all 0.2s ease 0s;
}

/* sellection */

::selection{
	background-color: hsla(0,0%,0%,1);
	color: hsla(240,100%,25%,1);
}