/* ============================================================================ */
/* 全体の設定                                                                   */
/* ============================================================================ */
html {
	height:100%;
}

body {
	font-size:16px;
	font-family:arial, sans-serif;
	color:#000000;
	line-height:1.5em;
	min-height:100%;
	margin:0;
	padding:0;
	text-align:center;
}


h1 {
	font-size:180%;
	line-height:1.3em;
	margin:0;
	margin:20px 0 20px 0;
	padding:0;
}

h2 {
	font-size:150%;
	margin:0;
	padding:10px 0 10px 0;
}

h3 {
	font-size:120%;
	margin:0;
	padding:10px 0 10px 0;
}


p {
	margin:20px 0 20px 0;
}

span {
	display:inline-block;
}

strong {
	display:inline-block;
}

img {
	display:block;
	margin:0;
}

a {
	display:inline-block;
}

a:hover {
	color:#000000;
}

ul {
	margin:0;
	padding:0;
}

ul li {
	margin:0;
	padding:0;
}

#wrapper {
	max-width:1100px;
	margin:0 auto 0 auto;
}

.hidden {
	display:none;
}

@media screen and (max-width:650px) {

	h1 {
		font-size:140%;
	}

	h2 {
		font-size:130%;
	}

	h3 {
		font-size:110%;
	}

}



/* ============================================================================ */
/* 一番上                                                                       */
/* ============================================================================ */
#mosttop {
	box-shadow:5px 5px 10px rgba(0,0,0,0.2);
}

#mosttop .box {
	max-width:1600px;
	margin-left:auto;
	padding-left:10px;
}

#mosttop .table {
	display:table;
	width:100%;
	margin:0 auto 0 auto;
}

#mosttop .td {
	display:table-cell;
	vertical-align:middle;
}

#mosttop .td[data-col="ロゴ"] {
	width:270px;
	padding:20px 0 20px 0;
}

#mosttop .td[data-col="電話番号"] {
	text-align:right;
	padding-right:30px;
}

#mosttop .td[data-col="電話番号"] span {
	width:40px;
	vertical-align:middle;
}

#mosttop .td[data-col="電話番号"] a {
	color:#ff7777;
	font-size:180%;
	font-weight:bold;
	text-decoration:none;
	vertical-align:middle;
}

#mosttop .td[data-col="閉じる"] {
	background-color:#ff8888;
	color:#ffffff;
	width:100px;
	text-align:center;
	cursor:pointer;
}

#mosttop .td[data-col="閉じる"] .btn {
	font-size:400%;
	line-height:0.8em;
}

#mosttop .td[data-col="閉じる"] .txt {
	font-size:80%;
	line-height:0.8em;
}

#mosttop img {
	display:block;
	width:100%;
}

@media screen and (max-width:650px) {

	#mosttop .td[data-col="ロゴ"] {
		width:100px;
		padding:10px 0 10px 0;
	}

	#mosttop .td[data-col="電話番号"] {
		font-size:120%;
		width:100px;
		padding-right:5px;
	}

	#mosttop .td[data-col="電話番号"] span {
		width:24px;
	}

	#mosttop .td[data-col="電話番号"] a {
		font-size:100%;
	}

	#mosttop .td[data-col="閉じる"] {
		width:40px;
	}

	#mosttop .td[data-col="閉じる"] .btn {
		font-size:220%;
	}

	#mosttop .td[data-col="閉じる"] .txt {
		font-size:70%;
	}

}



/* ============================================================================ */
/* 一番下                                                                       */
/* ============================================================================ */
#mostbottom {
	margin:40px 0 40px 0;
	padding:15px;
	border-top:solid 1px #aaaaaa;
}

#mostbottom .table {
	display:table;
	margin:0 auto 0 auto;
}

#mostbottom .td {
	display:table-cell;
	vertical-align:top;
	text-align:left;
}

#mostbottom .td[data-col="ロゴ"] {
	width:270px;
}

#mostbottom .td[data-col="ロゴ"] img {
	display:block;
	width:100%;
}

#mostbottom .td[data-col="住所"] {
	padding:0 20px 0 20px;
}

#mostbottom .copyright {
	margin:10px 0 10px 0;
}


@media screen and (max-width:650px) {

	#mostbottom .table {
		display:block;
	}

	#mostbottom .td {
		display:block;
		text-align:center;
	}

	#mostbottom .td[data-col="ロゴ"] {
		width:initial;
	}

	#mostbottom .td[data-col="ロゴ"] img {
		width:200px;
		margin:0 auto 0 auto;
	}

	#mostbottom .td[data-col="住所"] {
		padding:10px 0 10px 0;
	}


	#mostbottom .box {
		display:inline-block;
		text-align:left;
	}

	#mostbottom .copyright {
		font-size:80%;
	}



}



