/** 文字コード ******************************/
@charset "utf-8";

:root {
	--theme-primary: #2e6c9d;
	--theme-primary-light: #5CAEDD;
	--theme-primary-dark: #1F6C95;
	--theme-primary-bg: #7094b5; /*#90afc5;*/
	--color-font: #ffffff;
	--theme-primary-kamoku: #f9f9f9;
	--theme-primary-kamoku-chara: var(--theme-primary);
	--theme-primary-uke: var(--theme-primary);
	--theme-primary-uke-chara: #ffffff;
	--theme-primary-uke-border: 2px solid #245d86;
	--theme-primary-uke-hover: #3a7db8;
	--theme-primary-yoya: #475569;
	--theme-primary-yoya-chara: #ffffff; /*#245d86*/
	--theme-primary-yoya-border: 2px solid #71717a;
	--theme-primary-yoya-hover: #658199;
	--color-status: var(--theme-primary-bg);
	--color-status: #eaf3fb;
	--color-white: #ffffff;
	--color-black: #1a1a1a;
	--color-gray-medium: #6c757d;
	--color-gray-light: #f9f9f9;
	--color-gray-dark: #343a40;
	--color-shadow: rgba(0, 0, 0, 0.1);
	--color-shadow-hover: rgba(0, 0, 0, 0.15);
	--color-status: #eaf3fb;
}

p {
	margin: 0 0 3px;
}
.table {
	width: 100%;
	margin-bottom: 20px;
}

	.table th, .table td {
		padding: 8px;
		line-height: 20px;
		text-align: left;
		vertical-align: central;
		border-top: 1px solid #dddddd;
	}

	.table th {
		font-weight: bold;
	}

	.table thead th {
		vertical-align: bottom;
	}

	.table caption + thead tr:first-child th, .table caption + thead tr:first-child td, .table colgroup + thead tr:first-child th, .table colgroup + thead tr:first-child td, .table thead:first-child tr:first-child th, .table thead:first-child tr:first-child td {
		border-top: 0;
	}

	.table tbody + tbody {
		border-top: 2px solid #dddddd;
	}

	.table .table {
		background-color: #ffffff;
	}

.table-condensed th, .table-condensed td {
	padding: 4px 5px;
}

.table-bordered {
	border: 1px solid #dddddd;
	border-collapse: separate;
	*border-collapse: collapse;
	border-left: 0;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

	.table-bordered th, .table-bordered td {
		border-left: 1px solid #dddddd;
	}

	.table-bordered caption + thead tr:first-child th, .table-bordered caption + tbody tr:first-child th, .table-bordered caption + tbody tr:first-child td, .table-bordered colgroup + thead tr:first-child th, .table-bordered colgroup + tbody tr:first-child th, .table-bordered colgroup + tbody tr:first-child td, .table-bordered thead:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child td {
		border-top: 0;
	}

	.table-bordered thead:first-child tr:first-child > th:first-child, .table-bordered tbody:first-child tr:first-child > td:first-child, .table-bordered tbody:first-child tr:first-child > th:first-child {
		-webkit-border-top-left-radius: 4px;
		-moz-border-radius-topleft: 4px;
		border-top-left-radius: 4px;
	}

	.table-bordered thead:first-child tr:first-child > th:last-child, .table-bordered tbody:first-child tr:first-child > td:last-child, .table-bordered tbody:first-child tr:first-child > th:last-child {
		-webkit-border-top-right-radius: 4px;
		-moz-border-radius-topright: 4px;
		border-top-right-radius: 4px;
	}

	.table-bordered thead:last-child tr:last-child > th:first-child, .table-bordered tbody:last-child tr:last-child > td:first-child, .table-bordered tbody:last-child tr:last-child > th:first-child, .table-bordered tfoot:last-child tr:last-child > td:first-child, .table-bordered tfoot:last-child tr:last-child > th:first-child {
		-webkit-border-bottom-left-radius: 4px;
		-moz-border-radius-bottomleft: 4px;
		border-bottom-left-radius: 4px;
	}

	.table-bordered thead:last-child tr:last-child > th:last-child, .table-bordered tbody:last-child tr:last-child > td:last-child, .table-bordered tbody:last-child tr:last-child > th:last-child, .table-bordered tfoot:last-child tr:last-child > td:last-child, .table-bordered tfoot:last-child tr:last-child > th:last-child {
		-webkit-border-bottom-right-radius: 4px;
		-moz-border-radius-bottomright: 4px;
		border-bottom-right-radius: 4px;
	}

	.table-bordered tfoot + tbody:last-child tr:last-child td:first-child {
		-webkit-border-bottom-left-radius: 0;
		-moz-border-radius-bottomleft: 0;
		border-bottom-left-radius: 0;
	}

	.table-bordered tfoot + tbody:last-child tr:last-child td:last-child {
		-webkit-border-bottom-right-radius: 0;
		-moz-border-radius-bottomright: 0;
		border-bottom-right-radius: 0;
	}

	.table-bordered caption + thead tr:first-child th:first-child, .table-bordered caption + tbody tr:first-child td:first-child, .table-bordered colgroup + thead tr:first-child th:first-child, .table-bordered colgroup + tbody tr:first-child td:first-child {
		-webkit-border-top-left-radius: 4px;
		-moz-border-radius-topleft: 4px;
		border-top-left-radius: 4px;
	}

	.table-bordered caption + thead tr:first-child th:last-child, .table-bordered caption + tbody tr:first-child td:last-child, .table-bordered colgroup + thead tr:first-child th:last-child, .table-bordered colgroup + tbody tr:first-child td:last-child {
		-webkit-border-top-right-radius: 4px;
		-moz-border-radius-topright: 4px;
		border-top-right-radius: 4px;
	}

.table-striped tbody > tr:nth-child(odd) > td, .table-striped tbody > tr:nth-child(odd) > th {
	background-color: #f9f9f9;
}

.table-hover tbody tr:hover > td, .table-hover tbody tr:hover > th {
	background-color: #f5f5f5;
}

.btn {
	display: inline-block;
	padding: 4px 12px;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	border: 1px solid #cccccc;
	margin: 10px;
}

	.btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
		color: #333333;
		background-color: #e6e6e6;
		*background-color: #d9d9d9;
	}

	.btn:first-child {
		*margin-left: 0;
	}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] {
	color: #ffffff;
	background-color: #bd362f;
}



body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	line-height: 1.6;
	color: var(--color-black);
	background: var(--color-white);
	padding: 1rem;
	min-height: 100vh;
}
a {
	color: var(--theme-primary-dark);
}

img {
	max-width: 100%;
	width: auto\9;
	height: auto;
	vertical-align: middle;
	border: 0;
	-ms-interpolation-mode: bicubic;
}

.btn-gray {
	margin: 10px;
	max-width: 400px;
	border-radius: 8px;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	transition: all 0.3s ease;
	text-decoration: none;
	background: var(--color-gray-medium);
	color: var(--color-white);
	box-shadow: 0 4px 15px color-mix(in srgb, var(--color-gray-dark) 30%, transparent);
	text-shadow: none;
}

.btn.disabled, .btn[disabled] {
	cursor: default;
	background-image: none;
	opacity: 0.65;
	filter: alpha(opacity=65);
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

/* ヘッダー */
.header {
	background: var(--theme-primary) ;
	color: var(--color-font);
	padding: 0.2rem 1rem;
	border-radius: 12px;
	box-shadow: 0 4px 20px var(--color-shadow);
	width: 100%; /* ← 幅いっぱい使えるように */
	max-width: 1140px; /* ← 最大1140pxに制限 */
	margin: 0 auto 7px auto; /* ← 中央寄せ */
	box-sizing: border-box;
}

.header-content {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	max-width: 1140px;
	margin-left: 0; /* ← 左寄せ */
	margin-right: auto; /* ← 残りは右へ流す */
	box-sizing: border-box;
	padding: 0;
}

.header-controls {
	text-align: end;
}

.logo_div {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.4rem;
	/*    width: 80%;*/
	text-align: left;
	margin-left: 0;
	padding-left: 0;
}

.info_div {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.4rem;
	/*    width: 80%;*/
	text-align: left;
	margin: 10px;
	/*padding-top: 10px;*/
}

.logo-icon {
	width: 30px;
	height: 30px;
	font-size: 0.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	color: var(--theme-primary);
	flex-shrink: 0;
}


.icon {
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	color: var(--theme-primary);
	flex-shrink: 0;
	margin-top: 5px;
	background-color: var(--theme-primary-dark);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	border-radius: 50%;
}
.question-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z'/%3E%3C/svg%3E");
}

.info-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
}

.news-icon {
	/*	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M3 9v6h4l5 5V4l-5 5H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E");
*/
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath fill='%23ffffff' d='M18 4H6c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h2.5l2.5 3 2.5-3H18c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1z'/%3E%3C/svg%3E");
}
.tel-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M15.5 3h-7C7.67 3 7 3.67 7 4.5v15c0 .83.67 1.5 1.5 1.5h7c.83 0 1.5-.67 1.5-1.5v-15c0-.83-.67-1.5-1.5-1.5zm-3.5 17c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zm3-2H8V5h7v13z'/%3E%3C/svg%3E");
}

.krte-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/%3E%3C/svg%3E");
	border-radius: 5px;
}
.exclamation {
	background-image: url("./style/images/exclamation.gif");
}

.logo-text {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--color-font);
	text-align: left;
	margin: 0;
	padding: 0;
}

.title-text {
	font-size: 18px;
	font-weight: 600;
	text-align: left;
	margin: 0;
	padding: 0;
}

.button-icon {
	width: 18px !important;
	height: 18px !important;
	fill: currentColor;
	flex-shrink: 0;
	max-width: 100%;
	max-height: 100%;
}


/* コンテナ */
.container {
	width: 100%;
	max-width: 1140px; /* ← ここを調整 */
	margin: 0 auto;
	/*padding: 0 1rem;*/
	box-sizing: border-box;
}

/* ログインカード */
.login-card {
	margin-top: 0;
	background: var(--color-white);
	border-radius: 16px;
	box-shadow: 0 8px 30px var(--color-shadow);
	margin-bottom: 1rem;
	overflow: hidden;
	border: 2px solid transparent;
	transition: all 0.3s ease;
}

	.login-card:hover {
		border-color: transparent;
		box-shadow: 0 12px 40px var(--color-shadow-hover);
	}

.card-header h2 {
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--color-black);
	display: inline-block;
	width: 60%;
	text-align: center;
}

.card-content {
	padding: 1rem 2rem 1rem 2rem;
}

/* フォーム */
.form-group {
	margin-bottom: 1.5rem;
}

.form-label {
	display: block;
	font-weight: 600;
	color: var(--color-gray-dark);
	margin-bottom: 0.5rem;
	font-size: 0.95rem;
}

.form-input {
	width: 100%;
	padding: 1rem;
	border: 2px solid var(--color-gray-dark);
	border-radius: 8px;
	font-size: 1rem;
	background: var(--color-white);
	transition: all 0.3s ease;
	box-sizing: border-box;
}

	.form-input:focus {
		outline: none;
		border-color: var(--color-gray-dark);
		box-shadow: none;
	}

.password-group {
	position: relative;
}

.checkbox-group {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-top: 1rem;
}

.checkbox-input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.checkbox-custom {
	width: 20px;
	height: 20px;
	border: 2px solid var(--color-gray-medium);
	border-radius: 4px;
	background: var(--color-white);
	flex-shrink: 0;
	position: relative;
	margin-top: 0.1rem;
}

