@charset "utf-8";
/*
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
医療法人美郷会　こころはすサイト共通
	ver.2025.08
	ページヘッダーのスタイルシート。
────────────────────────────────────────
FileName:		/resources.kokorohasu/css/kokorohasu-style-header.css
Editor:			TRUSTEC
Description:	こころはすサイト共通のページヘッダーのスタイルシート。
────────────────────────────────────────
2025/10/27:		公開。
2025/08/01:		開発開始。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/





/* ::::: [CUSTOM PROPERTIES] ::::: */
:root {

	/* Sticky
	--------- --------- --------- ------- */

	/* Fixed
	--------- --------- --------- ------- */

	/* Header
	--------- --------- --------- ------- */
	--header-background-color: #ffffff;
	--header-color: #000000;
	--header-font-size: 18px;
	--header-pointed-color: #a0a0a0;

	--header-telephone-color: #a0a0a0;
}





/* Sticky Page Top
--------- --------- --------- ------- */
#sticky-page-top {
	background-color: var(--header-background-color);
}

/*#sticky-page-top .sticky-page-top-transition {
	transition: 0.3s;
}*/





/* Fixed Page Top
--------- --------- --------- ------- */
#fixed-page-top {
}

/*#fixed-page-top .fixed-page-top-transition {
	transition: 0.3s;
}*/




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

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

/*
header .information {
	text-align: right;
}

header .biz-hours {
	font-size: .8rem;
	vertical-align: middle;
}
*/

/* Page Header
--------- --------- --------- ------- */
#pageHeader {
	background-color: transparent;
	--navbar-toggler-background-color: var(--header-background-color);
	--navbar-toggler-color: var(--header-pointed-color);

/*	background-color: var(--header-background-color);*/
}

/* Scrolled */
#pageHeader.scrolled {
	background-color: var(--header-background-color);
	transition: 0.3s;
}

#pageHeader .navbar.navbar-expand-md {
}

/* Page Header's Brand Logo
--------- --------- --------- ------- */
#pageHeader .navbar-brand {
/*	display: inline-block;*/
	max-width: calc(100% - 70px);
}

#pageHeader .navbar-brand a {
	color: var(--header-color);
}

#pageHeader .navbar-brand .brandname {
	font-size: small;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

@media (max-width: 400px) {
	#pageHeader .navbar-brand {
	}
/*	#pageHeader .navbar-brand img {
		max-width: 100%;
	}*/
}

/* Page Header's Toggle Button
--------- --------- --------- ------- */
#pageHeader .navbar-toggler {
	background-color: var(--navbar-toggler-background-color);
	color: var(--navbar-toggler-color);
	padding: 0.2em;
	border-color: var(--navbar-toggler-color);
/*	border-radius: 2px;*/
	transition: 0.2s;
}
#pageHeader .navbar-toggler:active {
	background-color: var(--navbar-toggler-color);
	color: var(--navbar-toggler-background-color);
	border-color: var(--navbar-toggler-background-color);
}
#pageHeader .navbar-toggler:focus {
}

#pageHeader .navbar-toggler-icon {
	line-height: normal;
}
#pageHeader .navbar-toggler-icon::before {
/*	width: 100%;
	height: 100%;*/
}

/*	navbarが閉じている場合のアイコン	*/
#pageHeader .navbar-toggler .navbar-toggler-icon::before {
/*	content: "";
	background-color: currentColor;
	width: 100%;
	aspect-ratio: 1 / 1;
	-webkit-mask-image: url("../images/common/icon-mobile-menu.svg");
	-webkit-mask-size: 80%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-image: url("../images/common/icon-mobile-menu.svg");
	mask-size: 80%;
	mask-repeat: no-repeat;
	mask-position: center;*/
}
/*	navbarが開いている場合のアイコン	*/
#pageHeader .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
}

/* navbar-headerMenu
--------- --------- --------- ------- */
#navbar-headerMenu {

	--navbar-font-family: var(--title-font-family);
	--navbar-font-size: large;
	--navbar-item-link-color: var(--header-color);
	--navbar-item-hover-color: var(--header-pointed-color);

	font-family: var(--navbar-font-family);
	font-size: var(--navbar-font-size);
}
#navbar-headerMenu.navbar-collapse {
	flex-grow: initial;
	gap: 0 1em;
}