/* ============================================================================ */
/* 入力フォーム                                                                 */
/* ============================================================================ */
.box_form {
	border-top:solid 1px #444444;
	border-left:solid 1px #444444;
}

.box_form .table {
	display:table;
	width:100%;
	text-align:left;
}

.box_form .th {
	display:table-cell;
	background-color:#ddffdd;
	width:300px;
	padding:5px;
	vertical-align:top;
	border-right:solid 1px #444444;
	border-bottom:solid 1px #444444;
}

.box_form .td {
	display:table-cell;
	padding:5px;
	vertical-align:middle;
	border-right:solid 1px #444444;
	border-bottom:solid 1px #444444;
}

.box_form .mark[data-type="任意"] {
	background-color:#ddddff;
	color:#0000ff;
	margin-right:5px;
	padding:3px;
	border:solid 2px #0000ff;
	border-radius:3px;
}

.box_form .mark[data-type="必須"] {
	background-color:#ffdddd;
	color:#ff0000;
	margin-right:5px;
	padding:3px;
	border:solid 2px #ff0000;
	border-radius:3px;
}

.box_form p {
	margin:0;
	padding:8px 0 8px 0;
}


.box_formbottom {
	margin:15px 0 15px 0;
}

.box_formbottom .box_btn  {
	width:50%;
	margin:0 auto 0 auto;
}

.box_formbottom .box_btn .btn_next  {
	font-size:110%;	
	font-weight:bold;
	width:100%;
	margin:10px 0 10px 0;
	padding:10px;
}

.box_formbottom .box_btn .btn_back  {
	width:100%;
	margin:10px 0 10px 0;
	padding:10px;
}


input[type="text"] {
	width:60%;
	padding:5px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}

input[type="checkbox"] {
	width:20px;
	height:20px;
	vertical-align:middle;
}


input[name="yoy_birth_y"] {
	width:80px;
}

select {
	margin:3px;
	padding:5px;
}

textarea {
	width:100%;
	padding:5px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}

.fubimsg {
	background-color:#ffdddd;
	color:#ff0000;
}

.fubimsg .msg {
	padding:5px;
}

div[id="入力不備"] {
	background-color:#ffdddd;
	margin:5px 0 5px 0;
	padding:5px 0 5px 0;
}

div[id="年齢"] {
	display:inline-block;
	padding:10px;

}

.sesiyu_box {

}

.sesiyu_box .midasi {
	padding:5px;
}

.sesiyu_box .ngmsg {

}
.sesiyu_box .ngmsg ul {
	margin:0;
	margin-left:30px;
	padding:5px 0 5px 0;
}

.sesiyu_box .ngmsg li {
	margin:0;
	padding:0;
}



.sesiyu_box .selection {
	padding-bottom:10px;
	text-align:left;
}
.sesiyu_box .selection div {
	display:inline-block;
	width:25%;
	padding:5px 0 5px 0;
}


@media screen and (max-width:1000px) {

	.box_form .table {
		display:block;
	}

	.box_form .th {
		display:block;
		width:initial;
	}

	.box_form .td {
		display:block;
		padding:10px 5px 15px 5px;
	}

	.sesiyu_box .selection div {
		width:50%;
	}

}




/* ============================================================================ */
/* 新規予約　の　予約日選択欄                                                   */
/* ============================================================================ */
.box_selectday {
	margin:0 5px 0 5px;
}

.box_selectday .hanrei {
	background-color:#ffeeee;
	margin:5px 0 5px 0;
	padding:5px 0 5px 0;
	border-top:dotted 1px #444444;
	border-bottom:dotted 1px #444444;
}

.box_selectday .hanrei span {
	padding:0 20px 0 20px;
}

.box_selectday .table_ym {
	display:table;
	width:100%;
	table-layout:fixed;
}

.box_selectday .table_ym .td {
	display:table-cell;
}

.box_selectday .calendar {
	border-top:solid 1px #444444;
	border-left:solid 1px #444444;
}

.box_selectday .calendar .table_week {
	display:table;
	width:100%;
	table-layout:fixed;
	background-color:#eeeeee;
}

.box_selectday .calendar .td_week {
	display:table-cell;
	border-right:solid 1px #444444;
	border-bottom:solid 1px #444444;
}


.box_selectday .calendar .table_day {
	display:table;
	width:100%;
	table-layout:fixed;
}

.box_selectday .calendar .td_day {
	display:table-cell;
	font-size:120%;
	border-right:solid 1px #444444;
	border-bottom:solid 1px #444444;
}

.box_selectday .calendar div[data-week="土"] {
	color:#0000ff;
}

.box_selectday .calendar div[data-week="日"] {
	color:#ff0000;
}

.box_selectday .calendar div[data-holiday="休日"] {
	background-color:#ffeeee;
}

.box_selectday .calendar div[data-yoyaku_okng="ok"] {
	cursor:pointer;
}

