/* CSS Document */

html {
	display:block;
	position:relative;
	width:99vw;
	height:auto;
	margin:0 auto;
	scroll-behavior: smooth;
}

* {
	padding:0;
	margin:0;
	width:fit-content;
	font-style:'Sawarabi Gothic','Noto Sans JP', sans-serif;
	font-size:clamp(16px,1.2vw,24px);
}

strong{
	font-size:1.5rem;
	color:rgba(0,152,205,1.0);
	font-weight:bolder;
}

nav {
	display:flex;
	position:sticky;
	width:99vw;
	height:70px;
	top:0;
	left:0;
	z-index:100;
	background-color:rgba(250,250,250,0.7);
}

nav figure:nth-child(1){
	display:block;
	position:absolute;
	width:20%;
	height:100%;
	top:0;
	left:0;
	background-image:url("../image/nav_logo.gif");
	background-size:contain;
	background-repeat:no-repeat;
	background-position:left;
}

nav ul:nth-child(2){
	display:flex;
	position:absolute;
	width:calc(75% - 70px);
	height:fit-content;
	bottom:5px;
	left:20%;
	list-style: none;
}

nav ul:nth-child(2) li{
	white-space: nowrap;
	width:25%;
	height:auto;
	text-align: right;
}

nav ul:nth-child(2) li a{
	text-decoration: none;
	font-size:0.8em;
	width:fit-content;
	padding:0 3px 3px 3px;
	color:dimgray;
	opacity: 0.7;
}

nav article:nth-child(3){
	display:block;
	position:absolute;
	width:100%;
	height:270px;
	top:0;
	left:0;
	clip-path: polygon(0 0,100% 0,100% 100%,calc(100% - 70px) 100%,calc(100% - 70px) calc(100% - 70px),0 calc(100% - 70px));
	background-color:rgba(0,152,205,1.0);
	opacity:0.5; 
	transform:translateY(-200px);
	transition: 0.8s;
}

nav article:nth-child(3):hover{
	opacity:1.0;
	transform:translateY(0);
	transition: 0.8s;
}

nav article:nth-child(3) p{
	display:block;
	position:absolute;
	width:fit-content;
	height:fit-content;
	top:235px;
	right:35px;
	transform:translate(50%,-50%);
	color:white;
	font-size:12px;
	font-weight:bold;
	
}