@charset "utf-8";
/* CSS Document */

/* ------------------------------
メイン画像とヘッダーを重ねない
------------------------------ */
@media (min-width:1201px){
	.home .header_wrap,
	.home .header {
		position: relative;
		/*ナビ下層がメイン画像スライダーの下に入らないように*/
		z-index: 1;
	}
}

/* ------------------------------
ヘッダー ロゴとナビを縦に並べるデザイン
------------------------------ */
@media (min-width:1201px){
	.header {
		padding: 0;
		background: #fff;
	}
	
	.header,
	.header .inner {
		display: block;
	}
	
	.header .inner {
		width: 1200px;
		padding: 20px 15px 30px;
		margin: 0 auto;
	}
	
	.header_logo img {
		height: 40px;
	}
	
	.header_text {
		position: static;
	}
	
	.header_logo a {
		width: -moz-fit-content;
		width: fit-content;
		margin-top: 20px;
	}
	
	.nav {
		border-top: 1px solid #ddd;
	}
	
	.menu {
		position: relative;
		justify-content: center;
		width: 1200px;
		margin: 0 auto;
	}
	
	.menu > li > a,
	.menu > li > span {
		padding: 18px;
		font-weight: bold;
	}
	
	/*ヘッダー全体は固定せず、右メニューのみ固定*/
	.header.fixed {
		position: static;
	}
	
	.header.fixed .header_right {
		position: fixed;
	}
}

/* ------------------------------
ヘッダー 登録・ログインボタンを右上に
------------------------------ */
@media (min-width:1201px){
	.menu > li:has(a[href*="register"]),
	.menu > li:has(a[href*="login"]) {
		position: absolute;
		top: -80px;
	}
	
	.menu > li:has(a[href*="register"]) a,
	.menu > li:has(a[href*="login"]) a {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 160px;
		height: 50px;
		min-height: 0;
		padding: 0;
		border: 2px solid var(--sub-color);
		border-radius: 6px;
		font-weight: bold;
	}
	
	.menu > li:has(a[href*="register"]) {
		right: 225px;
	}

	.menu > li:has(a[href*="register"]) a {
		background: var(--sub-color);
		color: #fff;		
	}
	
	.menu em {
		padding: 4px 6px;
		background: #fff;
		color: var(--sub-color);
		border-radius: 4px;
		font-size: 13px;
		font-weight: normal;
	}

	.menu > li:has(a[href*="login"]) {
		right: 50px;
	}
	
	.menu > li:has(a[href*="login"]) a {
		color: var(--sub-color);
	}
}