.checkbox-input:checked + .checkbox-custom {
	background: var(--theme-primary);
	border-color: var(--theme-primary);
}

	.checkbox-input:checked + .checkbox-custom::after {
		content: "";
		position: absolute;
		width: 6px;
		height: 10px;
		border: 2px solid var(--color-white);
		border-width: 0 2px 2px 0;
		transform: rotate(45deg);
		top: 2px;
		left: 5px;
	}

.checkbox-label {
	font-size: 0.9rem;
	color: var(--color-gray-dark);
	cursor: pointer;
}

.forgot-password-link {
	margin-left: auto;
	font-size: 0.85rem;
	color: var(--theme-primary);
	text-decoration: none;
}

	.forgot-password-link:hover {
		color: var(--theme-primary-dark);
	}

/* ボタン */
.form-actions2 {
	margin-top: 1rem;
}

	.form-actions2 a:not(:last-child) {
		margin-bottom: 0.75rem;
	}

.login-button,
.entry-button {
	width: 100%;
	padding: 1rem 2rem;
	border-radius: 8px;
	font-size: 1.1rem;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	transition: all 0.3s ease;
	text-decoration: none;
}
.line-button {
	background-color: #00b300;
	color: var(--color-white);
	width: 100%;
	padding: 1rem 2rem;
	border-radius: 8px;
	font-size: 1.1rem;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	transition: all 0.3s ease;
	text-decoration: none;
}

.login-button {
	background: var(--theme-primary-dark);
	color: var(--color-white);
	border: none;
	box-shadow: 0 4px 15px color-mix(in srgb, var(--theme-primary) 30%, transparent);
}

	.login-button:hover {
		background: var(--theme-primary);
		filter: brightness(1.05);
	}

.entry-button {
	background: var(--color-white);
	color: var(--theme-primary);
	border: 2px solid var(--theme-primary-light);
}

	.entry-button:hover {
		background: var(--theme-primary-bg);
		border-color: var(--theme-primary);
	}

/* 情報カード・診療科表示 */
.section {
	background-color: #f8fbff;
	border-radius: 12px;
	box-shadow: 0 4px 12px var(--color-shadow-hover);
	padding: 16px;
	margin-bottom: 16px;
	text-align: center;
}

	.section h2 {
		margin: 0 0 5px;
		font-size: 24px;
		color: var(--theme-primary);
	}

.status {
	display: flex;
	justify-content: space-around;
	font-size: 18px;
	margin-bottom: 10px;
}

	.status div {
		display: flex;
		flex-direction: column;
		align-items: center;
		line-height: 2.1;
	}

.label {
	font-size: 15px;
}

.number {
	font-size: 32px;
	font-weight: bold;
	color: var(--theme-primary-light);
	display: block;
	margin-bottom: 0px;
}

.rsv_status {
	font-size: 25px;
	font-weight: bold;
	color: var(--theme-primary-light);
	display: block;
	margin-bottom: 0px;
}

.details {
	font-size: 18px;
	background-color: var(--theme-primary-bg);
	padding: 8px;
	border-radius: 8px;
	line-height: 1.6;
	color: var(--theme-primary-dark);
}

/* アニメーション */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fade-in {
	animation: fadeInUp 0.6s ease forwards;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
	.header-content {
		flex-direction: row;
		align-items: center;
		padding: 0.5rem 1rem;
	}

	.logo-text, .title-text {
		font-size: 1rem;
	}

	
}

.card-header h2 {
	font-size: 1.1rem;
	width: 100%;
}

.form-label {
	font-size: 0.9rem;
}

.form-input {
	padding: 0.75rem;
	font-size: 0.95rem;
}

.login-button,
.entry-button,
.line-button{
	font-size: 1rem;
	padding: 0.75rem 1.5rem;
	width: auto;
}

.section h2 {
	font-size: 20px;
}

.status {
	flex-direction: row;
	justify-content: space-around;
	gap: 1rem;
}

	.status div {
		flex-direction: column;
		align-items: center;
		width: auto;
	}

.details {
	font-size: 16px;
	padding: 6px;
}

}

@media (max-width: 480px) {
	.logo-text, .title-text {
		font-size: 1rem;
	}

	.card-header h2 {
		font-size: 1rem;
	}

	.login-button,
	.entry-button,
	.line-button {
		font-size: 0.95rem;
		padding: 0.6rem 1rem;
	}

	.form-input {
		font-size: 0.9rem;
	}

	.status .number {
		font-size: 28px;
	}

	.status .label {
		font-size: 16px;
	}

	.help-link {
		font-size: 0.8rem;
	}

	.info-card p,
	.info-new-user p {
		font-size: 0.85rem;
	}

	.section h2 {
		font-size: 18px;
	}
}

.header {
/*	background-color: #1e88e5;*/
	width: 100%;
}

.header-content {
	/*max-width: 960px;*/
	margin: 0 auto;
	padding: 1rem;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--color-font);
}

.header .logo-text {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--color-font);
}

.header .line-text {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--color-white);
}

.alert {
	padding: 8px 35px 8px 14px;
	margin-bottom: 20px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	background-color: #fcf8e3;
	border: 1px solid #fbeed5;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

	.alert .close {
		position: relative;
		top: -2px;
		right: -21px;
		line-height: 20px;
		float: right;
		font-size: 20px;
		font-weight: bold;
		line-height: 20px;
		color: #000000;
		text-shadow: 0 1px 0 var(--color-white);
		opacity: 0.2;
	}

.name {
	color: black;
}

/* ナビバー背景 */
.bg_footer_blue {
	background: var(--theme-primary-bg));
	/*background: -ms-linear-gradient(top,#135deg, #48acdc);
    background: -moz-linear-gradient(top,#135deg, #48acdc);
    background: -webkit-gradient(linear, left top, left bottom, from(#135deg), to(#48acdc));*/
	position: relative;
	behavior: url(./pie/PIE.htc);
	border-radius: 12px;
}

.name {
	color: black;
}


.header-title .clinic-name {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--theme-primary-chara);
	text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.department-header {
	/*background: var(--theme-primary-kamoku);*/
	color: var(--theme-primary-kamoku-chara);
	padding: 10px;
	font-size: 1.2rem;
	font-weight: 700;
	text-align: center;
	/*text-shadow: 0 1px 2px rgba(0,0,0,0.4);*/
	border-radius: 12px 12px 0 0;
}

.department-card {
	background: var(--theme-primary-kamoku);
	border-radius: 12px;
	/* box-shadow: 0 4px 12px var(--color-shadow); */
	margin-bottom: 1.5rem;
	overflow: hidden;
	border: 1px solid var(--theme-primary);
}

.department-label {
	/*background: var(--theme-primary-kamoku);*/
	color: var(--theme-primary-kamoku-chara);
	padding: 10px;
	font-size: 1.35rem;
	font-weight: 700;
	text-align: center;
	/*text-shadow: 0 1px 2px rgba(0,0,0,0.4);*/
	border-radius: 12px;
	/*border: 1px solid var(--theme-primary);*/
}

.department-body {
	padding: 0.5rem;
}

.button-group {
	display: flex;
	gap: 0.75rem;
	margin-top: 0rem;
}

.appointment-button,
.secondary-button {
	flex: 1;
	padding: 10px;
	font-size: 1.1rem;
	font-weight: bold;
	border-radius: 30px;
	text-decoration: none;
	border: 2px solid transparent;
	transition: 0.2s ease;
	text-align: center;
	/*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);*/
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 10px;
}

