@charset "utf-8";

/* Humburger Toggle Button */
#toggle{
	display: none;
}

/* Header */
#header-wrap{
	position: fixed;
	top:0;
	width: 100%;
	height: 58px;
	z-index: 9999;
	background: var(--base-color);
	opacity: 0.9;
	transition: 0.5s;
}
#header-wrap.hide{
	transform:translateY(-150px);
}
.header {
	max-width: calc(var(--wide-wrap));
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 12px;
	display: flex;
	align-items: center;
	padding-left: var(--base-padding);
	padding-right: var(--base-padding);
}

.cloud8-logo {
	width: 224px;
	margin-left: auto;
	margin-right: auto;
	object-fit:cover;
	transform: translateX(-26px);
}
.cloud8-logo img{
	width: 100%;
	height: 100%;
}
.cloud8-logo a{
	display: block;
	padding: 10px 15px 10px;
	border-radius: 4px;
	transition: 0.3s;
}
.cloud8-logo a:hover{
	background: #333333;
}
.cloud8-logo a:hover img{
	filter:invert(100%);
}
.header #menu{
	margin-left:auto; /* 自動右寄せ */
	transform: translateX(15px);
}
#menu ul {
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
  align-items: top;
  gap:26px;
}

#menu li a{
	display: block;
	border-radius: 4px;
	padding: 0px var(--nav-padding) 10px;
	margin-bottom: 5px;
	transition: 0.3s;
	place-items: center;
}

#menu a:hover{
	background-color: #333333;
}

#menu a:hover img{
	filter:invert(100%);
}

#menu .menu_hover a{
	/* border-bottom: 1px solid #000; */
}

/* スクリーンリーダー用テキスト */
.visually-hidden{
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0 0 0 0);
	white-space:nowrap;
	border:0;
}
img.menu-svg{
	height:10.86px;
}

/* ----------------------------------------------------*/
/*	!!--- Nallow Menue ---*/
/*----------------------------------------------------*/

@media (width <=960px) {
	.cloud8-logo a{
		padding-top:0;
		padding-bottom: 5px;
		padding-left: 5px;
		padding-right: 5px;
	}
	img.menu-svg{
			height: 8.3px;
	}
}



/* ----------------------------------------------------*/
/*	!!--- Hamburger Menu for iPhone ---*/
/*----------------------------------------------------*/
@media (min-width: 320px)
and (max-width: 767px) {
	
	/* Hamburger Toggle Button */
	#toggle {
		display: block;
		position: fixed;
		top: 10px;
		left: 10px;
		z-index: 1100;
		width: 40px;
		height: 40px;
		background: #666;
		border-radius: 20px;
		border: none;
		cursor: pointer;
	}
	
	#toggle span {
		display: block;
		height: 4px;
		background: #d3d3d3;
		margin: 4px 8px;
		transition: 0.3s;
	}
	
	/* Hamburgar X Animation */
	#toggle.active span:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}
	
	#toggle.active span:nth-child(2) {
		opacity: 0;
		transform: scaleX(0);
	}
	
	#toggle.active span:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}
	
	/* ===== Background Scrolling Stops When the menu opened.  ===== */
	body.menu-open {
		overflow: hidden;
	}
	
	
	
	/* ===== Menu Body ===== */
	#header-wrap {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		
		transform: translateY(-100%);
		transition: transform 0.3s ease;
		background: #ddd;
		z-index: 1000;
		overflow: hidden;
	}
	#header-wrap.hide{
		transform:translateY(0);
	}
	#header-wrap.open {
		transform: translateY(0);
	}
	
	/* =====  Background Overlay ===== */
	#overlay {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.548);
		opacity: 0;
		pointer-events: none;
		transition: 0.3s;
		
		z-index: 900;
	}
	
	#overlay.open {
		opacity: 1;
		pointer-events: auto;
	}
	
	.header {
		flex-flow: column;
		gap:70px;
		padding-left: 5%;
		padding-right: 5%;
		padding-top: 120px;
		justify-content:center;
	}
	.cloud8-logo {
		display: flex;
		justify-content:center;
		max-width: 340px;
		width: 80%;
		padding: 0;
		transform: translateX(0);
	}
	.cloud8-logo a{
		padding: 0;
		width: 100%;
	}
	.header #menu{
		width: 100%;
		transform: translateX(0);
	}
	#menu ul{
		display: flex;
		justify-content:center;
		flex-flow: column;
		gap:10px 0;
		width: 100%;
	}
	#menu ul li{
		display: flex;
		justify-content:center;
	}
	#menu li a{
		padding: 10px var(--nav-padding) 10px;
	}
	
	img.menu-svg{
		height:20px;
	}

}