@charset "UTF-8";

* {
	box-sizing: border-box;
  }

/* 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{background:rgba(255,255,255,0.5);}

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

#header {
	display: none;
  }

@media print {
	body { display: none !important; }
	}

/* text, font */
	/* headline */
	h2{margin:auto; text-align:justify; width:80%;}
	/* paragraph */
	section p{margin:1em 0;}
	/* font */
	*{font:11px/2 'Raleway', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo ,sans-serif; letter-spacing:0.175em;}
	h1, h1 a, h2, nav a{font-family:'Josefin Sans', sans-serif;}
		/* size */
		h1 a{font-size:2.5em;}
		h2{font-size:1.5em;}
		nav ul li a{font-size:1.5em;}
		ul {list-style: none;}
		/* color */
		*{color:rgba(48,48,48,0.8);}
		span{color:rgba(48,48,48,0.35);}
		a:hover{color:transparent;}
		input[type=submit]{color:rgba(255,255,255,1);}
		/* etc */
		span{padding:0.25em; border:solid 1px rgba(48,48,48,0.2);}
		mark{background:linear-gradient(transparent 50%, rgba(48,48,48,0.1) 0%);}
		strong{color:rgba(243,85,80,0.8);}
		small{font-size:0.9em;}

/* link */
a { text-decoration:none; }
a:hover, input[type=submit]:hover{transition:0.3s; cursor:help;}
a:hover{background:url('img/cover02.JPG') center/cover; -webkit-background-clip:text; background-clip:text;}

/* body */
	body{position:relative; width:100%;
		animation: fadein 3s forwards;}
	body::before{z-index:-1000; left:50%; transform:translateX(-50%); margin:5dvh auto; width:90%; height:90dvh; background:url('img/cover01.JPG') center/cover;}

	/* header */
	header{position:fixed; z-index:1000; top:0; left:0; text-align:center; width:100%;}
        img{ pointer-events:none; }
	
	/* sectioning, contents group */
	article{padding:3em 0; text-align:center; width:100%;}
	section{margin:2.5em auto 2.5em auto; text-align:justify; width:80%;}
		/* text-align */
		.center{margin:auto; text-align:center;}
		.right{margin-left:auto; text-align:right;}
	/* site address https://cocoon.silk.to */
		/* pagetop */
		#pagetop{position:relative; height:100dvh;}
			/* navigation */
			nav{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); padding:2.5em; text-align:center; width:80%; max-width:230px; background:rgba(255,255,255,0.70);}
			nav ul{position:relative; margin-bottom:7.5em;}
			nav ul::after{bottom:-7em; left:50%; transform:translateX(-50%); width:35px; height:70px; background:url('img/cocoon-index2.webp') center/cover; opacity:0.8;}

/* form */
form{margin:auto; width:100%; max-width:320px;}
input, textarea{padding:0.5em; width:100%; max-width:320px; background:transparent;}
input[type=text], textarea{background:rgba(48,48,48,0.05);}
textarea{margin-bottom:1.5em; height:10em;}
input[type=submit]{background:rgba(48,48,48,0.8);}
input[type=submit]:hover{opacity:0.5;}

/* media queries */
/* horizontal */
@media screen and (orientation:landscape) and (min-width:1000px){
	
/* body */
body::before{position:fixed; right:0; transform:none; width:45vw;}

	/* color */
	h1 a{color:rgba(48,48,48,0.8);}

	/* sectioning, contents group */
	article{width:50vw; min-height:100dvh;}
	
	/* header */
	header{top:50%; left:75%; transform:translate(-50%, -50%);}


	@keyframes fadein {
		0% {opacity: 0}
		99.9%,to {opacity: 1}
	}


}