.appointment-button {
	background: var(--theme-primary-yoya);
	color: var(--theme-primary-yoya-chara);
	border: var(--theme-primary-yoya-border);
}
	.appointment-button::before {
		content: '';
		width: 24px;
		height: 24px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.89-1.99 2L3 19a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2zm0 16H5V8h14v11zM7 10h5v5H7z'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}

	.appointment-button:hover {
		background: var(--theme-primary-yoya-hover);
	}

.secondary-button {
	background: var(--theme-primary-uke);
	color: var(--theme-primary-uke-chara);
	border: var(--theme-primary-uke-border);
}
	.secondary-button::before {
		content: '';
		width: 24px;
		height: 24px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}

	.secondary-button:hover {
		background: var(--theme-primary-uke-hover);
	}

.button-group.single .appointment-button {
	flex: 1 1 100%;
}

.status-message {
	background: var(--color-status);
	border-left: 4px solid var(--theme-primary);
	padding: 1rem;
	margin: 0.5rem 0;
	border-radius: 12px;
	font-size: 0.95rem;
}

.custom-info {
	background: var(--color-gray-light);
	padding: 1rem;
	border-radius: 12px;
	border: 1px solid #e9ecef;
	margin-bottom: 1rem;
}

	.custom-info .info-header {
		font-weight: bold;
		margin-bottom: 0.5rem;
	}

.schedule-info {
	/*background: var(--color-white);*/
	padding: 0rem;
	border-radius: 8px;
	/*border: 1px solid var(--theme-primary);*/
	margin-bottom: 0.5rem;
	width: 100%;
}

.schedule-label {
	padding-left: 0.5rem;
	font-size: 16px;
	margin: 0.5rem;
	text-align: center;
}

.schedule-time {
	font-size: 0.9rem;
	display: flex;
	justify-content: start;
	gap: 0.5rem;
	margin-bottom: 0.3rem;
	padding-left: 0.5rem;
}

.time-value {
	font-weight: 600;
	color: var(--theme-primary);
}

@media (max-width: 1080px) {
	.button-group {
		flex-direction: column;
	}
}

/* --- PCサイズ用スタイル --- */
/*@media (min-width: 769px) {*/
@media (min-width: 1080px) {

	.department-header {
		grid-column: 1;
		grid-row: 1;
		margin: 0;
		width: 100%;
		border-radius: 12px 12px 0 0;
		/*background: var(--theme-primary-kamoku-chara);*/
		color: var(--theme-primary-kamoku-chara);
		font-weight: bold;
		padding: 0.6rem 1rem;
		font-size: 1.2rem;
		text-align: center;
		white-space: nowrap;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 60px; /* 従来の高さ感を維持 */
		white-space: normal;
	}


	.department-card {
		background: var(--color-white);
		border-radius: 12px;
		box-shadow: 0 4px 12px var(--color-shadow);
		margin-bottom: 0.8rem;
		overflow: hidden; /* ← 角丸の継承 */
		width: 100%;
		border: 0px;
	}

	.department-body {
		padding: 1rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
		border-radius: 12px;
	}

	.schedule-info {
		background: var(--theme-primary-kamoku);
		padding: 0rem;
		border-radius: 12px;
		/*border: 1px solid var(--theme-primary);*/
		margin-bottom: 0rem;
		max-width: 23%;
		min-width: 23%;
		border-left: 4px solid var(--theme-primary);
	}

	.schedule-label {
		padding-left: 0.5rem;
		font-size: 0.9rem;
		margin-top: 0.5rem;
	}

	.schedule-time {
		padding-left: 0.5rem; /* ← 各行に左スペース追加 */
	}

	.department-label {
		background: var(--theme-primary-kamoku);
		color: var(--theme-primary-kamoku-chara);
		font-weight: bold;
		padding: 1.2rem 2rem;
		font-size: 1.2rem;
		border-radius: 12px;
		text-align: center;
		white-space: normal;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 90px;
		/* max-width: 250px; 
        min-width: 250px;*/
		max-width: 23%;
		min-width: 23%;
		border-left: 4px solid var(--theme-primary);
	}

	.status-message {
		/*background: #eaf3fb;*/
		border-left: 0px;
		padding: 1rem;
		border-radius: 8px;
		font-size: 0.95rem;
		flex: 1 1 auto;
		margin: 0;
		max-width: 40%;
		min-width: 40%;
	}

	.button-group {
		display: flex;
		flex-direction: center;
		gap: 0.2rem;
		white-space: nowrap;
		align-items: center;
		max-width: 30%;
		min-width: 30%;
	}

		.button-group a {
			padding: 1rem 1.5rem;
			font-size: 17px;
			border-radius: 12px;
			white-space: nowrap;
			width: 160px;
		}

		.button-group.long a {
			padding: 1rem 1.5rem;
			font-size: 14px;
			border-radius: 12px;
			white-space: nowrap;
			width: 160px;
		}

	.appointment-button,
	.secondary-button {
		flex: 1;
		padding: 0.6rem 1rem;
		font-size: 1.1rem;
		font-weight: bold;
		border-radius: 12px;
		text-decoration: none;
		border: 2px solid transparent;
		transition: 0.2s ease;
		text-align: center;
		height: auto;
		/*box-shadow: 0 4px 10px var(--color-shadow);*/
	}

	.appointment-button {
		background: var(--theme-primary-yoya);
		color: var(--theme-primary-yoya-chara);
		border: var(--theme-primary-yoya-border);
	}

		.appointment-button:hover {
			background: var(--theme-primary-yoya-hover);
		}

	.secondary-button {
		background: var(--theme-primary-uke);
		color: var(--theme-primary-uke-chara);
		border: var(--theme-primary-uke-border);
	}

		.secondary-button:hover {
			background: var(--theme-primary-uke-hover);
		}

	.button-group.single .appointment-button {
		flex: 1 1 100%;
	}
}

@media screen and (min-width :1080px) {

	.status-message {
		max-width: 40%;
		min-width: 40%;
	}

	.button-group {
		max-width: 33%;
		min-width: 33%;
	}
}


.appointment-button.disabled, .secondary-button.disabled {
	color: #8f8d8d;
	background-color: #e6e6e6;
	border-color: #d9d9d9;
	cursor: default;
	text-decoration: none;
}

.calendar-section {
	background: white;
	/*border-radius: 12px;*/
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	/*overflow: hidden;*/
	margin-bottom: 20px;
}

@media (min-width: 769px) {
	.calendar-section {
		width: 85%;
	}

	.appointment-button,
	.secondary-button {
		height: 25px;
	}
}

.calendar-header {
	background: var(--theme-primary);
	color: white;
	padding: 20px 25px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.calendar-title, .calendar-month {
	font-size: 24px;
	font-weight: 600;
}

.calendar-nav-btn {
	background: rgba(255,255,255,0.2);
	border: none;
	color: white;
	padding: 10px 18px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 16px;
	transition: background 0.3s ease;
	font-weight: 500;
}

	.calendar-nav-btn:hover {
		background: rgba(255,255,255,0.3);
	}

	.calendar-nav-btn.disabled {
		color: #8f8d8d;
		background-color: #cccccc;
		border-color: #d9d9d9;
		cursor: default;
		text-decoration: none;
	}

.calendar-title, .calendar-month {
	font-size: 18px;
	font-weight: 600;
	background: none;
	border: none;
	color: white;
	padding: 10px 18px;
	border-radius: 6px;
}


.calendar-body {
	padding: 0px;
}

.calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 1px;
	background: #dee2e6;
	border: 1px solid #dee2e6;
	border-radius: 8px;
	/*width: 100%;*/
}

.calendar-day-header {
	background: #e9ecef;
	padding: 20px 8px;
	text-align: center;
	font-weight: 600;
	font-size: 20px;
	color: #333;
}

.calendar-day {
	background: white;
	height: 110px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	transition: background-color 0.2s ease;
}

	.calendar-day:hover {
		background: #f8f9fa;
	}

	.calendar-day.other-month {
		background: #f8f9fa;
		color: #6c757d;
	}

	.calendar-day.sunday .day-number {
		color: #dc3545;
	}

	.calendar-day.saturday .day-number {
		color: #2563eb;
	}

	.calendar-day.closed {
		background: #fdf2f8;
	}

	.calendar-day.weekday-thu {
		background-color: #f1f3f5;
	}
	.calendar-day.weekday-tel {
		background-color: #ccecff;
	}

.day-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.day-number {
	font-size: 22px;
	font-weight: 600;
	color: #333;
}

.available-slot {
	/*width: 26px;
    height: 26px;
    color: #2c5aa0;*/
	/* border-radius: 50%; */
	/*background: white;
    font-weight: bold;
    font-size: 25px;*/
	font-size: 20px;
	color: #2c5aa0;
	font-weight: 600;
	white-space: nowrap;
	background: none;
	padding: 0;
}

.closed-label {
	color: #dc3545;
	border: 1px solid #dc3545;
	font-size: 16px;
	padding: 3px 10px;
	border-radius: 4px;
	font-weight: 600;
	white-space: nowrap;
}




/* --- セルの下線対策（維持） --- */
.calendar-day {
	border-bottom: 1px solid #dee2e6;
}

/* 予約不可（元に戻す） */
.unavailable-label {
	font-size: 16px;
	color: #6c757d;
	font-weight: 500;
	white-space: nowrap;
	height: 26px;
}

/* 予約満員ラベル */
.full-label {
	font-size: 16px;
	background: #ffe0e0;
	color: #c62828;
	padding: 4px 10px;
	border-radius: 4px;
	font-weight: 600;
	white-space: nowrap;
}

/* セル背景色を変更（予約満員） */
.calendar-day.full {
	background-color: #fff4f4;
}

/* ラベル自体は背景を外し、文字だけ残す */
.full-label {
	font-size: 16px;
	color: #c257c2;
	font-weight: 600;
	white-space: nowrap;
	background: none;
	padding: 0;
}

.ex1 {
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.9;
	color: #66CC33;
	border: 1px solid #66CC33;
}

.ex2 {
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.9;
	color: #1190D0;
	border: 1px solid #1190D0;
}

.ex3 {
	/*	color: #333333;
	background: #a9a9a9;*/
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.9;
	color: #333333;
	/*border: 1px solid #dc3545;*/
}

.ex4 {
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.9;
	color: #c257c2;
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
	background: none;
	padding: 0;
}

.ex5 {
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.9;
	color: #f37b4e;
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
	background: none;
	padding: 0;
}

.ex6 {
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.9;
	color: #FFD700;
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
	background: none;
	padding: 0;
}

.ex7 {
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.9;
	color: #dc3545;
	border: 1px solid #dc3545;
}

.ex8 {
	color: #050505;
	background: #ccecff;
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	/*opacity: 0.5;*/
}

/* ===== スマホ対応 ===== */
@media (max-width: 768px) {
	.container {
		padding: 0 15px;
	}

	.header-content {
		padding: 0 15px;
	}

	.clinic-name {
		font-size: 20px;
	}

	.main-content {
		padding: 20px 0;
	}

	.page-title {
		font-size: 22px;
		margin-bottom: 20px;
	}

	.department-info {
		padding: 15px;
		margin-bottom: 15px;
	}

	.department-row {
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 15px;
	}

	.department-label {
		/*font-size: 16px;*/
		min-width: auto;
		margin-bottom: 8px;
	}

	.department-value {
		font-size: 16px;
		margin-left: 0;
	}

	.form-select {
		width: 100%;
		max-width: 280px;
		font-size: 16px;
		padding: 10px 14px;
		margin-left: 0;
	}

	.calendar-section {
		margin-bottom: 15px;
	}

	.calendar-header {
		padding: 15px 20px;
		flex-wrap: wrap;
		gap: 10px;
	}

	.calendar-nav-btn {
		font-size: 14px;
		padding: 8px 16px;
	}

	.calendar-title, .calendar-month {
		font-size: 16px;
		padding: 8px 16px;
	}

	.calendar-body {
		padding: 0px;
	}

	.calendar-day-header {
		font-size: 14px;
		padding: 12px 4px;
	}

	.calendar-day {
		height: 80px;
	}

	.day-content {
		gap: 4px;
		height: 40px;
	}

	.day-number {
		font-size: 16px;
	}

	.available-slot {
		width: 20px;
		height: 20px;
	}

	.closed-label,
	.unavailable-label,
	.full-label {
		font-size: 11px;
		padding: 2px 6px;
	}

	.closed-label {
		padding: 2px 6px;
		border-width: 1px;
	}	
}

/* さらに小さいスマホ対応 */
@media (max-width: 480px) {
	.container {
		padding: 0 10px;
	}

	.header-content {
		padding: 10px;
	}

	.clinic-name {
		font-size: 18px;
	}

	.page-title {
		font-size: 20px;
	}

	.department-info {
		padding: 12px;
	}

	.department-label,
	.department-value {
		/*font-size: 14px;*/
	}

	.form-select {
		font-size: 14px;
		padding: 8px 12px;
	}

	.calendar-header {
		padding: 12px 15px;
	}

	.calendar-nav-btn {
		font-size: 12px;
		padding: 6px 12px;
	}

	.calendar-title, .calendar-month {
		font-size: 14px;
		padding: 6px 12px;
	}

	.calendar-body {
		padding: 0px;
	}

	.calendar-day-header {
		font-size: 12px;
		padding: 8px 2px;
	}

	.calendar-day {
		height: 65px;
	}

	.day-number {
		font-size: 14px;
	}

	.available-slot {
		width: 16px;
		height: 16px;
		border-width: 1px;
		font-size: 15px;
	}

	.closed-label,
	.unavailable-label,
	.full-label, .ex1, .ex2, .ex3, .ex4, .ex5, .ex6, .ex7 {
		font-size: 12px;
		padding: 0px 3px;
	}
	.ex8 {
		font-size: 11px;
		padding: 0px 3px;
	}

	.closed-label {
		padding: 1px 4px;
	}
}

/* カレンダーセクション */
.calendar-section {
	background: white;
	/*border-radius: 12px;*/
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	/*overflow: hidden;*/
	margin-bottom: 20px;
}

.calendar-header {
	background: var(--theme-primary);
	color: var(--color-font);
	padding: 20px 25px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 12px 12px 0 0; /* 上部の角を丸める */
}

/*.calendar-nav-btn {
	background: rgba(255,255,255,0.2);
	border: none;
	color: var(--color-font);
	padding: 10px 18px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 16px;
	transition: background 0.3s ease;
	font-weight: 500;
}

	.calendar-nav-btn:hover {
		background: rgba(255,255,255,0.3);
	}*/

.calendar-month {
	font-size: 18px;
	font-weight: 600;
	border: none;
	color: var(--color-font);
	padding: 10px 18px;
	border-radius: 6px;
	transition: background 0.3s ease;
}

.calendar-title {
	font-size: 18px;
	font-weight: 600;
	background: rgba(255,255,255,0.2);
	border: none;
	color: var(--color-font);
	padding: 10px 18px;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.3s ease;
}

	.calendar-title:hover {
		background: rgba(255,255,255,0.3);
	}

.calendar-body {
	padding: 25px;
}

.week-body {
	padding: 0px;
	/*max-height: 70vh;*/
	/*overflow-y: auto*/
}

.calendar-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 2px;
	margin: 0;
}

	.calendar-table th,
	.calendar-table td {
		padding: 12px 8px;
		text-align: center;
		border-radius: 4px;
		/*width:12.5%;*/
	}

	.calendar-table th {
		background: #e9ecef;
		font-weight: 600;
		color: #333333;
		font-size: 18px;
		position: sticky;
		top: 0;
		z-index: 10;
	}

