@charset "UTF-8";
/* CSS Document */
header{
	width: 100%;
	height: calc(115px + 45px);
	position: fixed;
	top:0;
	left:0;
	z-index: 100;
}
header .headTop{
	height: 115px;
	background: #FFF;
	padding:30px 40px 20px;
}
header .headTop .logoArea{
	width: 586px;
	column-gap: 20px;
	margin-right: auto;
}
header .headTop .logoArea .logo{
	aspect-ratio: 324/70;
	max-width: 324px;
	width: 100%;
}
header .headTop .logoArea .kikanList{width: calc((240/586)*100%);}
header .headTop .logoArea .kikanList li{
	color: var(--cc);
	font-size: calc(11/14 * 1em);
	box-shadow: 0px 0px 4px 0px rgba(252, 48, 155,0.25);
	padding: 0.5em 1em;
	text-align: center;	
}
header .headTop .logoArea .kikanList li + li{
	margin-top: 7px;
}

header .headTop .infoArea {
	width: 480px;
}
header .headTop .infoArea .txt{
	width: 100%;
	font-size: calc(10/14 * 1em);
	color: var(--cc);
}
header .headTop .infoArea .tel *{
	color: var(--cc);
}
header .headTop .infoArea .tel .fs{
	font-size: calc(22/14 * 1em);
}
header .headTop .infoArea .tel a{
	font-size: calc(41/14 * 1em);
	letter-spacing: 0.02em;
}
header .headTop .infoArea .snsList{
	column-gap: 20px;
	margin-left: auto;
}
header .headTop .infoArea .snsList li{
	width: 20px;
}
header .headTop .infoArea .snsList li a{
	font-size: calc(22/14 * 1em);
	color: #000;
}




/*gnavBt
=============================*/
header #gnavBt {
	position: fixed;
	top:0;
	right:0;
	z-index:500;
}
header #gnavBt a{
	display: block;
	width: 70px;
	height: 70px;
	position: relative;
	background:#000;
}
/*▼gnavBtアニメ*/
header #gnavBtBorder{
	z-index: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -20px;
	margin-top: -1px;
	display: block;
	width: 40px;
	height: 2px;
	background-color: #FFF;
	transition: transform 0.3s ease, top 0.3s ease;
}
header #gnavBtBorder:before {
	top: -8px;
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	background-color: #FFF;
	position: absolute;
	z-index: -1;
	transition: transform 0.3s ease, top 0.3s ease, margin 0.2s ease;
}
header #gnavBtBorder:after {
	top: 8px;
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	background-color: #FFF;
	position: absolute;
	z-index: -1;
	transition: transform 0.3s ease, top 0.3s ease, margin 0.2s ease;
}
header #gnavBt a:hover #gnavBtBorder:before {
	margin-top: -3px;
}
header #gnavBt a:hover #gnavBtBorder:after {
	margin-top: 3px;
}
header #gnavBt a.open #gnavBtBorder {
	background: none;
}
header #gnavBt a.open #gnavBtBorder:before {
	top:0 !important;
	margin-top: 0 !important;
	transform:rotate(45deg);
}
header #gnavBt a.open #gnavBtBorder:after {
	top:0 !important;
	margin-top: 0 !important;
	transform:rotate(-45deg);
}

/*gnav ani
=============================*/
/* nav#gnav {
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	z-index: 200;
	backdrop-filter: blur(24px);
	background: rgba(0,0,0,0.8);
	display: none;
	padding: 100px 0;
	overflow: auto;
}

nav#gnav > .inner{
	width: 100%;
	margin:auto;
}



nav#gnav.opening {
	display: flex;
	animation: opening 0.8s ease 0s 1 normal both;
}
nav#gnav.opened{display: flex;}

nav#gnav.closing {
	display: flex;
	animation: closing 0.25s ease 0s 1 normal both;
}
nav#gnav.closed{display: none;}



@keyframes opening {
	0% {
		perspective: 1300px;
		transform: scale(1.5);
		filter: alpha(opacity=000);
		opacity: 0.0;
	}
	100% {
		transform: scale(1.0);
		filter: alpha(opacity=100);
		opacity: 1.0;
	}
}
@keyframes         closing {
	0% {
		transform: scale(1.0);
		filter: alpha(opacity=100);
		opacity: 1.0;
	}
	100% {
		perspective: 1300px;
		transform: scale(1.5);
		filter: alpha(opacity=000);
		opacity: 0.0;
	}
} */

nav#gnav {
	height: 45px;
	background: rgba(240,120,140,0.9);
}
nav#gnav > .inner{
	max-width: 1440px;
	width: 100%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 0 55px;
}
#gmenu {
	height: 100%;
	column-gap: 15px;
}
#gmenu li + li{
	margin-left: auto;
}
#gmenu li a{
	display: block;
	font-size: calc((13.5/14)*1em);
	letter-spacing: 0.1em;
	color: #FFF;
	padding: 1em 0;
}