@charset "UTF-8";

/* ヘッダー  (#header) */

#header {
	position: relative;
	height: 70px;
	background-color: #fff;
	box-shadow: 0 2px 4px #ccc;
    padding: 16px 10px 13px 10px;
}
#header a {
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
#header .flex {
	display: flex;
	height: 100%;
	justify-content: space-between;
	align-items: center;
}

/* ヘッダー　固定・スライドダウン */
#header.fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	animation: slideDown 0.9s ease;
	z-index: 99;
	height: 55px;
}
@keyframes slideDown {
	0% { transform: translateY(-100%) }
	100% { transform: translateY(0%) }
}

/* h1 - NORI's portfolio */
#logo {
	position: relative;
	font-family: "Roboto", sans-serif;
	font-size: 1.125rem;
	line-height: 1;
	padding-left: 35px;
}
#logo a {
	color: #164b09;
}
#logo::before {
	position: absolute;
	background-image: url(../images/common/frog_50x50.png);
	content: "";
	background-size: contain;
    background-repeat: no-repeat;
	width: 30px;
	height: 30px;
    top: 50%; /* 親要素の上端から50%の位置 */
    left: 0;
    transform: translateY(-50%); /* 中央揃えのために上へ50%戻す */
}

/* ナビ */
.globalNav {
	color: #164b09;
	height: 100%;
	line-height: 1;
}
.globalNav ul {
	display: flex;
	height: 100%;
	/* transform: translateY(-500px); */
}
.globalNav ul li {
	position: relative;
	height: 100%;
	padding-left: 35px;
	margin-left: 30px;
}

/* web制作アイコン */
.globalNav ul li.web::before {
	position: absolute;
	background-image: url(../images/common/web_50x50.png);
	content: "";
	background-size: contain;
    background-repeat: no-repeat;
	width: 30px;
	height: 30px;
    top: 50%; /* 親要素の上端から50%の位置 */
    left: 0;
    transform: translateY(-50%); /* 中央揃えのために上へ50%戻す */
}

/* イラストアイコン */
.globalNav ul li.illust::before {
	position: absolute;
	background-image: url(../images/common/illust_50x50.png);
	content: "";
	background-size: contain;
    background-repeat: no-repeat;
	width: 30px;
	height: 30px;
    top: 50%; /* 親要素の上端から50%の位置 */
    left: 0;
    transform: translateY(-50%); /* 中央揃えのために上へ50%戻す */
}

/* contactボタン */
.globalNav ul li.contact {
    border: 2px solid #164b09;
    border-radius: 17px;
    height: 100%;
    display: flex;
    align-items: center;
}
.globalNav ul li.contact a {
    padding: 15px 20px 15px 10px;
}
.globalNav ul li.contact::before {
	position: absolute;
	background-image: url(../images/common/mail_50x50.png);
	content: "";
	background-size: contain;
    background-repeat: no-repeat;
	width: 30px;
	height: 30px;
    top: 50%; /* 親要素の上端から50%の位置 */
    left: 10px;
    transform: translateY(-50%); /* 中央揃えのために上へ50%戻す */
}

#header.fixed .globalNav ul li.contact {
	border: none;
}