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

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

/* ------------------------------
ヘッダー ロゴとナビを縦に並べるデザイン
------------------------------ */
@media (min-width:1201px){
	.header {
		background: #fff;
	}
	
	.header,
	.header .inner {
		display: block;
	}
	
	.header_logo img {
		height: 40px;
	}
	
	.header_text {
		position: static;
	}
	
	.header_logo a {
		width: -moz-fit-content;
		width: fit-content;
		margin: 20px auto 0;
	}
	
	.menu {
		justify-content: center;
		margin: 30px 0;
	}
	
	/*ヘッダー全体は固定せず、右メニューのみ固定*/
	.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: 20px;
	}
	
	.menu > li:has(a[href*="register"]) a,
	.menu > li:has(a[href*="login"]) a {
		width: 160px;
		border-radius: 100px;
		font-weight: bold;
	}
	
	.menu > li:has(a[href*="register"]) {
		right: 30px;
	}

	.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: 205px;
	}
	
	.menu > li:has(a[href*="login"]) a {
		border: 2px solid var(--sub-color);
		color: var(--sub-color);
	}
}