@charset "UTF-8";

/*
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
WP Maruso Group Theme
	ver.2023.08.16.Custom-
	ページヘッダーのスタイルシート
────────────────────────────────────────
FileName:		/resources/css/style-header.css
Editor:			TRUSTEC
Description:	ページヘッダーのスタイルシート。
────────────────────────────────────────
2023/07/25:		公開。
2022/12/01:		開発開始。
2022/11/01:		サンプル開発開始。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/





/* ::::: [COMMON] ::::: */

/* Custom Properties
--------- --------- --------- ------- */
:root {
/*	--header-padding-x: 4.8vw;
	--header-padding-y: 2rem;
	--header-padding: 2rem 4.8vw 0 4.8vw;*/
/*	--header-padding-x: max(5.5rem, 5.21vw);
	--header-padding-y: max(4.3rem, 7.22vh);*/
	--header-padding-x: max(1rem, 5.21vw);
	--header-padding-y: max(1rem, 4.06vh);
	--header-padding: var(--header-padding-y) var(--header-padding-x) 0 var(--header-padding-x);

/*	--navbar-brand-width: 16rem;
	--navbar-toggler-width: 4rem;
	--header-menu-icon-width: 2.5rem;
	--header-menu-icon-height: 2rem;*/
	--navbar-brand-width: max(16rem, 14.74vw);
	--navbar-toggler-width: max(4rem, 3.75vw);
	--header-menu-icon-width: max(2.5rem, 2.45vw);
	--header-menu-icon-height: max(2rem, 1.82vw);
}


/* Media Query
--------- --------- --------- ------- */
/*	DisplayWidth < SM	*/
@media (max-width: 767px) {

	/* Custom Properties
	--------- --------- --------- ------- */
	:root {
		--header-padding-x: max(20px, 1rem);
	}
}





/* ::::: [SECTION : HEADER] ::::: */

/* Header
--------- --------- --------- ------- */
header {
/*	border-bottom: solid 1px rgba(0, 0, 0, 0.1);*/
}



/* Page Header
--------- --------- --------- ------- */
#pageHeader {
/*	background-color: rgba(255, 0, 0, 0.1);*/
}

#pageHeader a {
	color: currentColor;
}

#pageHeader .navbar {
	margin: 0;
/*	padding: 2rem 2rem 0 2rem;		*/
/*	padding: 2rem 3vw 0 3vw;		*/
/*	padding: 2rem 4.8vw 0 4.8vw;	*/
	padding: var(--header-padding);
}



/* Page Header's Brand Logo
--------- --------- --------- ------- */
#pageHeader .navbar-brand {
/*	width: min(16rem, 15vw);*/
/*	width: max(9rem, 15vw);*/
/*	width: 16rem;	*/
	width: var(--navbar-brand-width);
/*	display: inline-block;	*/
}
#pageHeader .navbar-brand img,
#pageHeader .navbar-brand svg {
	width: 100%;
}


/* Page Header's Toggle Button
--------- --------- --------- ------- */
#pageHeader .navbar-toggler {
/*	background: #ffffff;*/
	color: currentColor;
/*	width: 4rem;
    height: 4rem;	*/
	width: var(--navbar-toggler-width);
    height: var(--navbar-toggler-width);
	cursor: pointer;
	transition: 0.2s;
	position: relative;
}
#pageHeader .navbar-toggler:hover {
	opacity: 0.5;
	box-shadow: none;
}
#pageHeader .navbar-toggler:focus {
	box-shadow: none;
}
#pageHeader .navbar-toggler:active {
	box-shadow: none;
}

#pageHeader .navbar-toggler-icon {
}

/*	navbarが閉じている場合のアイコン	*/
#pageHeader .navbar-toggler span {
	background-color: currentColor;
	height: 2px;
/*	transition: 1s;*/
	display: inline-block;
	position: absolute;
/*	left: 0.6rem;*/
/*	left: var(--header-padding-x);*/
	left: 50%;
}
#pageHeader .navbar-toggler span:nth-of-type(1) {
  	width: 60%;
/*	top: 1.5rem;*/
	top: 38%;
	transform: translateX(-50%);
}
#pageHeader .navbar-toggler span:nth-of-type(2) {
  	width: 40%;
/*	top: 2.2rem;*/
	top: 55%;
	transform: translateX(-75%);
}

/*	navbarが開いている場合のアイコン	*/
#pageHeader .navbar-toggler[aria-expanded="true"] span:nth-of-type(1) {
	width: 65%;
/*	transform: translateY(6px) rotate(-45deg);*/
/*	transform: translateY(6px) rotate(-35deg);*/
/*	top: 1.5rem;
	left: 0.6rem;*/
	top: 38%;
	transform: translateX(-50%) rotate(-35deg);
}
#pageHeader .navbar-toggler[aria-expanded="true"] span:nth-of-type(2) {
	width: 65%;
/*	transform: translateY(-6px) rotate(45deg);*/
/*	transform: translateY(-6px) rotate(35deg);*/
/*	top: 2.2rem;
	left: 0.6rem;*/
	top: 38%;
	transform: translateX(-50%) rotate(35deg);
}

/* Page Header's Menu Icon
--------- --------- --------- ------- */
#pageHeader .header-menu {
}
.header-menu {
}

.header-menu-icon {
/*	width: 2.5rem;	*/
	width: var(--header-menu-icon-width);
}
.header-menu-icon i {
/*	font-size: 2.5rem;	*/
	font-size: var(--header-menu-icon-width);
	line-height: 1.5em;
	text-align: center;
	vertical-align: middle;
}
.header-menu-icon img {
/*	height: 2rem;	*/
	height: var(--header-menu-icon-height);
	width: 100%;
}



/* Media Query
--------- --------- --------- ------- */
/*	DisplayWidth > XL	*/
@media (min-width: 1400px) {
}

/*	DisplayWidth < SM	*/
@media (max-width: 767px) {
}

/*	DisplayWidth < XS	*/
@media (max-width: 575px) {

	/* Custom Properties
	--------- --------- --------- ------- */
	:root {
	/*	--header-padding: 0.5rem 0 0 0;			*/
	/*	--navbar-brand-width: 40vw;				*/
	/*	--navbar-brand-width: 52vw;				*/
		--navbar-brand-width: 38.67vw;
		--header-menu-icon-width: 6.4vw;
		--header-menu-icon-height: 4.8vw;
	}

/*	#pageHeader .navbar {
		padding: 0.5rem 0 0 0;
	}*/

/*	#pageHeader .navbar-brand {
		width: 40vw;
	}*/

/*	.header-menu-icon {
		width: 7vw;
	}*/
}