@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300&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; -webkit-appearance:none;}

*::before, *::after{position:absolute; content:'';}

::selection{color:rgba(255,255,255,1); background:rgba(48,48,48,0.925);}

html{-moz-text-size-adjust:100%; -webkit-text-size-adjust:100%; -ms-text-size-adust:100%;}

/* text, font */
	/* headline */
	h1, h2, h3{font-weight:900;}
	h1{position:relative; margin:12.5em auto 2.5em auto;}
	h1::before{top:-12.5em; left:50%; transform:translateX(-50%); width:9.5em; height:9.5em; background:url('https://i.postimg.cc/2yYPjZ49/alaska-013-w.png') center/cover; opacity:0.75;}
	h2{margin:2.5em auto 1em auto; text-align:justify; width:80%; border-bottom:solid 1px rgba(255,255,255,1);}
	h4{margin:0.5em 0; border-bottom:dotted 1px rgba(255,255,255,1);}
	/* paragraph */
	section p{margin:1.5em 0;}
	figcaption p{margin:0;}
	/* font */
	*{font:11px/2.25 'Nunito', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo ,sans-serif; letter-spacing:0.15em; font-weight:300;}
		/* size */
		h2{font-size:1.25em;}
		h1, .tab_label{font-size:1.15em;}
		/* color */
		*{color:rgba(255,255,255,1);}
		.tab_label{color:rgba(48,48,48,0.8);}
		.tab_switch:checked + .tab_label{color:rgba(48,48,48,0.35);}
		/* etc */
		span{display:inline-block; border-bottom:solid 1px rgba(255,255,255,1);}
		mark{background:transparent; border-bottom:dotted 1px rgba(255,255,255,1);}
		strong{font-weight:600;}
		small{font-size:0.9em;}

/* link */
a:hover, .tab_label:hover, summary:hover, input[type=submit]:hover{opacity:0.5; transition:0.3s; cursor:crosshair;}

/* body */
body::before, body::after{position:fixed; left:0; width:100%;}
body::before{z-index:-1000; top:0; height:100vh; background:url('https://i.postimg.cc/nLKPnTLq/kristopher-roller-188180-unsplash.jpg') center/cover;}
body::after{z-index:10; bottom:0; height:7.5em; background:rgba(255,255,255,1);}

	/* tab */
	input[type=radio]{display:none;}
		/* menu */
		.tab_label, #label_index::after{position:fixed;}
		.tab_label{z-index:1000; bottom:3.5em;}
		#label_index{right:50.5%;}
		#label_sample{right:27.5%;}
		#label_works{right:7.5%;}
			/* checked */
			.tab_switch:checked + .tab_label + article{display:block;}
	
	/* sectioning, contents group */
	article{overflow:auto; display:none; position:relative; padding:2.5em 0 7.5em 0; text-align:center; width:100%; height:calc(100vh - 7.5em);}
	article::after{position:fixed; z-index:1000; bottom:1.25em; right:5%; width:15.5vmax; max-width:105px; height:calc(15.5vmax * 0.25); max-height:calc(105px * 0.25); background:url('https://i.postimg.cc/bNgjJ3Vx/alaska-002-b.png') center/cover; opacity:0.75;}
	section{margin:0 auto 5em auto; padding:2em 1.5em; text-align:justify; width:80%; background:rgba(48,48,48,0.65);}
	section > section{margin:1em auto; width:90%;}
		/* text-align */
		.center{margin:1em auto; text-align:center;}
		.right{margin:1em auto; text-align:right;}
		/* details */
		details{margin:1.5em 0;}
		details > details{margin:1em;}
		details > p{margin-left:1em;}
		/* flexbox */
		.flexbox{display:flex; flex-wrap:wrap; justify-content:space-around; margin:2.5em auto;}
	
	/* index */
	#index{position:relative; height:100vh;}
	#index section, #index section::before{top:40%; left:50%; transform:translate(-50%, -50%);}
	#index section{position:absolute; padding:5em 0; text-align:center; width:225px;  height:400px; border:solid 1px rgba(255,255,255,1);}
	#index section::after{z-index:100; bottom:100px; left:0; transform:rotate(-65deg); width:350px; border-bottom:solid 1px rgba(255,255,255,1);}
	
	/* list */
	ul{margin:1em 0  1em 1em; padding-left:2em; border-left:double 3px rgba(255,255,255,1);}
	
	/* form */
	form{margin:auto; width:100%; text-align: left;}
	input, textarea{display:block; margin:1em auto; padding:0.5em; width:100%; max-width:320px; background:transparent; border:solid 1px rgba(255,255,255,1);}
	textarea{position:relative; height:10em;}

	/* figure */
	figure{display:inline-block; margin:1em 0.85em; width:90px;}
	figure:hover .icon{filter:none; transition:0.5s;}
		/* icon */
		.icon{margin:auto; width:80px; height:80px; background:rgba(48,48,48,1); filter:grayscale(100%);}
			/* icon image */
			#sample{background:url('https://i.postimg.cc/2yYPjZ49/alaska-013-w.png') center/cover;}

/* media queries */
@media screen and (min-width:700px){

	/* font */
		/* size */
		*{font-size:11px;}

	/* tab */
		/* menu */
		#label_index{right:21.5em;}
		#label_sample{right:12.5em;}
		#label_works{right:5em;}
		
	/* sectioning, contents group */
	section{padding:2em 3.5em;}
	section > section{padding:1.5em;}
		/* two colum */
		.half{display:inline-block; margin:0 2.5%; vertical-align:top; width:37.5%;}

}