.date-header {
	font-size: 20px;
	font-weight: 600;
	color: #333333;
	padding: 16px 8px;
	background: #e9ecef;
	position: sticky;
	top: 0;
	z-index: 10;
	width: 12%;
}

	/* 土曜日の文字色を青に */
	.date-header.saturday {
		color: #007bff;
	}

		.date-header.saturday .date-sub {
			color: #007bff;
		}

	/* 休診日の日付を赤文字にするクラス */
	.date-header.closed-date {
		color: #dc3545;
	}

.date-sub {
	font-size: 16px;
	color: #6c757d;
	display: block;
	margin-top: 4px;
}

/* 休診日の日付の曜日部分も赤文字に */
.closed-date .date-sub {
	color: #dc3545;
}

.time-slot {
	font-size: 18px;
	color: #333333;
	font-weight: 600;
	/*background: #e9ecef;*/
	text-align: center;
	padding: 16px 8px;
	width: 16%;
	border: 1px solid #f1f3f4;
}

.slot-cell {
	position: relative;
	padding: 12px;
	background: white;
	border: 1px solid #f1f3f4;
}

.slot-cell2 {
	position: relative;
	padding: 12px;
	background: #ae954f;
	border: 1px solid #f1f3f4;
}

.slot-cell3 {
	position: relative;
	padding: 12px;
	background: #f4f719;
	border: 1px solid #f1f3f4;
}

.slot-available {
	display: inline-block;
	color: #2c5aa0;
	font-size: 30px;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.3s ease;
	user-select: none;
}

	.slot-available:hover {
		color: #1e4a73;
		transform: scale(1.1);
	}

.slot-unavailable {
	width: 26px;
	height: 26px;
	color: #6c757d;
	display: inline-block;
	font-size: 30px;
	line-height: 26px;
	font-weight: 600;
}

.slot-unavailabled {
	background: #f1f3f4;
	position: relative;
}

.slot-closed {
	background: #fdf2f8;
	position: relative;
}

.exbase {
	display: inline-block;
	text-align: center;
	width: 25%;
	margin: 3px;
	font-size: 16px;
	padding: 20px 12px;
	border-radius: 4px;
	position: absolute;
	top: 50%;
	/*left: 50%;*/
	transform: translate(-50%, -55%);
	writing-mode: vertical-rl;
	text-orientation: mixed;
	white-space: nowrap;
	font-weight: 600;
	letter-spacing: 0.3em;
}

.weekend-col {
	background: #fff8f0;
}

.today-col {
	background: #e3f2fd;
}

/* レスポンシブデザイン - 完全スクロールなし */
@media (max-width: 768px) {
	.container {
		padding: 0 8px;
	}

	.clinic-name {
		font-size: 20px;
	}

	.main-content {
		padding: 20px 0;
	}

	.page-title {
		font-size: 22px;
		margin-bottom: 20px;
	}

	.department-info {
		padding: 15px;
		margin-bottom: 15px;
	}

	.department-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		margin-bottom: 16px;
	}

	.department-label {
		/*font-size: 16px;*/
		min-width: auto;
	}

	.department-value {
		font-size: 16px;
		margin-left: 0;
	}

	.form-select {
		width: 100%;
		max-width: 280px;
		font-size: 16px;
		padding: 10px 14px;
		margin-left: 0;
	}

	.calendar-header {
		padding: 12px 8px;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 8px;
	}



	.calendar-title, .calendar-month {
		font-size: 12px;
		font-weight: normal;
		text-align: center;
		padding: 6px 8px;
		flex: 1;
		/*white-space: nowrap;*/
	}

	.calendar-nav-btn {
		padding: 6px 8px;
		font-size: 12px;
		font-weight: normal;
		white-space: nowrap;
		/*min-width: 80px;*/
		flex-shrink: 0;
	}

	.calendar-body {
		padding: 0px;
	}

	/* テーブルを正常表示 - スクロールなし */
	.calendar-table {
		width: 100%;
		border-spacing: 1px;
		display: table;
		table-layout: fixed;
	}

		/* 列幅を明確に指定 */
		.calendar-table th:first-child,
		.calendar-table td:first-child {
			width: 15%;
		}

		.calendar-table th:not(:first-child),
		.calendar-table td:not(:first-child) {
			width: 12.14%; /* (100% - 15%) / 7 = 12.14% */
		}

		.calendar-table th,
		.calendar-table td {
			padding: 3px 1px;
			border: 1px solid #f1f3f4;
			font-size: 10px;
			text-align: center;
			vertical-align: middle;
		}

		.calendar-table th {
			font-size: 11px;
			background: #e9ecef;
			font-weight: 600;
			position: sticky;
			top: 0;
			z-index: 10;
		}

	.date-header {
		font-size: 10px;
		padding: 4px 1px;
		line-height: 1.2;
		background: #e9ecef;
		font-weight: 600;
		position: sticky;
		top: 0;
		z-index: 10;
	}

	.date-sub {
		font-size: 12px;
		margin-top: 1px;
		display: block;
	}

	.time-slot {
		font-size: 9px;
		padding: 4px 1px;
		line-height: 1.2;
		/*background: #e9ecef;*/
		font-weight: 600;
		word-break: break-all;
	}

	.slot-cell {
		padding: 2px 1px;
		height: 28px;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		/*background: white;*/
	}

	.slot-available {
		color: #2c5aa0;
		font-size: 14px;
		font-weight: bold;
	}

		.slot-available:hover {
			color: #1e4a73;
		}

	.slot-unavailable {
		width: 16px;
		height: 16px;
		font-size: 12px;
		line-height: 16px;
	}

	.closed-label {
		font-size: 12px;
		padding: 0px 3px;
		/*letter-spacing: 0.1em;*/
	}

	.exbase {
		font-size: 13px;
		padding: 3px 3px 0px 3px;
		/*font-weight: normal;*/
		margin-left: 0px;
	}
}

@media (max-width: 480px) {
	.container {
		padding: 0 5px;
	}

	.clinic-name {
		font-size: 18px;
	}

	.page-title {
		font-size: 20px;
	}

	.department-info {
		padding: 12px;
	}

	.department-label,
	.department-value {
		/*font-size: 14px;*/
	}

	.form-select {
		font-size: 14px;
		padding: 8px 12px;
	}

	.calendar-header {
		padding: 12px 8px;
	}

	.calendar-nav-btn {
		font-size: 12px;
		padding: 6px 12px;
	}

	.calendar-title, .calendar-month {
		font-size: 14px;
		padding: 6px 12px;
		font-weight: 500;
	}

	.calendar-body {
		padding: 0px;
	}

	.calendar-table th,
	.calendar-table td {
		padding: 3px 1px;
		font-size: 14px;
	}

	.date-header {
		font-size: 10px;
		padding: 4px 1px;
	}

	.date-sub {
		font-size: 12px;
	}

	.time-slot {
		font-size: 9px;
		padding: 3px 1px;
	}

	.slot-cell {
		padding: 2px 1px;
		height: 28px;
	}

	.slot-available {
		font-size: 20px;
	}

	.slot-unavailable {
		width: 14px;
		height: 14px;
		font-size: 20px;
		line-height: 14px;
	}

	.exbase {
		font-size: 13px;
		padding: 3px 3px 0px 10px;
		/*font-weight: normal;*/
		margin-left: 0px;
	}
}

/* 超小画面対応 */
@media (max-width: 360px) {

	.calendar-body {
		padding: 0px;
	}

	.date-header {
		font-size: 8px;
		padding: 2px 0px;
	}

	.date-sub {
		font-size: 12px;
	}

	.time-slot {
		font-size: 7px;
		padding: 2px 0px;
	}

	.slot-cell {
		height: 22px;
		padding: 0px;
	}

	.slot-available {
		font-size: 10px;
	}

	.slot-unavailable {
		width: 10px;
		height: 10px;
		font-size: 8px;
		line-height: 10px;
	}

	.exbase {
		font-size: 5px;
		padding: 3px 1px;
	}
}


.showtbsp {
	display: none !important;
}

.showpctb {
	display: inline-block !important;
}

.showapp {
	display: none;
}

.showpager {
	display: none;
}

