
/*
========================================

　メインビジュアル

========================================*/
#glHeader {
	min-width: 1000px;
	height: 350px;
	text-align: center;
	background-color: #fff;
	background: url(/~perigyne/ksmh/asset/img/main.png) center;
}
.dummy {
	padding: 3em;
	color: #000;
	font-size: 3rem;
	line-height: 1.8;
	text-align: left;
}
@media screen and (max-width: 767px) {
	#glHeader {
		min-width: 0px;
		height: auto;
		background: #fff;
	}
	#glHeader img {
		width: 100%;
	}
	.dummy {
		padding: 1em;
		font-size: 1.5rem;
	}
}
/*
========================================

　メインメニュー

========================================*/
/* ---- # PC # ---- */
#glNav {
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,#e584a3,#eba0b4); 
	background: -webkit-linear-gradient(top,#e584a3,#eba0b4); 
	background: linear-gradient(to bottom,#e584a3,#eba0b4);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0); /* IE6-9 */
}
#glNav ul {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 1000px;
	margin: 0 auto;
	border-left: 1px solid #ddd;
	border-right: 1px solid #fff;
}
#glNav ul li {
	width: 25%;
	text-align: center;
}
#glNav ul li a {
	color: #fff;
	font-size: 1.6rem;
	font-weight: bold;
	padding: 20px 0px;
	border-left: 1px solid #fff;
	border-right: 1px solid #ddd;
	cursor: pointer;
	display: block;
}
#glNav ul li a:hover {
	color: #fff;
	text-decoration: none;
	border-left: 1px solid #ea57a1;
	border-right: 1px solid #44a5c2;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top, #ea57a1 0%, #ea57a1 50%, #ea57a1 51%, #ea57a1 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #ea57a1 0%, #ea57a1 50%, #ea57a1 51%, #ea57a1 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #ea57a1 0%, #ea57a1 50%, #ea57a1 51%, #ea57a1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ea57a1', endColorstr='#ea57a1', GradientType=0); /* IE6-9 */
}
@media screen and (max-width: 767px) {
	#glNav {
		display: none;
	}
}
/* ---- # スマートフォン # ---- */
#spNav {
	display: none;
}
@media screen and (max-width: 767px) {
	#spNav {
		width: 25px;
		padding: 12px 10px;
		background: #fff;
		border: 1px solid #ccc;
		display: block;
		position: fixed;
		top: 10px;
		right: 10px;
		z-index: 9999;
	}
	#nav-drawer {
		position: relative;
	}
	.nav-unshown {
		display: none;
	}
	#nav-open {
		display: inline-block;
		width: 30px;
		height: 19px;
		vertical-align: middle;
	}
	#nav-open span, #nav-open span:before, #nav-open span:after {
		position: absolute;
		width: 25px;
		height: 3px;
		border-radius: 3px;
		background: #555;
		display: block;
		content: '';
		cursor: pointer;
	}
	#nav-open span:before {
		bottom: -8px;
	}
	#nav-open span:after {
		bottom: -16px;
	}
	#nav-close {
		display: none;
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: black;
		opacity: 0;
		transition: .3s ease-in-out;
	}
	#nav-content {
		overflow: auto;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		width: 80%;
		max-width: 330px;
		height: 100%;
		background: #fff;
		transition: .3s ease-in-out;
		-webkit-transform: translateX(-105%);
		transform: translateX(-105%);
	}
	#nav-input:checked ~ #nav-close {
		display: block;
		opacity: .5;
	}
	#nav-input:checked ~ #nav-content {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		box-shadow: 6px 0 25px rgba(0, 0, 0, .15);
	}
	.header-logo-menu {
		display: flex;
		display: -moz-flex;
		display: -o-flex;
		display: -webkit-flex;
		display: -ms-flex;
		flex-direction: row;
		-moz-flex-direction: row;
		-o-flex-direction: row;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
	}
	.logo-erea {
		text-align: center;
		margin: auto;
	}
	#nav-content ul li a, #nav-content ul li.nolink {
		padding: 4% 13% 4% 4%;
		color: #333333;
		text-align: left;
		border-bottom: 1px solid #ccc;
		position: relative;
		display: block;
	}
	#nav-content ul li a:hover {
		background: #59b9d5;
		color: #fff;
		text-decoration: none;
	}
	#nav-content ul li.nolink {
		padding: 1% 13% 1% 4%;
		background: #c0eee8;
	}
	#nav-content ul li.submenu a {
		border-left: 10px solid #c0eee8;
	}
	#nav-content ul li .fa-chevron-down {
		-webkit-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}
	#nav-content ul li i {
		position: absolute;
		top: 50%;
		right: 12px;
		margin-top: -0.5em;
		color: #999999;
	}
	#nav-content ul li a:hover i {
		color: #fff;
	}
}
/*
========================================

　トピックパス

========================================*/
.breadClumb {
	width: 1000px;
	margin: 2em auto 2em 0;
}
.breadClumb ul {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}
.breadClumb li {
	list-style: none;
}
.breadClumb li:after {
	content: ">";
	padding: 0 .5em;
	background-attachment: text-bottom;
}
.breadClumb li:last-child:after {
	content: "";
	padding: 0;
}
@media screen and (max-width: 767px) {
	.breadClumb {
		display: none;
	}
}