.box_selectday .calendar div[data-yoyaku_okng="ok"]:hover {
	background-color:#ffffaa;
	transition:background-color 0.8s;
}

.box_selectday .calendar .moji_day {

}

.box_selectday .calendar  .moji_mark {
	padding:5px 0 10px 0;
}

.box_selectday .calendar  .moji_mark[data-mark="〇"] {
	color:#00aa00;
	font-weight:bold;
}

.box_selectday .calendar  .moji_mark[data-mark="△"] {
	color:#00aa00;
	font-weight:bold;
}


@media screen and (max-width:650px) {

	.box_selectday .hanrei span {
		font-size:90%;
		padding:0 5px 0 5px;
	}

}



/* ============================================================================ */
/* お知らせ                                                                     */
/* ============================================================================ */
.info_box {
	margin:10px 0 10px 0;
	padding:15px;
	text-align:center;
}

.info_box span {
	display:inline-block;
	text-align:left;
}

.info_box[data-info="予約日選択画面：案内欄"] {
	background-color:#ffffcc;
	text-align:left;
}

.info_box[data-info="予約日選択画面：注意欄"] {
	color:#ff0000;
}

.info_box[data-info="予約日選択画面：重要欄"] {
	text-align:center;
}

.info_box[data-info="新規予約―完了画面：上部"] {
	background-color:#ffdddd;
	text-align:left;
	border:solid 1px #444444;
}

.info_box .alignleft {
	width:100%;
	text-align:left;
}

.info_box .aligncenter {
	width:100%;
	text-align:center;
}

.info_box .alignright {
	width:100%;
	text-align:right;
}


.info_table {
	display:table;
	width:100%;
	table-layout:fixed;
}

.info_td {
	display:table-cell;
}

.info_td a[data-link="予約接種スケジュール一覧"] {
	color:#000000;
	text-decoration:none;
	background:linear-gradient(to bottom,#ffffff,#55bbff);
	display:block;
	margin:15px 5px 15px 5px;
	padding:15px 5px 15px 5px;
	border:solid 1px #444444;
	border-radius:5px;
}

.info_td a[data-link="予約接種料金表"] {
	color:#000000;
	text-decoration:none;
	background:linear-gradient(to bottom,#ffffff,#ffccff);
	display:block;
	margin:15px 5px 15px 5px;
	padding:15px 5px 15px 5px;
	border:solid 1px #444444;
	border-radius:5px;
}

@media screen and (max-width:1000px) {
	.info_table {
		display:block;
		width:initial;
	}

	.info_td {
		display:block;
	}


}


/* ============================================================================ */
/* 予約取消　の　予約日選択欄                                                   */
/* ============================================================================ */
.box_selectday_cancel {
	max-width:400px;
}

.box_selectday_cancel .table_ym {
	display:table;
	width:100%;
	table-layout:fixed;
}

.box_selectday_cancel .table_ym .td {
	display:table-cell;
}

.box_selectday_cancel .calendar {
	border-top:solid 1px #444444;
	border-left:solid 1px #444444;
}

.box_selectday_cancel .calendar .table_week {
	display:table;
	width:100%;
	table-layout:fixed;
	background-color:#dddddd;
}

.box_selectday_cancel .calendar .td_week {
	display:table-cell;
	border-right:solid 1px #444444;
	border-bottom:solid 1px #444444;
}


.box_selectday_cancel .calendar .table_day {
	display:table;
	width:100%;
	table-layout:fixed;
}

.box_selectday_cancel .calendar .td_day {
	display:table-cell;
	padding:5px;
	border-right:solid 1px #444444;
	border-bottom:solid 1px #444444;
}

.box_selectday_cancel .calendar div[data-week="土"] {
	color:#0000ff;
}

.box_selectday_cancel .calendar div[data-week="日"] {
	color:#ff0000;
}

.box_selectday_cancel .calendar div[data-holiday="休日"] {
	background-color:#ffeeee;
}
.box_selectday_cancel .calendar .space {
	opacity:0;
}

.box_selectday_cancel .calendar div[data-select_okng="ng"] {
	background-color:#eeeeee;
}

.box_selectday_cancel .calendar div[data-select_okng="ok"] {
	cursor:pointer;
}

.box_selectday_cancel .calendar div[data-select_okng="ok"]:hover {
	background-color:#ffffaa;
	transition:background-color 0.8s;
}



/* ============================================================================ */
/* パネル                                                                       */
/* ============================================================================ */
#PANEL {
	display:table;
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;

}

#PANEL .background {
	background-color:rgba(0,0,0,0.5);
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}

#PANEL .panel {
	display:inline-block;
	background-color:#ffffff;
	padding:10px;
}

#PANEL .panel .btn {
	margin-top:10px;
	padding:10px;
}