@charset "UTF-8";

/*
header専用css
*/
/* ===============================================
	headerのレイアウト
================================================== */
.header {
	background-color: #fff;
	z-index: 99;
	overflow: visible;
}

	/* -------------------------------------------
		headerのレイアウト > SP
	--------------------------------------------- */
	@media (min-width:0px) {
		.header {
			width: 100%;
			/* height: 5rem; */
			
		}
		.header--layout {
			height: 100%;
			border-bottom: 1px solid #ccc;
			padding-bottom: 4px;
		}
	}
	/* -------------------------------------------
		headerのレイアウト > TABLET
	---------------------------------------------- */
	@media (min-width:720px) {
		.header {
			
		}
	}
	/* -------------------------------------------
		headerのレイアウト > PC
	---------------------------------------------- */
	@media (min-width:1028px) {
		.header {
			height: 100%;
		}
		.header--layout {
			border-bottom: none;
			position: sticky;
			top: 0px;
			height: 100vh;
			overflow-y: auto;
			box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.1);
		}
		.header--layout {
			display: flex;
			align-content: stretch;
			justify-content: center;
			flex-wrap: wrap;
			align-items: center;
		}
	}
	/* -------------------------------------------
		Layout > wide PC
	---------------------------------------------- */
	@media (min-width:1680px) {
	}

/* ===============================================
	sitename
================================================== */
/* ===============================================
	空室状況タイトル
================================================== */
.st_room .ly_pageHeader{
	padding: 20px;
}
.st_room .ly_pageHeader a{
	color: var(--black);
	text-decoration: none;
}
.st_room .el_title_circleDots{
	padding: 50px 30px 30px;
}


/* ===============================================
	g-nav
================================================== */
.g-nav--ttl {
	border-left: 4px solid var(--mainColorDark);
	padding-left: 0.5rem;
	font-size: 1rem;
}
/*グローバルナビ PC,SP共通スタイル*/
.g-nav--ttl {
	margin-bottom: 1rem;
}
.nav--list+.g-nav--ttl {
	margin-top: 1rem;
}
.g-nav--ttl,
.nav--list {
	width: 100%;
}
.nav--list {
	border-top: 1px solid #ccc;
}
.nav--list li {
	border-bottom: 1px solid #ccc;
}
.nav--list li a {
	line-height: 1em;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	font-size: 1rem;
	text-decoration: none;
	color: #222;
	display: flex;
	justify-content: flex-start;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}

	/* -------------------------------------------
		g-nav > SP
	--------------------------------------------- */
	@media (min-height:0px) and (min-width:0px) {
		/*---- ヘッダーに常時表示されるメニュー ここから↓ ----*/
		.g-nav {
			
		}
		.nav--list li {
			flex-wrap: wrap;/*改行させる*/
		}
		/*---- ヘッダーに常時表示されるメニュー ここまで↑ ----*/

		/*-- ハンバーガーボタン --*/
		.hamburger {
			border-radius: 2px;
			border: 1px solid #ccc;
			width: 60px;
			height: 60px;
			position: fixed;
			top: 12px;
			right: 12px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			align-content: center;
			flex-wrap: wrap;
			z-index: 22;
			background-color: #fff;
		}
		/*MENUの文字*/
		.hamburger .menu {
			margin-top: 16px;
			font-size: 12px;
			line-height: 12px;
			color:#666;
		}
		/*真ん中の線*/
		.btn-line {
			margin-top: 10px;
			display: block;
			position: relative;  /* バーガー線の位置基準として設定 */
			width: 28px;  /* 線の長さと高さ */
			height: 2px;
			transition: .2s;
			background-color: var(--mainColorDark);
		}
		/*上下の線を疑似要素で表示させる*/
		.btn-line::before,
		.btn-line::after {
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			transition: .5s;
			background-color: var(--mainColorDark);
		}
		.btn-line::before {
			transform: translateY(-8px); /*上にずらす*/
		}
		.btn-line::after {
			transform: translateY(8px); /*下にずらす*/
		}
		.g-nav {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: auto;
			width: 70%;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			align-content: center;
			flex-wrap: wrap;
			padding-top: 1rem;
			padding-right: 2rem;
			padding-bottom: 1rem;
			padding-left: 2rem;
			background-color: #fff;
			transform: translateX(110vw);/*画面外に配置*/
			visibility:hidden;/*非表示にする*/
			transition: all 0.5s;/*ふわっと*/
			overflow-y: auto;
			z-index: 21;
			box-shadow: 0px -3px 3px 3px rgba(0, 0, 0, 0.05);
		}
		/*-------- ボタンをクリックした時の動き -------*/
		.hamburger.open {
			background-color: #fafafa;
		}
		.g-nav.open {
			transform: translateX(0);/*画面内に配置*/
			visibility: visible;/*表示させる*/
			z-index: 21;
			transition: all 0.5s;/*ふわっと*/
		}
		/*-------- ボタンをクリックした時のヘッダーのスタイル -------*/
		.nav--list li {
			width: 100%;
		}
		.btn-line.open {
			background-color: transparent;/* 真ん中の線を透明に */
		}
		.btn-line.open::before , 
		.btn-line.open::after {
			content: "";
			transition: .2s;
		}
		.btn-line.open::before {
			transform: rotate(45deg);  /* 上の線を傾ける */
		}
		.btn-line.open::after {
			transform: rotate(-45deg);  /* 下の線を傾ける */
		}
		/*--- ハンバーガーメニューの中 ---*/
		.nav--list li a:hover {
			background-color: #dff5f4;
		}
	}
	/* -------------------------------------------
		g-nav > TABLET
	---------------------------------------------- */
	@media (min-width:720px) {
		.g-nav.open {
			width: 50%;
		}
	}
	/* -------------------------------------------
		g-nav > PC
	---------------------------------------------- */
	@media (min-width:1028px) {
		.hamburger {
			display: none;
		}
		.g-nav {
			margin-bottom: 1rem;
			/*↓sp版のスタイルをリセット*/
			position: static;
			width: 90%;
			height: auto;
			padding-top: 0;
			padding-right: 0;
			padding-bottom: 0;
			padding-left: 0;
			background: none;
			transform: translateX(0);/*画面内に表示*/
			visibility: visible;/*表示させる*/
			box-shadow: none;
		}
		.nav--list li {
			flex: auto;
			width: auto;
			position: relative;
		}
		
		
	}
	/* -------------------------------------------
		g-nav > wide PC
	---------------------------------------------- */
	@media (min-width:1360px) {
		.g-nav {
			width: 70%;
		}
	}