@charset "utf-8";
/*
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
医療法人美郷会　西蒲中央病院　カスタム対応
	ver.2023.01.01.Custom-Misatokai
	外来受診について　スタイルシート
────────────────────────────────────────
FileName:		/resources/css/outpatient.css
Editor:			TRUSTEC
Description:	外来受診について　スタイルシート。
────────────────────────────────────────
2023/08/04:		リリース。
2023/05/08:		本開発開始。
2022/10/01:		サンプル開発開始。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/





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





/* ::::: [OVER WRITE SETTING: STYLE] ::::: */





/* :::::  [OVER WRITE SETTING: COMMON-PARTS] ::::: */

/* Call Telephone
--------- --------- --------- ------- */
.callTelephone.fever,
.callTelephone.afterhours {
	color: var(--common-pointed-color-1);
	font-size: xx-large;
	font-family: var(--common-font-family);
	font-style: var(--common-font-style);
	font-weight: var(--common-font-weight-bold);
}



/* :::::  [OVER WRITE SETTING: COMMON-PARTS] ::::: */

/* Alert-Guide Setting
--------- --------- --------- ------- */
.alert.alert-guide {
}
.alert-guide {
	background-color: rgba(194, 213, 208, 0.4);
	color: currentColor;
	font-size: var(--common-font-size-smaller);
	border-color: var(--common-pointed-color-6);
}

/*		*/
.alert-guide .alert-heading {
	color: var(--common-pointed-color-1);
	text-align: center;
}

/*		*/
.alert-guide a {
	color: currentColor;
}
.alert-guide a:hover,
.alert-guide a:focus,
.alert-guide a:active {
	color: #789992;
}

/* Card
--------- --------- --------- ------- */
.alert-guide .card.guide-card {
}

.alert-guide .guide-card {
	background: transparent;
	font-size: var(--common-font-size);
	line-height: var(--common-line-height);
	border: none;
}

.alert-guide .card-body {
	color: #336666;
	font-weight: var(--common-font-weight-bold);
    line-height: var(--common-line-height);
	letter-spacing: 0.05em;
}

.alert-guide .card-title {
	font-size: max(1.8rem, 3vw);
	text-align: center;
	margin-bottom: 0.5em;
	display: block;
}
.alert-guide .card-text {
	text-align: center;
	display: block;
}

.alert-guide .card-footer {
}





/* :::::  [MAIN] ::::: */






/* :::::  [SECTION: OUTPATIENT-STEPS] ::::: */

/* Setting
--------- --------- --------- ------- */
#outpatient-step {
	counter-reset: count-step-item;
}
.outpatient-step-wrapper {
}

/* Step Item
--------- --------- --------- ------- */
.outpatient-step-item {
	--step-header-color: var(--common-pointed-color-1);
	--step-wrapper-color: #f6f6f6;
	--step-arrow-color-1: var(--common-pointed-color-6);
/*	--step-arrow-color-2: rgba(54, 156, 105, 0.5);*/
	--step-arrow-color-2: #d2e3a2;
	--step-arrow-width: 6rem;
	--step-arrow-border-width: calc(var(--step-arrow-width) / 3) calc(var(--step-arrow-width) / 2) calc(var(--step-arrow-width) / 2);
	--step-arrow-border-height: calc(100% - var(--step-arrow-width) / 3);
	--step-arrow-border-bottom: calc(calc(var(--step-arrow-width) / 3) + calc(var(--step-arrow-width) / 2));

	counter-increment: count-step-item;

	width: min(1000px, 100%);
	margin-left: auto;
	margin-right: auto;
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-left: var(--step-arrow-width);

	position: relative;
}
.outpatient-step-item:not(:last-child) {
	margin-bottom: 3em;
}