#navbar-headerMenu .navbar-nav .nav-link {
}

#navbar-headerMenu .navbar-nav .nav-item > a {
	color: var(--navbar-item-link-color);
	transition: 0.4s;
}
#navbar-headerMenu .navbar-nav .nav-item > a:hover,
#navbar-headerMenu .navbar-nav .nav-item > a:focus,
#navbar-headerMenu .navbar-nav .nav-item > a:active {
	color: var(--navbar-item-hover-color);
}

/* navbar-headerMenu's Call Telephone
--------- --------- --------- ------- */
#navbar-headerMenu .callTelephone {
	background-color: var(--header-telephone-color);
	color: #ffffff;
	padding: 0 0.5rem;
	border-radius: 2rem;
}

#navbar-headerMenu .callTelephone .call {
/*	font-size: 1.35rem;
	font-size: 1.55em;
	font-family: var(--common-font-family);
	font-style: var(--common-font-style);
	font-weight: var(--common-font-weight-bold);*/
}





/* ::::: [SECTION: GLOBAL MENU] ::::: */

/* Global Menu
--------- --------- --------- ------- */
#grobalMenu {
/*	--globalmenu-font-size: 16px;
	--globalmenu-navbar-item-link-color: var(--header-color);
	--globalmenu-navbar-item-hover-color: var(--header-pointed-color);
	--globalmenu-dropdown-border: var(--common-border-1);

	background-color: var(--header-background-color);
	font-size: var(--globalmenu-font-size);
	line-height: 1.5em;*/
}

#grobalMenu .navbar {
}


/* navbar-globalMenu
--------- --------- --------- ------- */
#navbar-globalMenu {
}

#navbar-globalMenu .navbar-nav {
/*	width: 100%;
	justify-content: space-between;
	align-items: center;*/
}

#navbar-globalMenu .navbar-nav .nav-item {
/*	font-family: var(--common-font-family);
	font-style: var(--common-font-style);
	font-weight: var(--common-font-weight-bold);
	flex-basis: auto;
	width: 100%;*/
}
#navbar-globalMenu .navbar-nav .nav-item > a {
/*	color: var(--globalmenu-navbar-item-link-color);
	width: 100%;
	height: 100%;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	border: solid 1px rgba(255, 255, 255, 0);
	border-top-width: 4px;
	border-bottom-width: 4px;
	border-top-left-radius: 0.25em;
	border-top-right-radius: 0.25em;
	display: block;
	transition: 0.4s;*/
}

#navbar-globalMenu .navbar-nav .nav-item > a:hover,
#navbar-globalMenu .navbar-nav .nav-item > a:focus,
#navbar-globalMenu .navbar-nav .nav-item > a:active {
/*	color: var(--globalmenu-navbar-item-hover-color);
	border-bottom-color: var(--globalmenu-navbar-item-hover-color);*/
}

/* Global Menu's' Dropdown
--------- --------- --------- ------- */
#navbar-globalMenu .navbar-nav .dropdown-menu {
/*	font-size: var(--globalmenu-font-size);
	font-size: 1rem;
	font-family: var(--common-font-family);
	font-style: var(--common-font-style);
	font-weight: var(--common-font-weight);
	margin-top: 0;
	border: var(--globalmenu-dropdown-border);
	border-top: none;
	border-top-left-radius: 0;
	border-top-right-radius: 0;*/
}

#navbar-globalMenu .navbar-nav .nav-item > .dropdown-toggle::after {
/*	color: #789992;*/
}

#navbar-globalMenu .navbar-nav .nav-item > a.dropdown-toggle.show {
/*	background-color: #ffffff;
	color: #789992;
	border-color: rgba(0, 0, 0, 0.1);
	border-top-color: #789992;
	border-bottom-color: rgba(255, 255, 255, 0);*/
}