/** ボタン ******************************/
.btn-web {
	margin-top: 10px;
	margin-bottom: 10px;
	max-width: 400px;
	background-color: #fdcd00;
	-pie-background: linear-gradient(top,#fdcd00, #fdcd00);
	background: -ms-linear-gradient(top,#fdcd00, #fdcd00);
	background: -moz-linear-gradient(top,#fdcd00, #fdcd00);
	background: -webkit-gradient(linear, left top, left bottom, from(#fdcd00), to(#fdcd00));
	position: relative;
	behavior: url(./pie/PIE.htc);
}

/*.btn-info {
	margin-top: 10px;
	margin-bottom: 10px;
	max-width: 400px;
	background: var(--theme-primary);
	
	position: relative;
	behavior: url(./pie/PIE.htc);
}

	.btn-info:hover {
		background: var(--theme-primary-dark);
		position: relative;
		behavior: url(./pie/PIE.htc);
	}*/

.btn-info, .btn-success {
	
	/*margin-bottom: 10px;*/
	max-width: 400px;
	border-radius: 8px;
	cursor: pointer;
	/*display: flex;*/
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	transition: all 0.3s ease;
	text-decoration: none;
	background: var(--theme-primary);
	color: var(--color-font);
	/*box-shadow: 0 4px 15px color-mix(in srgb, var(--theme-primary) 30%, transparent);*/
	text-shadow: none;
}

	.btn-info:hover, .btn-success:hover {
		color: var(--color-font);
		background: var(--theme-primary-dark);
		filter: brightness(1.05);
		transition: all 0.3s ease;
	}

/*.btn-success {
	margin-top: 10px;
	margin-bottom: 10px;
	max-width: 400px;
	background: var(--theme-primary);
}

	.btn-success:hover {
		background: var(--theme-primary-dark);
		position: relative;
		behavior: url(./pie/PIE.htc);
	}*/



.radio1,
.checkbox1 {
	min-height: 20px;
}

	.radio input[type="radio"],
	.checkbox input[type="checkbox"],
	.radio1 input[type="radio"],
	.checkbox1 input[type="checkbox"] {
		float: left;
		margin-left: 0;
		/*-webkit-transform: scale(1.5);*/
		/*transform: scale(1.5);*/
		margin-right: 0.5em;
		margin-bottom: 0.5em;
		/*position:relative;*/
		top: -3px;
		padding-left: 0px;
	}

	.radio1.inline,
	.checkbox1.inline {
		display: inline-block;
		padding-top: 5px;
		margin-bottom: 0;
		vertical-align: middle;
	}

		.radio1.inline + .radio.inline,
		.checkbox1.inline + .checkbox.inline {
			margin-left: 10px;
		}

/** 地域検索 ******************************/

/* ナビバー背景 */
.bg_row_gray {
	-pie-background: linear-gradient(top,#9C9C9C, #666666);
	background: -ms-linear-gradient(top,#9C9C9C, #666666);
	background: -moz-linear-gradient(top,#9C9C9C, #666666);
	background: -webkit-gradient(linear, left top, left bottom, from(#9C9C9C), to(#666666));
	position: relative;
	behavior: url(./pie/PIE.htc);
}

.bg_row_blue {
	background: var(--theme-primary);
	position: relative;
	behavior: url(./pie/PIE.htc);
}

.bg_row_whitesmoke {
	background: #F5F5F5;
}

.fc-gray {
	color: #585858;
}

.prefecture-clinic-count {
	border: 1px solid #383B35;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	background: #383B35;
	font-size: 1.2em;
	position: relative;
	behavior: url(./pie/PIE.htc);
}

.clinic-count {
	border: 1px solid #585858;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	font: 17px;
	position: relative;
	behavior: url(./pie/PIE.htc);
}

.initlogo {
	margin-right: 10px;
	width: 20%;
	min-width: 100px;
}

.inittitle {
	font-size: 0.9em;
	margin-left: 10px;
	display: inline-block;
	border-left: 1px solid #999;
	vertical-align: middle;
}

.initmsg {
	border-top: 2px solid #999;
}

a.btninit {
	cursor: pointer;
	display: block;
	text-decoration: none;
	font-size: 0.8em;
	font-weight: bold;
	font-weight: normal;
	text-align: center;
	color: var(--color-font);
	border: 1px solid #f5f5f5;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	vertical-align: bottom;
	padding-top: 10px;
	padding-bottom: 10px;
	width: 100%;
	position: relative;
	behavior: url(./pie/PIE.htc);
}



/** ヘッダ ******************************/
.header {
	padding-bottom: 5px;
}

	.header > .container-fluid .row-fluid {
		margin-top: 5px;
	}

.bg_brue {
	background: #008CCE;
}

.bg_line {
	background: #00b300;
	font-family: SF Pro Text,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
	color: var(--color-white);
	font-size: 12px;
}

a.btnline {
	background: #00b300;
	position: relative;
	behavior: url(./pie/PIE.htc);
}

a.btnline-down {
	-pie-background: linear-gradient(top,#91cdd7, #78c2e5);
	background: -ms-linear-gradient(top,#91cdd7, #78c2e5);
	background: -moz-linear-gradient(top,#91cdd7, #78c2e5);
	background: -webkit-gradient(linear, left top, left bottom, from(#91cdd7), to(#78c2e5));
	position: relative;
	behavior: url(./pie/PIE.htc);
}

.header h1 {
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 2.3em;
	width: auto;
}

.unamefield {
	background: #ffFFff;
	border: 1px solid #999;
	padding: 10px;
	margin-bottom: 10px;
	text-align: left;
}

.logo {
	max-width: 50px;
	max-height: 50px;
	padding-right: 5px;
}

.lgimg {
	margin-right: 20px;
}

.uname {
	font-size: 1.5em;
}

.tel {
	font-size: 1.5em;
}


/** ナビバー ******************************/
.nv {
	font-weight: bold;
	margin-left: 10px;
	margin-right: 10px;
}

/* ナビゲーションのスタイル */
.navbar-inner {
	border: 0px;
	border-radius: 12px;
}

/* ナビバー背景 */
.bg_footer_blue {
	background: var(--theme-primary-bg);
	position: relative;
	behavior: url(./pie/PIE.htc);
}



/** フッタ ******************************/
.footer {
	display: block;
	width: 100%;
	height: 15%;
	text-align: center;
	padding-top: 2%;
}

	.footer p {
		font-size: 0.8em;
		position: fixed !important;
		position: absolute;
		bottom: 0px;
		left: 0px;
		margin-bottom: 0px;
		width: 100%;
		-pie-background: linear-gradient(top,#F5F5F5, #DCDCDC);
		background: -ms-linear-gradient(top,#F5F5F5, #DCDCDC);
		background: -moz-linear-gradient(top,#F5F5F5, #DCDCDC);
		background: -webkit-gradient(linear, left top, left bottom, from(#F5F5F5), to(#DCDCDC));
		border-top: 1px solid #e5e5e5;
		position: relative;
		behavior: url(./pie/PIE.htc);
	}



/** カレンダー ******************************/

/*IE6～8以外に適用*/
:root * > .ui-icon {
	position: relative;
	width: 16px;
	height: 16px;
	zoom: 1.6;
	-moz-transform: scale(1.6,1.6);
}

.doctor {
	font-size: 13px;
	color: #337cbd;
	padding-bottom: 5px;
}

.blue {
	font-size: 1.5em;
	color: #337cbd;
	padding-bottom: 5px;
}

.red {
	font-size: 1.5em;
	color: #800000;
	padding-bottom: 5px;
}




/** ユーティリティ ******************************/
.w10 {
	width: 10%;
}

.w15 {
	width: 15%;
}

.w20 {
	width: 20%;
}

.w25 {
	width: 25%;
}

.w30 {
	width: 30%;
}

.w40 {
	width: 40%;
}

.w50 {
	width: 50%;
}

.w60 {
	width: 60%;
}

.w70 {
	width: 70%;
}

.w75 {
	width: 75%;
}

.w80 {
	width: 80%;
}
.w85 {
	width: 85%;
}

.w90 {
	width: 90%;
}

.w100 {
	width: 100%;
}

.wlogin {
	width: 60%;
	max-width: 250px;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

.tl {
	text-align: left;
}

.tr {
	text-align: right;
}

.tc {
	text-align: center;
}

/*vertical*/
.vam {
	vertical-align: middle;
}

.vat {
	vertical-align: top;
}

.vab {
	vertical-align: bottom;
}

/*align*/
.tac {
	text-align: center
}

.tar {
	text-align: right;
	padding-right: 10px;
}

.tal {
	text-align: left
}


/*margin*/
.m0 {
	margin: 0
}

.m5 {
	margin: 5px
}

.m10 {
	margin: 10px
}

.m15 {
	margin: 15px
}

.m20 {
	margin: 20px
}

.m30 {
	margin: 30px
}

.m40 {
	margin: 40px
}

.mt {
	margin-top: 60px
}

.mt0 {
	margin-top: 0
}

.mt3 {
	margin-top: 3px
}

.mt5 {
	margin-top: 5px
}

.mt10 {
	margin-top: 10px
}

.mt15 {
	margin-top: 15px
}

.mt20 {
	margin-top: 20px
}

.mt30 {
	margin-top: 30px
}

.mt40 {
	margin-top: 40px
}

.mt60 {
	margin-top: 60px
}

.mt80 {
	margin-top: 80px
}

.mt100 {
	margin-top: 100px
}

.mr {
	margin-right: 1.6%
}

.mr0 {
	margin-right: 0
}

.mr1 {
	margin-right: 1%
}

.mr2 {
	margin-right: 2%
}

.mr3 {
	margin-right: 3%
}

.mr4 {
	margin-right: 4%
}

.mr5 {
	margin-right: 5%
}

.mr10 {
	margin-right: 10%
}

.mb {
	margin-bottom: 60px
}

.mb0 {
	margin-bottom: 0
}

.mb5 {
	margin-bottom: 5px
}

.mb10 {
	margin-bottom: 10px
}

.mb15 {
	margin-bottom: 15px
}

.mb20 {
	margin-bottom: 20px
}

.mb30 {
	margin-bottom: 30px
}

.mb40 {
	margin-bottom: 40px
}

.ml {
	margin-left: 1.6%
}

.ml0 {
	margin-left: 0
}

.ml1 {
	margin-left: 1%
}

.ml2 {
	margin-left: 2%
}

.ml3 {
	margin-left: 3%
}

.ml4 {
	margin-left: 4%
}

.ml5 {
	margin-left: 5%
}

.ml9 {
	margin-left: 9%
}

.mauto {
	margin: 0px auto;
}

.mlauto {
	margin-left: auto;
}

.h20 {
	height: 35px;
	width: 50%;
	padding-left: 50%;
	padding-bottom: 10px;
	padding-top: 10px;
}

.mrauto {
	margin-right: auto;
}

.titlem {
	margin-left: 9%
}
/* 点滅 */
.blinking {
	-webkit-animation: blink 1.5s ease-in-out infinite alternate;
	-moz-animation: blink 1.5s ease-in-out infinite alternate;
	animation: blink 1.5s ease-in-out infinite alternate;
}

@-webkit-keyframes blink {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-moz-keyframes blink {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes blink {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}
/*padding*/
.p0 {
	padding: 0
}

.p1 {
	padding: 1%
}

.p5 {
	padding: 5%
}

.p10 {
	padding: 10%
}

.p15 {
	padding: 15%
}

.p20 {
	padding: 20%
}

.p30 {
	padding: 30%
}

.pt {
	padding-top: 60px
}

.pt0 {
	padding-top: 0
}

.pt5 {
	padding-top: 5px
}

.pt10 {
	padding-top: 10px
}

.pt15 {
	padding-top: 15px
}

.pt20 {
	padding-top: 20px
}

.pt30 {
	padding-top: 30px
}

.pt40 {
	padding-top: 40px
}

.pr {
	padding-right: 1.6%
}

.pr0 {
	padding-right: 0
}

.pr1 {
	padding-right: 1%
}

.pr2 {
	padding-right: 2%
}

.pr3 {
	padding-right: 3%
}

.pr4 {
	padding-right: 4%
}

.pr5 {
	padding-right: 5%
}

.pb {
	padding-bottom: 60px
}

.pb0 {
	padding-bottom: 0
}

.pb5 {
	padding-bottom: 5px
}

.pb10 {
	padding-bottom: 10px
}

.pb15 {
	padding-bottom: 15px
}

.pb20 {
	padding-bottom: 20px
}

.pb30 {
	padding-bottom: 30px
}

.pb40 {
	padding-bottom: 40px
}

.pl {
	padding-left: 1.6%
}

.pl0 {
	padding-left: 0
}

.pl1 {
	padding-left: 1%
}

.pl2 {
	padding-left: 2%
}

.pl3 {
	padding-left: 3%
}

.pl4 {
	padding-left: 4%
}

.pl5 {
	padding-left: 5%
}

.pl10px {
	padding-left: 10px
}

/* display */
.dispb {
	display: block;
}

.dispi {
	display: inline;
}

.dispib {
	display: inline-block;
}

.dispt {
	display: table;
}

.disptc {
	display: table-cell;
}

.dispn {
	display: none;
}

/* font*/
.fs12 {
	font-size: 1.2em;
}

.fontwhite {
	color: var(--color-white);
}

.fontred {
	color: #ff0000;
}

.bold {
	font-weight: bold;
}

.fs15p {
	font-size: 15px;
}
/* 角丸のスタイル */
.rc20 {
	border-radius: 8px; /* CSS3草案 */
	-webkit-border-radius: 8px; /* Safari,Google Chrome用 */
	-moz-border-radius: 8px; /* Firefox用 */

	position: relative;
	behavior: url(./pie/PIE.htc);
}

.rc25 {
	border-radius: 8px; /* CSS3草案 */
	-webkit-border-radius: 8px; /* Safari,Google Chrome用 */
	-moz-border-radius: 8px; /* Firefox用 */

	position: relative;
	behavior: url(./pie/PIE.htc);
}

/* リストボックス */
#lstSection {
	width: 80%;
	/*max-width: 450px;*/
}

#lstDoctor {
	width: 80%;
	/*max-width: 450px;*/
}

#lstFamily {
	width: 80%;
	/*max-width: 450px;*/
}

label[for=lstSection] {
	display: inline-block;
	/*width: 5em;*/
}

label[for=lstDoctor] {
	display: inline-block;
	/*width: 5em;*/
}

label[for=lstFamily] {
	display: inline-block;
	/*width: 5em;*/
}

/* テーブル */
.table td div {
	text-align: left;
}

.table th, .table td {
	text-align: center;
}

#tblVaccList .timeTableHeader01 {
	vertical-align: middle;
}

#tblVaccList .table th, .table td {
	text-align: center;
	vertical-align: middle;
}

#tblVaccList .tableDetailCenter {
	width: 100px;
}

#tblVaccList .tableDetailTitle {
	font-weight: bold;
	height: 20px;
}

#tblVaccList tbody tr {
	height: 50px;
}

#tblVaccList .checkbox {
	display: inline-block;
	width: 80px;
	padding-left: 0px;
}

	#tblVaccList .checkbox input[type="checkbox"] {
		/*margin-right: 0px;*/
		margin-bottom: 0px;
	}

#tblVaccList .btn-success {
	margin-top: 0px;
	margin-bottom: 0px;
}



#tblVaccList input[type="date"] {
	margin-bottom: 0px;
}
/* テーブル 
.tdc {
  valign : middle;
}

/* メインコンテンツ */
.mainmenu {
	padding-top: 20px;
	padding-left: 5%;
	padding-right: 5%;
	height: 400px;
}

.maincontent {
	width: 45%;
	margin-bottom: 20px;
}

.lbtn {
	height: 30px;
	width: 30px;
	vertical-align: middle;
	float: left;
	text-align: center;
	padding: 10px;
	background: rgb(17,144,208);
	border-radius: 10px;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
	color: #fff;
	line-height: 200%;
	margin-right: 0px;
	background: var(--theme-primary);
	position: relative;
	behavior: url(./pie/PIE.htc);
}

.lbtn-down {
	background: var(--theme-primary-dark);
	position: relative;
	behavior: url(./pie/PIE.htc);
}

.lbtn-disabled {
	height: 30px;
	width: 30px;
	vertical-align: middle;
	float: left;
	text-align: center;
	padding: 10px;
	background: #808080;
	margin-right: 0px;
	border-radius: 10px;
	color: #fff;
	line-height: 200%;
	position: relative;
	behavior: url(./pie/PIE.htc);
}

.contl {
	float: left;
	text-align: left;
}

.contr {
	float: left;
	text-align: left;
	padding-top: 30px;
}

/* ボックス */
.box1 {
	display: block;
	padding: 9.5px;
	margin: 0 auto;
	line-height: 20px;
	word-break: break-all;
	word-wrap: break-word;
	white-space: pre;
	white-space: pre-wrap;
	background-color: #f5f5f5;
	border: 1px solid #ccc;
	border: 1px solid var(--color-shadow-hover);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	position: relative;
	behavior: url(./pie/PIE.htc);
	background: var(--color-white);
	border-radius: 12px;
	box-shadow: 0 4px 12px var(--color-shadow);
	margin-bottom: 1.5rem;
	overflow: hidden;
}

.box2 {
	display: block;
	padding: 30px 20px 30px 30px;
	margin: 0 auto;
	line-height: 20px;
	word-break: break-all;
	word-wrap: break-word;
	white-space: normal;
	background-color: #f5f5f5;
	border: 1px solid #ccc;
	border: 1px solid var(--color-shadow-hover);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	position: relative;
	behavior: url(./pie/PIE.htc);

	background: var(--color-white);
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--color-shadow);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.box3 {
	display: block;
	/*padding: 30px;*/
	margin: 0 auto;
	line-height: 20px;
	word-break: break-all;
	word-wrap: break-word;
	white-space: normal;
	background-color: #f5f5f5;
	/*border: 1px solid #ccc;
	border: 1px solid var(--color-shadow-hover);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;*/
	position: relative;
	behavior: url(./pie/PIE.htc);
	background: var(--color-white);
	/*border-radius: 12px;
	box-shadow: 0 4px 12px var(--color-shadow);
	margin-bottom: 1.5rem;*/
	overflow: hidden;
}

.box4 {
	display: block;
	padding: 9.5px;
	margin: 0 auto;
	line-height: 20px;
	word-break: break-all;
	word-wrap: break-word;
	white-space: pre;
	white-space: pre-wrap;
	background-color: #f5f5f5;
	border: 1px solid #ccc;
	border: 1px solid var(--color-shadow-hover);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	position: relative;
	behavior: url(./pie/PIE.htc);
	height: 450px;
	overflow-y: auto;
	background: var(--color-white);
	border-radius: 12px;
	box-shadow: 0 4px 12px var(--color-shadow);
	margin-bottom: 1.5rem;
}

.box5 {
	display: block;
	padding: 30px 20px 30px 30px;
	margin: 0 auto;
	line-height: 20px;
	word-break: break-all;
	word-wrap: break-word;
	white-space: normal;
	background-color: #f5f5f5;
	border: 1px solid #ccc;
	border: 1px solid var(--color-shadow-hover);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	position: relative;
	behavior: url(./pie/PIE.htc);
	/*background: var(--color-white);*/
	border-radius: 12px;
	box-shadow: 0 4px 12px var(--color-shadow);
	margin-bottom: 1.5rem;
	overflow: hidden;
}

.box6 {
	display: block;
	padding-left: 9.5px;
	margin: 0 auto;
	line-height: 20px;
	word-break: break-all;
	word-wrap: break-word;
	background-color: #f5f5f5;
	border: 1px solid #ccc;
	border: 1px solid var(--color-shadow-hover);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	height: 100px;
	overflow-y: auto;
	position: relative;
	behavior: url(./pie/PIE.htc);
	background: var(--color-white);
	border-radius: 12px;
	box-shadow: 0 4px 12px var(--color-shadow);
	margin-bottom: 1.5rem;
}

.boxw {
	width: 80%;
}

/* 各見出し */
h3 {
	margin-left: 10px;
	font-size: 24.5px;
}




#img_refresh {
	width: 140px;
	float: right;
	padding-right: 0px;
}
/** ログイン ******************************/
/* 入力フォーム */
/*#txtUserID, #txtPassword {
	display: block;
	width: 80%;
	height: 30px;
	font-size: 1.2em;
}*/
/* チェックボックス */
/*#chkAutoLogin {
	display: inline-block;
	float: left;
}*/

.checkAutoLogin > label {
	display: inline-block;
}

.errMsg {
	COLOR: #ff0000;
	DISPLAY: block;
}

.login {
	width: 80%;
	max-width: 600px;
}

.loginicon {
	width: 20px;
	height: 20px;
}

a.btnlogin {
	cursor: pointer;
	display: block;
	float: left;
	text-decoration: none;
	font-size: 1.0em;
	font-weight: bold;
	font-weight: normal;
	text-align: center;
	color: var(--color-white);
	border: 1px solid #f5f5f5;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	vertical-align: bottom;
	padding: 9px;
	width: 40%;
	position: relative;
	behavior: url(./pie/PIE.htc);
}

a.btnlogin80 {
	cursor: pointer;
	display: block;
	float: left;
	text-decoration: none;
	font-size: 1.0em;
	font-weight: bold;
	font-weight: normal;
	text-align: center;
	color: var(--color-white);
	border: 1px solid #f5f5f5;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	vertical-align: bottom;
	padding: 9px;
	width: 80%;
	position: relative;
	behavior: url(./pie/PIE.htc);
}

a.btnTop {
	cursor: pointer;
	display: block;
	float: left;
	text-decoration: none;
	font-size: 1.3em;
	font-weight: bold;
	font-weight: normal;
	text-align: center;
	color: var(--color-white);
	border: 1px solid #f5f5f5;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	vertical-align: bottom;
	padding: 15px;
	width: 100%;
	position: relative;
	behavior: url(./pie/PIE.htc);
}

a.btnblue {
	background: var(--theme-primary);
	position: relative;
	behavior: url(./pie/PIE.htc);
}

a.btnblue-down {
	-pie-background: linear-gradient(top,#91cdd7, #78c2e5);
	background: -ms-linear-gradient(top,#91cdd7, #78c2e5);
	background: -moz-linear-gradient(top,#91cdd7, #78c2e5);
	background: -webkit-gradient(linear, left top, left bottom, from(#91cdd7), to(#78c2e5));
	position: relative;
	behavior: url(./pie/PIE.htc);
}

a.btngray {
	-pie-background: linear-gradient(top,#808080, #696969);
	background: -ms-linear-gradient(top,#808080, #696969);
	background: -moz-linear-gradient(top,#808080, #696969);
	background: -webkit-gradient(linear, left top, left bottom, from(#808080), to(#696969));
	position: relative;
	behavior: url(./pie/PIE.htc);
}

a.btngray-down {
	-pie-background: linear-gradient(top,#DCDCDC, #C0C0C0);
	background: -ms-linear-gradient(top,#DCDCDC, #C0C0C0);
	background: -moz-linear-gradient(top,#DCDCDC, #C0C0C0);
	background: -webkit-gradient(linear, left top, left bottom, from(#DCDCDC), to(#C0C0C0));
	position: relative;
	behavior: url(./pie/PIE.htc);
}



/** パスワード ******************************/
#tblPassword {
	width: 90%;
}


/** 患者情報登録 ******************************/
#pregist1 {
	width: 100%;
}

	#pregist1 th {
		text-align: left;
		vertical-align: middle;
		font-weight: bold;
		width: 20%;
	}

		#pregist1 th label {
			font-weight: bold;
			display: inline-block;
		}

	#pregist1 td {
		text-align: left;
		vertical-align: middle;
		width: 80%;
	}

	#pregist1 tbody td label {
		display: inline-block;
	}

#pregist2 {
	width: 100%;
}

	#pregist2 th {
		text-align: left;
		vertical-align: middle;
		font-weight: bold;
		width: 30%;
	}

		#pregist2 th label {
			font-weight: bold;
		}

	#pregist2 td {
		text-align: left;
		vertical-align: middle;
		width: 70%;
	}

		#pregist2 td label {
			display: inline-block;
		}

#rdoSex td {
	border: none;
	background-color: transparent;
}

#rdoSend td {
	border: none;
}

#rdoBeforeSend td {
	border: none;
}

#panSendlist td {
	border: none;
}

.pconfirm {
	width: 100%;
}

	.pconfirm th {
		text-align: left;
		font-weight: bold;
		width: 30%;
	}

	.pconfirm td {
		text-align: left;
		width: 70%;
	}

.pchange {
	width: 100%;
}

	.pchange th {
		text-align: left;
		font-weight: bold;
		width: 30%;
	}

		.pchange th label {
			font-weight: bold;
		}

	.pchange td {
		text-align: left;
		width: 70%;
	}

	.pchange tbody td label {
		display: inline-block;
	}

	.pchange th label {
		display: inline-block;
	}

#trSex td {
	padding-left: 5px;
	width: 6em;
}

/* お知らせ方法ラジオボタン */
#panSendlist {
	padding-left: 5px;
}

#rdoSend td {
	padding-left: 0px;
	width: 6em;
}

/* ご予約内容お知らせラジオボタン */
#trReserve .radio {
	padding-left: 10px;
}

#trReserve td {
	vertical-align: middle;
}

#rdoReserve02 {
	margin-top: 12px;
}

#rdoReserve03 {
	margin-top: 12px;
}

#pregist2 #trReserve td {
	padding-left: 15px;
}

.pchange #trReserve td {
	padding-left: 15px;
}

/* 順番お知らせラジオボタン */
#rdoBeforeSend td {
	width: 7em;
}

