<style>

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Lora&family=Noto+Serif+JP&display=swap');

/* all */
*{margin:0; padding:0; border:0; outline:0; text-decoration:none; list-style:none; box-sizing:border-box; font-weight:normal; overflow-wrap:break-word; word-wrap:break-word;}

*::before, *::after{position:absolute; content:'';}

::selection{background:rgba(255,255,255,0.5);}

html{-moz-text-size-adjust:100%; -webkit-text-size-adjust:100%; -ms-text-size-adust:100%;}

/* text, font */
	/* paragraph */
	section p{margin:1em 0;}
	/* font */
	*{font:10px/2 'Lora', 'Noto Serif JP',  '‚l‚r –¾’©', 'Hiragino Mincho ProN', serif; letter-spacing:0.2em;}
		/* color */
		*{color:rgba(72,72,72,0.8);}
		.tab_switch:checked + .tab_label{color:rgba(72,72,72,0.35);}
		a:hover, summary:hover, input[type=submit]:hover{color:rgba(255,255,255,0.8);}
		/* etc */
		span{display:inline-block; margin-bottom:0.5em; border-bottom:solid 1px rgba(72,72,72,0.25);}
			li span{margin-right:1.25em;}
		mark{background:linear-gradient(transparent 80%, rgba(255,255,255,1) 0%);}
		strong{color:rgba(208,79,151,0.75);}
		small{font-size:0.9em;}

/* link */
a:hover, .tab_switch:checked + .tab_label, input[type=submit]:hover, summary:hover, figure:hover{transition:0.3s; cursor:help;}

/* body */
	body{width:100%;}

	/* tab */
	input[type=radio]{display:none;}
		/* menu */
		.tab_label{position:fixed; z-index:100;}
		#label_index, #label_about, #label_works, #label_source{top:2.5em; background:rgba(255,255,255,1);}
		#label_index{position:relative; left:7.5%; padding-right:1em;}
		#label_index::after{z-index:-10; top:50%; left:0; width:200%; border-bottom:solid 1px rgba(72,72,72,0.25);}
		#label_about{right:calc(7.5% + 11.5em); padding-left:1em;}
		#label_works{right:calc(7.5% + 6.05em);}
		#label_source{right:7.5%;}
			/* checked */
			.tab_switch:checked + .tab_label + article{display:block;}
	
	/* sectioning, contents group */
	article, article::before, article::after{width:100%;}
	article, article::before{bottom:0; left:0; height:calc(100vh - 7.5em);}
	article{overflow:auto; position:absolute; display:none; padding:10em 0; text-align:center;}
	section{margin:2.5em auto; width:80%; max-width:540px; text-align:justify;}
	section:first-child{margin-top:10em;}
		/* background */
		article::before, article::after{position:fixed;}
		/* image */
		article::before{z-index:-1000; background:url('”wŒi‰æ‘œ‚ÌURL') center/cover;}
			/* checked */
			#tab_about:checked + .tab_label + article::before, #tab_works:checked + .tab_label + article::before, #tab_source:checked + .tab_label + article::before{opacity:0.35;}
		/* menubar */
		article::after{z-index:10; top:0; left:0; height:7.5em; background:rgba(255,255,255,1);}
		/* text-align */
		.center{text-align:center;}
		.right{margin-left:auto; text-align:right;}

	/* form */
	form{margin:auto; width:100%;}
	input, textarea{margin:1em auto; padding:0.5em; width:100%; max-width:320px; background:transparent;}
	input[type=text], textarea{border-bottom:solid 1px rgba(72,72,72,0.25);}
	textarea{height:10em;}
	
	/* figure */
	figure{display:inline-block; vertical-align:top; margin:1.5em 2em; text-align:center; width:calc(70% / 2);}
	figure:hover .icon{opacity:0.5; transition:0.5s;}
		/* icon */
		.icon{margin:auto; width:80px; height:80px; background:rgba(72,72,72,0.05); border-radius:50%;}
			/* icon image */
			#demo{background:url('”wŒi‰æ‘œ‚ÌURL') center/cover;}


/* media queries */
@media screen and (min-width:767px){

		/* font */
			/* size */
			*{font-size:10.5px;}
		
		/* figure */
		figure{width:calc(62.5% / 4);}

}

</style>