#navbar-globalMenu .dropdown-item {
/*	color: initial;
	font-family: inherit;
	font-style: inherit;
	font-weight: inherit;*/
}
#navbar-globalMenu .dropdown-item:hover,
#navbar-globalMenu .dropdown-item:focus,
#navbar-globalMenu .dropdown-item:active {
/*	background-color: rgba(194, 213, 208, 0.4);*/
}

#navbar-globalMenu .navbar-nav .dropdown-menu .dropdown-description {
/*	padding: 1rem;*/
}
#navbar-globalMenu .navbar-nav .dropdown-menu .dropdown-description .dropdown-description-title {
/*	font-size: max(1rem, 1.6vw);
	font-size: 1.5em;
	font-family: var(--title-font-family-serif);
	font-style: var(--title-font-style-serif);
	font-weight: var(--title-font-weight-serif-bold);
	line-height: var(--title-line-height);
	letter-spacing: 0.05em;
	margin-bottom: 0.5em;
	display: block;*/
}
#navbar-globalMenu .navbar-nav .dropdown-menu .dropdown-description .dropdown-description-text {
/*	font-size: var(--common-font-size-smaller);
	line-height: var(--common-line-height);
	margin-bottom: 0.5em;*/
}
#navbar-globalMenu .navbar-nav .dropdown-menu .dropdown-description .dropdown-description-text::before {
/*	content: "──";*/
}

#navbar-globalMenu .navbar-nav .dropdown-menu .dropdown-divider {
}







/*
--------- --------- --------- ------- */
.navbar-open-transition {
	transition: 0.3s;
}

/* @media
--------- --------- --------- ------- */
/*	DisplayWidth > MD	*/
@media (min-width: 992px) {
	#navbar-globalMenu .navbar-nav .dropdown-menu {
/*		width: 95vw;
		max-width: 1200px;
		min-height: 35vh;
		position: absolute;
		filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.2));*/
	}

	#navbar-globalMenu .navbar-nav .dropdown-menu.outpatient {
/*		background: #ffffff url("../images/common/grobalmenu-outpatient.jpg") no-repeat right;
		background-size: contain;*/
	}

	#navbar-globalMenu .navbar-nav .dropdown-menu.hospitalization {
/*		background: #ffffff url("../images/common/grobalmenu-hospitalization.jpg") no-repeat right;
		background-size: contain;*/
	}

	#navbar-globalMenu .navbar-nav .dropdown-menu.department {
/*		background: #ffffff url("../images/common/grobalmenu-department.jpg") no-repeat right;
		background-size: contain;*/
	}

	#navbar-globalMenu .navbar-nav .dropdown-menu.information {
/*		background: #ffffff url("../images/common/grobalmenu-information.jpg") no-repeat right;
		background-size: contain;*/
	}

	#navbar-globalMenu .navbar-nav .dropdown-menu.medicalcheckup {
/*		background: #ffffff url("../images/common/grobalmenu-medicalcheckup.jpg") no-repeat right;
		background-size: contain;*/
	}

	#navbar-globalMenu .navbar-nav .dropdown-menu.nursingcare {
/*		background: #ffffff url("../images/common/grobalmenu-nursingcare.jpg?update=202506051030") no-repeat right;
		background-size: contain;*/
	}

	#navbar-globalMenu .navbar-nav .dropdown-menu.contact {
/*		background: #ffffff url("../images/common/grobalmenu-contact.jpg") no-repeat right;
		background-size: contain;*/
	}
}





/* ::::: [SECTION: MOBILE MODAL MENU] ::::: */

/*
--------- --------- --------- ------- */
#navbar-modalMenu {
/*	font-size: var(--header-font-size);*/

	--modal-background-color: var(--common-pointed-background-color-1);
	--modal-link-color: var(--header-color);
	--modal-hover-color: var(--header-pointed-color);

	background-color: var(--modal-background-color);
}

/*
--------- --------- --------- ------- */
#navbar-modalMenu-dialog {
/*	--modal-header-background-color: #789992;
	--modal-header-color: #ffffff;
	--modal-footer-background-color: rgba(0, 0, 0, 0.1);
	--modal-footer-button-background-color: #50605c;
	--modal-footer-button-background-color: #789992;
	--modal-footer-button-color: #ffffff;*/
}