#trBeforeSend .radio {
	padding-left: 0px;
}

#pregist2 #rdoBeforeSend td {
	width: 7em;
}



/** 予約状況 ******************************/
#tblReserveList {
	width: 100%;
}

	#tblReserveList th {
		text-align: center;
		font-weight: bold;
	}

	#tblReserveList td {
		text-align: center;
		vertical-align: middle;
	}

	#tblReserveList .tableDetail00 {
		width: 10%;
	}

	#tblReserveList .tableDetail01 {
		width: 20%;
	}

	#tblReserveList .tableDetail02 {
		width: 30%;
	}

	#tblReserveList .tableDetail03 {
		width: 30%;
		text-align: left;
	}

	#tblReserveList .tableDetail04 {
		width: 10%;
		margin: 0px;
		padding: 0px;
		text-align: center;
	}

	#tblReserveList .tableDetail05 {
		width: 10%;
		margin: 0px;
		padding: 0px;
		text-align: center;
	}

	#tblReserveList .tableDetail06 {
		width: 20%;
		margin: 0px;
		padding: 0px;
		text-align: center;
	}

/* 削除ダイアログ */
#dialogCancel {
	font-size: 0.8em;
	color: var(--color-black);
}

.ui-dialog-title {
	font-size: 0.8em;
	font-weight: bold;
}

