@charset "UTF-8";

/**************************************************
メニュー
**************************************************/

header nav ul {
	display: flex;
}
header i {
	margin: 0;
}

/* メニューアイコン */
header .main li a {
	display: block;
	background-position: center 0;
    background-repeat: no-repeat;
    line-height: 1;
    white-space: nowrap;
}
header .main li:nth-of-type(1) a {
	background-image: url('../img/icon-kamon.svg');
}
header .main li:nth-of-type(2) a {
    background-image: url('../img/icon-overview.svg');
}
header .main li:nth-of-type(3) a {
    background-image: url('../img/icon-timetable.svg');
}
header .main li:nth-of-type(4) a {
    background-image: url('../img/icon-access.svg');
}
header .main li:nth-of-type(5) a {
    background-image: url('../img/icon-info.svg');
}
header .main li:nth-of-type(6) a {
    background-image: url('../img/icon-blog.svg');
}
header .main li:nth-of-type(7) a {
    background-image: url('../img/icon-member.svg');
}
header .main li:nth-of-type(8) a {
    background-image: url('../img/icon-contact.svg');
}

header .main li a:hover {
	background-color:rgba(255,255,255,0.1);
	background-blend-mode:lighten;
}




/**************************************************
スマホの時
**************************************************/

@media only screen and (max-width: 768px) {

	/* 基本設定 */
	.nav {
        left: -100vw;  /* 右から出てくる */
        width: 70vw;   /* スマホに収まるサイズ */
        padding: 5vw;
    }

	/* ロゴ */
	header .main .logo {
		margin: 0 0 -5vw;
	}

	/* メニュー */
	header .main ul {
		flex-wrap: wrap;
		justify-content: space-around ;
		padding: 10vw 7vw;
		gap: 5vw;
	}
	header .main li {
		width: 18vw;
		text-align: center;
		font-size: 2vw;
	}
	/* メニューアイコン */
	header .main li a {
		padding-top: 11vw;
	    background-size: auto 10vw;
	}

	/* SNSアイコン */
	header .sns ul {
		justify-content: center;
		padding: 5vw 0;
		gap: 0 2.5vw;
	}
	header .sns li {
		font-size: 5vw;
	}

}

/**************************************************
タブレットの時
**************************************************/

@media only screen and (min-width: 768px) {

	/* トップページはロゴ非表示 */
	#homePage header .main .logo {
	    display: none;
	}

	/* メニュー */
	header .main ul {
		justify-content: center;
		padding: 2.5rem 5vw;
		gap: 2.5rem;
		border-radius: 0;
	}
	header .main li {
		font-size: 1.2rem;
		text-align: center;
	}
	header .main li:nth-child(2) ,
	header .main li:nth-child(4) {
		width: 5.5rem;
	}
	header .main li:nth-child(n+5) {
		width: 6.5rem;
	}
	/* メニューアイコン */
	header .main a {
		padding-top: 5rem;
	    background-size: auto 4.5rem;
	}

	/* SNSアイコン */
	header .sns ul {
		justify-content: flex-end;
		gap: 0 1vw;
		position: absolute;
		top: 4.3rem;
		left: 2.5vw;
	}
	#homePage header .sns ul {
		top: 2.5vw;
	}
	header .sns li {
		font-size: 2vw;
	}

}