@charset "utf-8";

/*縦位置なら適用*/
@media screen and (orientation: portrait) {
	body.single main::before { top: 20vh; }
}
	
/*PCサイズ*/
@media screen and (min-width: 1200px) {
	
	header #logo {
		width: 105px;
		height: 35px;
	}
	
	#coverart {
		width: 1200px;
		height: 300px;
	}
    
	header .wrapper, nav#info UL, footer .wrapper, article#single  {
		width: 1200px;
	}
    
    header .wrapper, footer .wrapper  {
        margin: auto;
	}

}

/*共通要素*/
@media screen and (min-width: 320px) and (max-width: 1199px) {
	header {
		width: 90%;
		margin: 1em auto!important;
	}
	#index header {
		margin-top: 0;
	}

}

/*タブレット*/
@media screen and (min-width: 801px) and (max-width: 1199px)  {
	header #logo {
		width: 105px;
		height: 35px;
	}
	article#single figure.top-image {width: 90%;}	
}
@media screen and (min-width: 513px) and (max-width: 800px) {
	
	header #logo {
		width: 90px;
		height: 30px;
	}
	article#single figure.top-image {width: 90%;}	
	.wp-block-image.vertical {
		width: 60%;	
	}
	
	#archives ul#tag-list { width: 80%; }

	#archives ul#tag-list,
	#archives .message,
	#archives ul li a {
		font-size: .8rem;
	}
	
	article.page {width: 80%;}
	
}
/* スマホ */
@media screen and (min-width: 200px) and (max-width: 512px) {
	html, body {
		height: 100dvh;
	}
	body {
		font-size: 15px;
	}
	header #logo {
		width: 75px;
		height: 25px;
	}

	#cover-art { margin-bottom: 5rem; }
	
	.archive header, 
	.page header,
	.single header{ margin: .25em 0;}
	
	article#single figure.top-image {width: 100%;}	
	
	article#single #content {width: 90%;}
	
	article#single #content H2,
	article#single #content P{
		width: calc( 90% - 2rem );
	}
	
	#archives ul.board {
		padding: 4rem 0!important;
	}	
	#archives ul.board li {
		margin: -1rem;
	}
	#archives .message,
	#archives ul.board li a {
		font-size: .8rem;
	}
	
	nav#headline UL LI:hover {
		width: 30vw;
	}
	
	#archives ul li a.vertical::after,
	#archives ul li a.vertical {
		width: 100px!important;
		height: 150px!important;
	}
	#archives ul li a.horizontal::after,
	#archives ul li a.horizontal {
		width: 150px!important;
		height: 100px!important;
	}
	#archives ul li a.vertical.sp::after,
	#archives ul li a.vertical.sp {
		width: 90px!important;
		height: 120px!important;
	}
	#archives ul li a.horizontal.sp::after,
	#archives ul li a.horizontal.sp {
		width: 120px!important;
		height: 90px!important;
	}	
	#archives .message {width: 80%;}
	
	.wp-block-image.vertical {
		width: 75%!important;
	}
	
	#archives ul#tag-list { width: 95%; }
	
	article.page {width: 90%;}
	article.page H1 {font-size: 1.5rem;}
	article.page H2 {font-size: 1.2rem;}
	
	.wp-block-group {
		display: block;
		text-align: center;
		width: 100%;
	}
	.wp-block-column {
		width: calc(50% - .5rem) !important;
	}
	.wp-block-group P { width: 90%!important; }
}
/*SE*/
@media screen and (min-width: 200px) and (max-width: 374px) {
	body {
		font-size: 13px;
	}
	article {
		width: 100%!important;
	}
	article#single figure.top-image {width: 100%;}	
	
	article#single #content H2,
	article#single #content P{
		width: 100%!important;
	}
	article.page H1 {font-size: 1.4rem;}
	article.page H2 {font-size: 1.1rem;}

}