.ui-dialog-titlebar-close {
	display: none;
}

.ui-widget button {
	font-size: 0.8em;
}

.ui-dialog-buttonset button {
	width: 110px;
}

#dialogMail {
	font-size: 0.8em;
	color: var(--color-black);
}

.ui-dialog-title {
	font-size: 0.8em;
	font-weight: bold;
}

.ui-dialog-titlebar-close {
	display: none;
}

.ui-widget button {
	font-size: 0.8em;
}

.ui-dialog-buttonset button {
	width: 110px;
}

#dialogInfo {
	font-size: 0.8em;
	color: var(--color-black);
}

.ui-dialog-title {
	font-size: 0.8em;
	font-weight: bold;
}

.ui-dialog-titlebar-close {
	display: none;
}

.ui-widget button {
	font-size: 0.8em;
}

.ui-dialog-buttonset button {
	width: 110px;
}

#dialogMemo {
	font-size: 0.8em;
	color: var(--color-black);
}

.ui-dialog-title {
	font-size: 0.8em;
	font-weight: bold;
	color: var(--color-black);
}

.ui-dialog-titlebar-close {
	display: none;
}

.ui-widget button {
	font-size: 0.8em;
}

.ui-dialog-buttonset button {
	width: 110px;
}

/** トップ画面 ******************************/

#clinicinfo {
	display: none;
}

/* 科目ごとの待ち状況のスタイル */
h1 {
	margin-top: 0px;
}

.active {
	/*background-color: #dddddd;*/
}

.navbar .nav > li > a {
	color: var(--color-font);
}


.navbar {
	margin-bottom: 5px;
	border-radius: 12px;
}
/* メニュー */
.navbar .nav > li > a {
	text-shadow: none !important;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	position: relative;
	behavior: url(./pie/PIE.htc);
}
/* アクティブメニュー */
	.navbar .nav > .active > a {
		color: #555555;
		background-color: var(--color-gray-light);
	}
	/* インアクティブメニュー */
	.navbar .nav > .disabled > a {
		/*color: var(--color-gray-dark);*/
		cursor: default;
	}
		.navbar .nav > .disabled > a:hover {
			color: var(--color-font);
			cursor: default;
			background-color: var(--theme-primary-bg);
		}


/* マウスオーバー時のメニュー */
	.navbar .nav > li > a:hover {
		color: var(--color-font);
		background-color: var(--theme-primary-dark);
	}

.bg_nezumi {
	background-color: #f5f5f5;
}

.bg_white {
	background-color: #ffFFff;
}

.left_rc25 {
	border-radius: 25px 0px 0px 25px;
	-webkit-border-top-left-radius: 25px;
	-webkit-border-bottom-left-radius: 25px;
	-moz-border-radius-topleft: 25px;
	-moz-border-radius-bottomleft: 25px;
	position: relative;
	behavior: url(./pie/PIE.htc);
}

.right_rc25 {
	border-radius: 0px 25px 25px 0px;
	-webkit-border-top-right-radius: 25px;
	-webkit-border-bottom-right-radius: 25px;
	-moz-border-radius-right: 25px;
	-moz-border-radius-bottomright: 25px;
	position: relative;
	behavior: url(./pie/PIE.htc);
}

/* お知らせのスタイル */

/* ↓↓↓ADD 20161220 H.Takahashi お知らせ改善↓↓↓*/

/*お知らせNewアイコン*/
p.new-icon {
	display: inline-block;
	background: #df002c;
	padding: 1px 3px;
	vertical-align: middle; /* 先行する文字列と上下中央揃え */
	font-size: 0.8em;
	font-weight: bold;
	color: #fff;
	border-radius: 3px; /* アイコンの角を丸める */
}

/*お知らせ重要アイコン*/
p.important-icon {
	display: inline-block;
	background: #0040FF;
	padding: 1px 3px;
	vertical-align: middle; /* 先行する文字列と上下中央揃え */
	font-size: 0.8em;
	font-weight: bold;
	color: #fff;
	border-radius: 3px; /* アイコンの角を丸める */
}

/*お知らせ枠*/
.infoList {
	word-break: break-all;
	word-wrap: break-word;
	margin-left: 45px;
	margin-right: 30px;
	margin-bottom: 10px;
}

/* ↑↑↑ADD 20161220 H.Takahashi お知らせ改善↑↑↑*/

#dgdNews {
	word-break: break-all;
	word-wrap: break-word;
}

.info #lblTitle, #lblDate, #lblDetail {
	font-weight: bold;
}

.info #title, #detail {
	word-break: break-all;
	word-wrap: break-word;
	margin-left: 30px;
	margin-right: 30px;
}

.info ul {
	margin-top: 30px;
	margin-left: 40px;
	margin-bottom: 50px;
	margin-right: 35px;
	color: var(--theme-primary);
}

	.info ul li {
		font-weight: bold;
	}

.info span, ul div {
	color: #585858;
}

.contl {
	width: 60px;
	height: 60px;
}

.message_area {
	background-color: #f5f5f5;
}

.bold_blue {
	color: var(--theme-primary-dark);
	font-weight: bold;
}

.bold {
	font-weight: bold;
}

/** 指定予約確認 ******************************/
#lblDate {
	display: inline-block;
}


/** 予約全般 ******************************/
/* 診療内容 */
#lstContent td {
	width: 100px;
	display: inline-block;
}

#lstContent2 td {
	width: 100px;
	display: inline-block;
}

label[for=lblVaccineCnt] {
	display: inline-block;
	width: 5em;
}





#calendar {
	width: 90%;
}

.showbox {
	width: 100%;
	float: left;
	display: block;
	font-size: 1.2em;
	font-weight: bold;
	text-align: left;
	margin: 0px 0px 5px 20px;
}

.showbox2 {
	font-size: 1.2em;
	font-weight: bold;
	text-align: left;
	margin: 20px 0px 0px 20px;
}

.showbox3 {
	font-size: 1.2em;
	font-weight: bold;
	text-align: left;
	margin: 0px 0px 0px 20px;
}

.showbox4 {
	width: 30%;
	float: left;
	display: block;
	font-size: 1.2em;
	font-weight: bold;
	text-align: left;
	margin: 0px 0px 15px 0px;
}

.showbox5 {
	width: 30%;
	float: left;
	display: block;
	font-size: 1.2em;
	font-weight: bold;
	text-align: left;
	margin: 0px 0px 15px 0px;
}

.showbox6 {
	width: 70%;
	float: left;
	display: block;
	font-size: 1.2em;
	font-weight: bold;
	text-align: left;
	margin: 0px 0px 15px 0px;
}

.container-fluid-label {
	word-break: break-all;
	display: table-cell;
}
/** 画面幅ごとのレイアウト ******************************/


.row-fluid .span8 {
	display: block;
	float: none;
	width: 100%;
	margin-left: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.fixed {
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -ms-sticky;
	position: -o-sticky;
	position: sticky;
	top: 0;
}
/**
 * スマホ用レイアウト
 *
 */
@media screen and (max-width :767px) {
	form {
		margin-bottom: 0px;
	}

	body {
		font-size: 13px;
		padding: 0px;
		/*color: #585858;*/
	}

	.w85 {
		width: 100%;
	}
	/* PC表示用クラス */
	.showpc {
		display: none;
	}
	/* タブレットスマホ表示用クラス */
	.showtbsp {
		display: inline-block !important;
	}
	/* PCタブレット表示用クラス */
	.showpctb {
		display: none;
	}
	/* スマホ表示用クラス */
	.showsp {
		display: block;
	}

	.showpager {
		display: inline-block;
	}

	.showbox {
		width: 100%;
		float: left;
		font-size: 1.2em;
		font-weight: bold;
		text-align: left;
		margin: 0px 0px 5px 0px
	}

	.showbox2 {
		font-size: 1.2em;
		font-weight: bold;
		text-align: left;
		margin: 20px 0px 0px 0px;
	}

	.showbox3 {
		font-size: 1.2em;
		font-weight: bold;
		text-align: left;
		margin: 0px;
	}

	.showbox4 {
		width: 100%;
		float: left;
		font-size: 1.2em;
		font-weight: bold;
		text-align: left;
		margin: 0px 0px 15px 0px
	}

	.box2 {
		padding: 15px 15px 15px 15px;
	}


	.box5 {
		padding: 10px 0px 0px 0px;
	}

	#pnlMenu11 .row {
		margin: 0px;
		padding: 0px;
	}

	[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
		display: block;
		float: none;
		width: 100%;
		margin-left: 0;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding-bottom: 5px;
	}

	.h20 {
		height: 20px;
		width: 100%;
		padding-left: 0%;
		padding-bottom: 20px;
		padding-top: 0px;
	}
	.boxw {
		width: auto;
	}

	.logo {
		max-width: 50px;
	}

	.addr {
		padding-right: 10px;
	}

	.tel {
		padding-right: 10px;
	}

	.titlem {
		margin-left: 1%
	}

	.subjlist_info {
		font-size: 15px;
		padding-top: 10px;
	}
	/* 科目 */

	.hiddapp tar span4 {
		display: none;
	}

	.agreement {
		font-size: 12px;
		height: 200px;
	}
	/* 規約 */

	.navbar .nav > li > a {
		padding: 5px 7px 5px;
	}

	.nv {
		font-weight: bold;
		margin-left: 5px;
		margin-right: 5px;
	}

	.login {
		width: 100%;
	}

	a.btnlogin {
		float: none;
		width: 90%;
		margin-bottom: 5px;
	}

	.unamefield {
		padding: 7px;
	}

	.uname {
		font-size: 1.2em;
	}

	.unamefield {
		padding: 7px;
	}

	.uname {
		font-size: 1.2em;
	}

	/* 患者情報関連 */
	#pregist1 th, #pregist1 td {
		display: block;
		border: none;
		vertical-align: middle;
		width: auto;
	}

	#pregist2 th, #pregist2 td {
		display: block;
		border: none;
		vertical-align: middle;
		width: auto;
	}

	.pconfirm th, .pconfirm td {
		display: block;
		border: none;
		vertical-align: middle;
		width: auto;
	}

	.pchange th, .pchange td {
		display: block;
		border: none;
		vertical-align: middle;
		width: auto;
	}

	#pregist1 th {
		padding-bottom: 1px;
	}

	#pregist2 th {
		padding-bottom: 1px;
	}

	#pregist2 td {
		padding-bottom: 3px;
		padding-top: 3px;
	}

	.pconfirm th {
		padding-bottom: 1px;
	}

	.pchange th {
		padding-bottom: 1px;
	}

	.pchange td {
		padding-bottom: 3px;
		padding-top: 3px;
	}