/*
--------- --------- --------- ------- */
#navbar-modalMenu-dialog .modal-content {
	background-color: var(--modal-background-color);
}

/* Dialog Header
--------- --------- --------- ------- */
#navbar-modalMenu-dialog .modal-header {
/*	background-color: var(--modal-header-background-color);
	color: var(--modal-header-color);
	padding: 0.75rem;*/
	border: none;
}

#navbar-modalMenu-dialog .btn-close {
/*	font-size: 1.5em;
	margin: 0;
	padding: 0.2em;
	opacity: 1;*/
}

/* Dialog Body
--------- --------- --------- ------- */
#navbar-modalMenu-dialog .modal-body {
/*	font-size: var(--common-font-size-smaller);
    line-height: 1.5em;*/
}

#navbar-modalMenu-dialog .modal-body a {
	color: var(--modal-link-color);
}
#navbar-modalMenu-dialog .modal-body a:hover,
#navbar-modalMenu-dialog .modal-body a:focus,
#navbar-modalMenu-dialog .modal-body a:active {
	color: var(--modal-hover-color);
}

/* Dialog Footer
--------- --------- --------- ------- */
#navbar-modalMenu-dialog .modal-footer {
/*	background-color: var(--modal-footer-background-color);
	padding: 0.75rem;*/
}
#navbar-modalMenu-dialog .modal-footer .btn-dialog-close {
/*	background-color: var(--modal-footer-button-background-color);
	color: var(--modal-footer-button-color);
	border: solid 1px transparent;
	transition: 0.4s;*/
}
#navbar-modalMenu-dialog .modal-footer .btn-dialog-close:hover,
#navbar-modalMenu-dialog .modal-footer .btn-dialog-close:focus,
#navbar-modalMenu-dialog .modal-footer .btn-dialog-close:active {
/*	background-color: transparent;
	color: var(--modal-footer-button-background-color);
	border-color: var(--modal-footer-button-background-color);*/
}

/* Call Telephone
--------- --------- --------- ------- */
#navbar-modalMenu-callTelephone {
	background-color: rgba(0, 0, 0, 0.1);
	border-radius: 0.45em;
}

/*
--------- --------- --------- ------- */
.dialog-mobile-button-card {
	text-align: center;
	vertical-align: middle;
	height: 100%;
	border: none;
}
.dialog-mobile-button-card a {
	color: var(--header-telephone-color) !important;
	font-family: var(--title-font-family);
	font-size: larger;
	font-weight: var(--title-font-weight);
    line-height: 1.2em;
    padding: 0 0.5rem;
    display: block;
}
.dialog-mobile-button-card a:hover,
.dialog-mobile-button-card a:focus,
.dialog-mobile-button-card a:active {
	/*opacity: var(--common-hover-opacity);*/
	/*filter: grayscale(100%);*/
	/*filter: invert();*/
}
.dialog-mobile-button-card-caption {
    font-size: 0.5em;
    line-height: 1em;
    margin-top: 5px;
    display: block;
}

/* List Menu
--------- --------- --------- ------- */
.dialog-mobile-menu {
	font-family: var(--title-font-family);
	font-size: 1em;
	font-weight: var(--title-font-weight);
}

.dialog-mobile-menu a {
	display: inline-block;
	width: 100%;
	padding: 0.3em 0;
}

.dialog-mobile-menu .list-unstyled {
}
.dialog-mobile-menu .list-unstyled li:not(:last-child) {
	/*margin-bottom: 0.5em;*/
}

.dialog-mobile-menu.small {
	font-size: small;
	font-family: var(--header-font-family);
	font-weight: var(--header-font-weight);
}
.dialog-mobile-menu.small a {
	padding: 0;
}
.dialog-mobile-menu.small .list-unstyled {
}
.dialog-mobile-menu.small .list-unstyled li {
}

/*
--------- --------- --------- ------- */
#navbar-modalMenu-dialog .list-relatedlink {
}