@charset "UTF-8";

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,ol,ul,li,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{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}


body{
	font-size: 1em;
	line-height: 1.6em;
	color: #222;
}
*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
a, a:link{
	color: #222;
	text-decoration: none;
	transition: 0.3s ease-in-out;
}
a:hover{
	background-color: #48bae3;
}
a:visited{
	color: #000;
}
img{
	max-width: 100%;
	height: auto;
}

h2{
	font-size: 18px;
	font-weight: 660;
	margin: 0 5px;
}


/* __ Contents __ */

.container p:not(:last-child){
	margin: 10px 0;
}

.sidebar-nav li{
	margin-bottom: 0.5em;
	padding-bottom: 0.5em;
	border-bottom: 1px solid #ddd;
}

/*__ Tiles __*/

.tiles{
	margin-bottom: 1em;
}
.tiles li{

}

/* __ Footer __ */

footer{
	text-align: center;
	background-color: #222;
	color: #fff;
}


/* Media queries
-------------------------------------------------------*/

@media screen and (min-width : 640px) { /* デスクトップ用CSS */



	/* __ Contents __ */

	.container{
		display: flex;
		max-width: 1000px;
		margin: 0 auto;
	}

	.main{
		flex: 1;
		order: 2;
		margin: 10px 0;
	}

	/*__ Tiles __*/

	.tiles{
		display: flex;
		flex-wrap: wrap;
	}
	.tiles li{
		margin: 5px;
		width: calc( 50% - 10px);
	}


	.tiles2{
		display: flex;
		flex-wrap: wrap;
	}
	.tiles2 li{
		margin: 5px;
		width: calc( 25% - 10px);
	}


}


@media screen and (max-width : 639px) { /* デスクトップ用CSS */

	.main{
		margin: 10px 0;
	}

	.tiles2{
		display: flex;
		flex-wrap: wrap;
	}
	.tiles2 li{
		margin: 5px;
		width: calc( 50% - 10px);
	}



}