/*	#pnlReceipt table th, #pnlReceipt table tr, #pnlReceipt table td {
		display: block;
		vertical-align: middle;
		width: 97%;
		border: 0;
		padding: 5px;
	}*/

	.bg_nezumi {
		border-right: 1px solid #808080;
	}

	.btnrsv {
		margin-top: 0px;
		margin-bottom: 0px;
	}

	/* 予約状況 */
	#tblReserveList {
		display: block;
		border-left: none;
		border-right: none;
	}

		#tblReserveList thead {
			display: none;
		}

		#tblReserveList tbody {
			display: block;
			font-size: 25px;
		}

			#tblReserveList tbody tr {
				display: block;
				padding: 5px;
			}

			#tblReserveList tbody td {
				display: block;
				border: none;
				text-align: left;
				padding: 1px;
				padding-left: 20px;
				line-height: 30px;
			}

			#tblReserveList tbody th {
				display: none;
			}

			#tblReserveList tbody td:nth-of-type(1):before {
				content: "■診察日 \A";
				white-space: pre;
				font-size: 15px;
				font-weight: normal;
			}

			#tblReserveList tbody td:nth-of-type(2):before {
				content: "■科目 \A";
				white-space: pre;
				font-size: 15px;
				font-weight: normal;
			}

			#tblReserveList tbody td:nth-of-type(3):before {
				content: "";
				white-space: pre;
				font-size: 15px;
			}

		#tblReserveList .tableDetail00 {
			width: auto;
		}

		#tblReserveList .tableDetail01 {
			width: auto;
			font-weight: bold;
		}

		#tblReserveList .tableDetail02 {
			width: auto;
			font-weight: bold;
		}

		#tblReserveList .tableDetail03 {
			width: auto;
			font-size: 15px;
		}

		#tblReserveList .tableDetail04 {
			width: auto;
		}

		#tblReserveList .tableDetail05 {
			width: auto;
		}

		#tblReserveList .tableDetail06 {
			width: auto;
			/*padding-top: 20px;*/
		}


	#tblFamilyList {
		display: block;
		border-left: none;
		border-right: none;
	}

		#tblFamilyList thead {
			display: none;
		}

		#tblFamilyList tbody {
			display: block;
			font-size: 1.2em;
		}

			#tblFamilyList tbody tr {
				display: block;
				padding: 5px;
			}

			#tblFamilyList tbody td {
				display: block;
				border: none;
				text-align: left;
				padding: 3px;
				/*margin-left: 20px;*/
			}

			#tblFamilyList tbody th {
				display: none;
			}

			#tblFamilyList tbody td:nth-of-type(1):before {
				content: "[診察券番号]　";
				white-space: pre;
			}

			#tblFamilyList tbody td:nth-of-type(2):before {
				content: "[氏名]　　　　";
				white-space: pre;
			}

			#tblFamilyList tbody td:nth-of-type(3):before {
				content: "";
				white-space: pre;
			}

		#tblFamilyList .tableDetail {
			width: auto;
		}

		#tblFamilyList .tableDetailCenter {
			width: auto;
			text-align: center;
		}


	#tblVaccList {
		display: block;
		border-left: none;
		border-right: none;
	}

		#tblVaccList thead {
			display: none;
		}

		#tblVaccList tbody {
			display: block;
			font-size: 1.2em;
		}

			#tblVaccList tbody tr {
				display: block;
				padding: 5px;
				height: auto;
			}

			#tblVaccList tbody td {
				display: block;
				border: none;
				text-align: left;
				padding: 1px;
				margin-left: 20px;
			}

			#tblVaccList tbody th {
				display: none;
			}

			#tblVaccList tbody td:nth-of-type(1):before {
				content: "";
				white-space: pre;
				font-weight: bold;
			}

			#tblVaccList tbody td:nth-of-type(2):before {
				content: "[接種日]　　　";
				white-space: pre;
			}

			#tblVaccList tbody td:nth-of-type(3):before {
				content: "[接種医院]      ";
				white-space: pre;
			}

			#tblVaccList tbody td:nth-of-type(4):before {
				content: "";
				white-space: pre;
			}

		#tblVaccList .tableDetail {
			width: auto;
		}

		#tblVaccList .tableDetailCenter {
			width: auto;
			text-align: center;
		}

		#tblVaccList .tableDetailTitle {
			width: auto;
			font-weight: bold;
			padding-bottom: 10px;
			padding-top: 10px;
		}

		#tblVaccList .checkbox {
			display: inline-block;
			width: 80px;
			/*padding-left:50px;*/
			margin-top: 5px;
		}
	/* 予約時間選択 */
	.timeTableRow01 {
		display: block;
		float: left;
	}

	.timeTableRow02 {
		display: block;
		width: auto;
		position: relative;
		/*overflow-x: auto;*/
		white-space: nowrap;
		font-size: 1.2em;
	}

	.timeTableHeader01 {
		display: none;
		font-size: 150%;
	}

	.timeTableHeader02 {
		display: block;
		font-size: 150%;
	}

	.timeTableDetail {
		display: block;
		font-size: 150%;
	}

	.timeTableEmpty {
		display: none;
	}

	#tblTimeTable tbody th {
		max-height: 30px;
		padding-top: 13px;
		padding-bottom: 13px;
		max-height: 30px
	}

	#tblTimeTable tbody td {
		max-height: 30px
	}

	#tblTimeTable {
		width: 100%
	}

		#tblTimeTable tbody td .btn-success {
			margin-top: 0px;
		}

		#tblTimeTable tbody td .disabled {
			margin-top: 0px;
		}

	/* スマホではhover時にボタン背景色を変更しない */
	.btn-info:hover, .btn-success:hover {
		background: var(--theme-primary);
		position: relative;
		behavior: url(./pie/PIE.htc);
	}

	#img_refresh {
		width: 130px;
		/*float: right;
		padding-top: 0px;*/
	}

	/* リストボックス */
	#lstSection {
		width: 100%;
		height: 55px;
	}

	#lstDoctor {
		width: 100%;
		height: 55px;
	}

	#lstFamily {
		width: 95%;
		height: 55px;
	}

	label[for=lstSection] {
		display: inline-block;
	}

	label[for=lstDoctor] {
		display: inline-block;
	}

	label[for=lstFamily] {
		display: inline-block;
	}

	h1 {
		line-height: 25px;
	}

	#lblClinicName {
		font-size: 0.7em;
	}
	
	#HeaderClinic_lblClinicName {
		font-size: 0.7em;
	}

	/* 科目一覧 */
	.subjlist {
		margin-bottom: 0px;
	}

	/* フッタ */
	.footer p {
		position: relative !important;
	}

	/* ナビバーボタン */
	.navbar .btn-navbar {
		background: var(--theme-primary-yoya);
		position: relative;
		behavior: url(./pie/PIE.htc);
	}

	.btn-navbar-down {
		-pie-background: linear-gradient(top,#91cdd7, #78c2e5);
		background: -ms-linear-gradient(top,#91cdd7, #78c2e5);
		background: -moz-linear-gradient(top,#91cdd7, #78c2e5);
		background: -webkit-gradient(linear, left top, left bottom, from(#91cdd7), to(#78c2e5));
		position: relative;
		behavior: url(./pie/PIE.htc);
	}

	.bg_footer_blue {
		background: var(--theme-primary-bg);
	}

	/* 各見出し */
	h3 {
		margin-left: 10px;
		font-size: 18.5px;
	}

	/* ナビゲーションのスタイル */
	.navbar-inner {
		border: 0px;
		/*		padding-left:5px;
		padding-right:5px;*/
		padding: 5px;
		
	}

	/*お知らせ枠*/
	.infoList {
		word-break: break-all;
		word-wrap: break-word;
		margin-left: 30px;
		margin-right: 30px;
		margin-bottom: 10px;
	}
}
/* max-width 767px */



/**
 * タブレット用レイアウト
 *
 */
@media screen and (min-width :768px) {
	/* PC表示用クラス */
	.showpc {
		display: none;
	}
	/* タブレットスマホ表示用クラス */
	.showtbsp {
		display: inline-block !important;
	}
	/* PCタブレット表示用クラス */
	.showpctb {
		display: block;
	}
	/* スマホ表示用クラス */
	.showsp {
		display: none;
	}

	.showbox {
		width: 100%;
		float: left;
		font-size: 1.2em;
		font-weight: bold;
		text-align: left;
		margin: 0px 0px 5px 0px
	}

	.showbox3 {
		font-size: 1.2em;
		font-weight: bold;
		text-align: left;
		margin: 0px;
	}

	.showbox4 {
		width: 100%;
		float: left;
		font-size: 1.2em;
		font-weight: bold;
		text-align: left;
		margin: 0px 0px 15px 0px
	}

	.navbar .nav > li > a {
		padding: 5px 7px 5px;
	}

	.nv {
		font-weight: bold;
		margin-left: 5px;
		margin-right: 5px;
	}

	/* ナビバーボタン */
	.navbar .btn-navbar {
		background: var(--theme-primary-yoya);
		position: relative;
		behavior: url(./pie/PIE.htc);
	}

	.btn-navbar-down {
		-pie-background: linear-gradient(top,#91cdd7, #78c2e5);
		background: -ms-linear-gradient(top,#91cdd7, #78c2e5);
		background: -moz-linear-gradient(top,#91cdd7, #78c2e5);
		background: -webkit-gradient(linear, left top, left bottom, from(#91cdd7), to(#78c2e5));
		position: relative;
		behavior: url(./pie/PIE.htc);
	}

	.bg_footer_blue {
		background: var(--theme-primary-bg);
	}

}
/* min-width 768px */



/**
 * PC用レイアウト
 *
 */
@media screen and (min-width :981px) {

	/* PC表示用クラス */
	.showpc {
		display: block;
	}
	/* タブレットスマホ表示用クラス */
	.showtbsp {
		display: none !important;
	}
	/* PCタブレット表示用クラス */
	.showpctb {
		display: block;
	}
	/* スマホ表示用クラス */
	.showsp {
		display: none;
	}

	.showbox {
		width: 100%;
		float: left;
		display: block;
		font-size: 1.2em;
		font-weight: bold;
	}

	.showbox3 {
		font-size: 1.2em;
		font-weight: bold;
		text-align: left;
		margin: 0px;
	}

	.showbox4 {
		float: left;
		display: block;
		font-size: 1.2em;
		font-weight: bold;
	}

	.navbar .nav > li > a {
		padding: 10px 15px 10px;
	}
}


.gbc_y {
	background-color: #f4f719;
}

.floating {
	top: 0px;
	position: fixed;
	z-index: 1;
}

.cntn_css {
	width: 100%;
}
.item-category {
	position: relative;
	/*	width: 100%;*/
	cursor: pointer;
	text-indent: 0.01px;
	text-overflow: ellipsis;
	outline: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	font-size: 15px;
	line-height: 20px;
	position: relative;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	background: #ffffff;
	padding: 8px 50px 8px 16px;
	display: block;
	color: #4C4C4C;
	z-index: 2;
	margin: 8px 8px 8px 8px;
}