/* Step Item Arrow
--------- --------- --------- ------- */
.outpatient-step-item::before,
.outpatient-step-item::after {
	content: "";

	background-color: rgba(0, 0, 0, 0.1);
	color: #ffffff;
	font-size: var(--common-font-size-smaller);
	font-size: 3em;
	font-weight: var(--common-font-weight-bold);

	width: var(--step-arrow-width);
	display: block;

	position: absolute;
	z-index: 10;
}

.outpatient-step-item::before {
	/*content: "STEP " counter(count-step-item);*/
	content: counter(count-step-item);

	background-color: var(--step-arrow-color-1);
	text-align: center;
	height: 100%;
	padding: 0.5em;
	border-radius: 5px 5px 0 0;

	top: 0;
	left: 0;
}
.outpatient-step-item:nth-child(2n)::before {
	background-color: var(--step-arrow-color-2);
}
.outpatient-step-item:last-child::before {
	border-radius: 5px;
}

.outpatient-step-item::after {
	background-color: transparent;

	height: 0;
	border-style: solid;
	border-color: var(--step-arrow-color-1) transparent transparent transparent;
	border-width: var(--step-arrow-border-width);

	bottom: calc(var(--step-arrow-border-bottom) * -1);
	left: 0;
}
.outpatient-step-item:nth-child(2n)::after {
	border-color: var(--step-arrow-color-2) transparent transparent transparent;
}
.outpatient-step-item:last-child::after {
	content: "";
	display: initial;
	border: none;
	position: relative;
	left: initial;
	bottom: initial;
}

/* Step Item Header
--------- --------- --------- ------- */
.outpatient-step-item .outpatient-step-item-header {
	color: var(--step-header-color);
	font-size: 1.5em;
}

/* Step Item Wrapper
--------- --------- --------- ------- */
.outpatient-step-item .outpatient-step-item-wrapper {
	background-color: var(--step-wrapper-color);
	padding: 1.5em;
	border-radius: 0 1em 1em 0;
}
.outpatient-step-item .outpatient-step-item-wrapper hr {
	opacity: 0.1;
}

/* Step Begin
--------- --------- --------- ------- */
.outpatient-step-begin {
	background-color: #ffffe0;
	padding: 1.5em;
	border: double rgba(0, 0, 0, 0.2) 0.5em;
	border-radius: 1em;
}

/* @media
--------- --------- --------- ------- */
/*	DisplayWidth < MD	*/
@media (max-width: 991px) {

	/* Setting
	--------- --------- --------- ------- */
	#outpatient-step {
	}

	/* Step Item
	--------- --------- --------- ------- */
	.outpatient-step-item {
		padding: 0;
	}

	/* Step Item Arrow
	--------- --------- --------- ------- */
	.outpatient-step-item::before,
	.outpatient-step-item::after {
		font-size: 1.5em;
	}

	.outpatient-step-item::before {
		width: 100%;
		position: relative;
		top: initial;
		left: initial;
	}
	.outpatient-step-item:last-child::before {
		border-radius: 5px 5px 0 0;
	}

	.outpatient-step-item::after,
	.outpatient-step-item:nth-child(2n)::after {
		border-top-color: var(--step-wrapper-color);
		left: 50%;
		transform: translateX(-50%);
	}

	/* Step Item Header
	--------- --------- --------- ------- */
	.outpatient-step-item .outpatient-step-item-header {
		text-align: center;
	}

	/* Step Item Wrapper
	--------- --------- --------- ------- */
	.outpatient-step-item .outpatient-step-item-wrapper {
		border-radius: 0 0 1em 1em;
	}
}

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

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





/* :::::  [SECTION: OUTPATIENT-AFTERHOURS] ::::: */

/* Setting
--------- --------- --------- ------- */
#outpatient-afterhours {
}

.outpatient-afterhours-wrapper {
}





/* :::::  [SECTION: OUTPATIENT-SECONDOPINION ::::: */

/* Setting
--------- --------- --------- ------- */
#outpatient-secondopinion {
}

.outpatient-secondopinion-wrapper {
}