/*
-----------------------------------------------------------
     レスポンシブ設定
-----------------------------------------------------------
*/

@media screen and (max-width: 1200px) {
	br.none {
		display:none;
	}
	div.reservation-base div.reservation2 {
		width: 50%;
		float: left;
		margin: 3px 0 2px 0;
	}
}
@media screen and (min-width: 1024px) {
	div.text-base {
		color : #665544;
		border: 1px solid #888888;
		border-radius: 10px;
		background-color:#fffffa;
		width: 100%;
		height: 375px; 
	}
	div.shinryou-base {
		color : #665544;
		border: 1px solid #888888;
		border-radius: 10px;
		background-color:#fffffa;
		width: 100%;
		height: 375px; 
	}
	div.reservation-base {
		width: 100%;
		border-radius: 10px;
		overflow: hidden;
		background-color: #22aaee;
		padding: 5px;
	}

	div.reservation-base div.reservation1 {
		width: 50%;
		font-size: 0.9em;
		padding: 8px;
		float: left;
		color: #ffffff;
	}
	div.reservation-base div.reservation2 {
		width: 50%;
		float: left;
		padding-top: 10px;
		background-color:#ffffff;
		border-radius: 10px;
	}

}
@media screen and (max-width: 1023px) {
	div.text-base {
		color : #665544;
		border: 1px solid #888888;
		border-radius: 10px;
		background-color:#fffffa;
		width: 100%;
		height: 375px; 
	}
	div.shinryou-base {
		color : #665544;
		border: 1px solid #888888;
		border-radius: 10px;
		background-color:#fffffa;
		width: 100%;
		height: 375px; 
	}
	div.reservation-base {
		width: 100%;
		background-color: #22aaee;
		border-radius: 10px;
		overflow: hidden;
		padding: 5px;
	}

	div.reservation-base div.reservation1 {
		width: 100%;
		font-size: 0.9em;
		padding: 8px;
		color: #ffffff;
	}
	div.reservation-base div.reservation2 {
		width: 100%;
		padding-top: 10px;
		background-color:#ffffff;
		border-radius: 10px;
	}
}

.responsive-iinchou {
	float: left;
	width: 39%;
}

.responsive-clear {
	float: left;
	width: 2%;
}
.responsive-time {
	float: left;
	width: 59%;
}
div.reservation-banner1 {
	width: 20%;
	text-align:center;
	float: left;
}
div.reservation-banner {
	width: 60%;
	text-align:center;
	float: left;
}

@media screen and (max-width: 991px) {
	div.text-base {
		color : #665544;
		border: 1px solid #888888;
		border-radius: 10px;
		background-color:#fffffa;
		width: 100%;
		height: 425px; 
	}
	div.shinryou-base {
		color : #665544;
		border: 1px solid #888888;
		border-radius: 10px;
		background-color:#fffffa;
		width: 100%;
		height: 425px; 
	}
}
@media screen and (min-width: 721px) {
	table.kyushin {
		font-size: 0.7em;
	}
	div.shisetsu1 {
		width: 31%;
		float: left;
		text-align: center;
		background-color: #fff;
		border: 1px solid #888888;
		margin: 5px;
		padding: 20px 10px 10px 10px;
		border-radius: 10px;
		font-weight: bold;
		font-size: 0.8em;
	}
	div.shisetsu2 {
		width: 32%;
		float: left;
		text-align: center;
		background-color: #fff;
		border: 1px solid #888888;
		margin: 5px;
		padding: 20px 10px 10px 10px;
		border-radius: 10px;
		font-weight: bold;
		font-size: 0.8em;
	}
	br.shisetsubr {
		display: none;
	}
	div.footer1 {
		width: 50%;
		float: left;
		text-align: right;
	}
	div.footer2 {
		width: 50%;
		float: left;
		font-size: 1.2em;
	}

}

/*
-----------------------------------------------------------
     721px以下
-----------------------------------------------------------
*/
@media screen and (max-width: 720px) {
	table.kyushin {
		font-size: 0.7em;
	}
	div.shisetsu1 {
		width: 100%;
		text-align: center;
		background-color: #fff;
		border: 1px solid #888888;
		margin: 5px;
		padding: 20px 10px 10px 10px;
		border-radius: 10px;
		font-weight: bold;
		font-size: 0.8em;
	}
	div.shisetsu2 {
		width: 100%;
		text-align: center;
		background-color: #fff;
		border: 1px solid #888888;
		margin: 5px;
		padding: 20px 10px 10px 10px;
		border-radius: 10px;
		font-weight: bold;
		font-size: 0.8em;
	}
	div.reservation-banner1 {
		width: 0%;
	}
	div.reservation-banner1 img {
		display: none;
	}
	div.reservation-banner {
		width: 100%;
		text-align:center;
		float: left;
	}
	div.reservation-banner img {
		width: 85%;
	}	

	div.footer1 {
		width: 100%;
		text-align: center;
	}
	div.footer2 {
		width: 100%;
		font-size: 1.2em;
		text-align: center;
	}


}
/*
-----------------------------------------------------------
     500px以下
-----------------------------------------------------------
*/
@media screen and (max-width: 500px) {
	div.shinryou-base {
		color : #665544;
		border: 1px solid #888888;
		border-radius: 10px;
		background-color:#fffffa;
		width: 100%;
		height: 520px; 
	}
}

/*
-----------------------------------------------------------
     アクセスページ
-----------------------------------------------------------
*/
div.access-lineA-L {
	width: 43%;
	float: left;
	text-align: right;
}
div.access-lineA-RO {
	width: 50%;
	float: left;
	border-radius: 10px;
}

div.access-line-title {
	width: 100%;
	font-size: 1.2em;
	color: #fff;
	padding: 10px;
	margin-bottom: 5px;
	border-radius: 10px;
}
div.access-line-body {
	width: 100%;
	padding: 10px;
	height: 60%;
	margin-bottom: 5px;
}
div.access-lineB-R {
	width: 43%;
	float: right;
	text-align: left;
}
div.access-lineB-LO {
	width: 50%;
	float: right;
	border-radius: 10px;
}
div.access-logo {
	float: left;
	width:50%;
	text-align:right;
	vertical-align: middle;
}
div.access-address {
	float: left;
	width:45%;
	text-align:left;
	vertical-align: bottom;
}
br.access-br {
	display: none;
}
div.access-pic {
	float: left;
	width:50%;
	padding: 10px;
}

@media screen and (max-width: 688px) {
	div.text-base {
		color : #665544;
		border: 1px solid #888888;
		border-radius: 10px;
		background-color:#fffffa;
		width: 100%;
		height: 390px; 
	}
	.responsive-iinchou {
		width: 100%;
	}
	.responsive-clear {
		clear: both;
		height: 20px;
	}
	.responsive-time {
		width: 100%;
	}
	.responsive-height-auto {
		height: auto;
	}
	.responsive-height {
		height: 100%;
	}

	div.access-none {
		display: none;
	}
	div.access-lineA-L {
		width: 100%;
		text-align:center;
	}
	div.access-lineA-RO {
		width: 100%;
		border-radius: 10px;
	}
    div.access-lineB-R {
		width: 100%;
		text-align: center;
	}
	div.access-lineB-LO {
		width: 100%;
		border-radius: 10px;
	}
	div.access-logo {
		width: 100%;
		text-align:center;
	}
	div.access-address {
		width: 100%;
		text-align:center;
	}
	br.access-br {
		display: inline;
	}
	div.access-pic {
		width:100%;
		text-align: center;
	}

}
div.tantou-schedule {
	border: 1px solid #888888;
	color : #665544;
	border-radius: 10px;
	background-color:#fffffa;
	width: 100%;
	padding: 0px;
}
div.tantou-schedule table {
	border: 1px solid #aaa;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 6px;
	overflow: hidden;
	margin: 0;
}
div.tantou-schedule table thead th,
div.tantou-schedule table tbody th,
div.tantou-schedule table tbody td {
	padding: 4px 10px 4px 10px;
	border-bottom: 1px solid #aaa;
}
div.tantou-schedule table thead th {
	background-color: #ffe0e0;
}
div.tantou-schedule table tbody th {
	background-color: #fff3ee;
}
div.tantou-schedule table thead th + th,
div.tantou-schedule table tbody td {
	border-left: 1px solid #aaa;
	text-align: center;
}
div.tantou-schedule table tbody tr:last-child th,
div.tantou-schedule table tbody tr:last-child td {
	border-bottom: none;
}

table.tantou-table1 {
	display: table;
}
table.tantou-table2 {
	display: none;
}
@media screen and (max-width: 760px) {
	table.tantou-table1 {
		display: none;
	}
	table.tantou-table2 {
		display: table;
	}
}

/*
-----------------------------------------------------------
     共通スタイルシート　パーツ
-----------------------------------------------------------
*/

div.page-base {
	border: 1px solid #888888;
	color : #665544;
	border-radius: 10px;
	background-color:#fffffa;
	width: 100%;
	padding: 0px;
}


div.page-base h2, div.tantou-schedule h2 {
	font-size: 2em;
	font-weight: bold;
	display: block;
	padding: 5px;
	-webkit-margin-after: 1px;
	background-image: url("../images/title-bg2.gif");
	margin: 0px;
}

div.text-base-full {
	color : #665544;
	border: 1px solid #888888;
	border-radius: 10px;
	background-color:#fffffa;
	width: 100%;
}

div.text-base h2,
div.text-base-full h2 {
	font-size: 1em;
	font-weight: bold;
	display: block;
	padding: 5px;
	-webkit-margin-after: 1px;
	background-image: url("../images/title-bg2.gif");
	margin: 0px;
}

div.shinryou-base h2 {
	font-size: 1em;
	font-weight: bold;
	display: block;
	padding: 4px;
	-webkit-margin-after: 1px;
	background-image: url("../images/title-bg2.gif");
	margin: 0px;
	height: 37px;
}


div.text-base div.padding,
div.shinryou-base div.padding,
div.text-base-full div.padding {
	border-top: 1px solid #AAAAAA;
	padding: 10px;
}

div.text-base div.contact,
div.shinryou-base  div.contact {
	background-color: orange;
	padding: 3px;
	color: #FFFFFF;
	font-size: 1em;
	font-weight: bold;
}

div.text-base table ,
div.shinryou-base table {
	border: 1px solid #aaa;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 6px;
	overflow: hidden;
	margin: 0;
}
div.text-base table thead th,
div.text-base table tbody th,
div.text-base table tbody td,
div.shinryou-base table thead th,
div.shinryou-base table tbody th,
div.shinryou-base table tbody td {
	padding: 5px, 10px, 5px, 10px;
	border-bottom: 1px solid #aaa;
}
div.text-base table thead th,
div.shinryou-base table thead th {
	background-color: #ffe0e0;
}
div.text-base table tbody th,
div.shinryou-base table tbody th {
	background-color: #fff3ee;
}
div.text-base table thead th + th,
div.text-base table tbody td + td {
	border-left: 1px solid #aaa;
	text-align: center;
}
div.shinryou-base table thead th + th,
div.shinryou-base table tbody td + td  {
	border-left: 1px solid #aaa;
	text-align: center;
	line-height: 15px;
}

div.text-base table tbody tr:last-child th,
div.text-base table tbody tr:last-child td,
div.shinryou-base table tbody tr:last-child th,
div.shinryou-base table tbody tr:last-child td  {
	border-bottom: none;
}



table.kyushinMonth {
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 6px;
	border: 3px solid #faa;
	overflow: hidden;
	margin: 0;
	font-size: 0.8em;
}
table.kyushinMonth thead th,
table.kyushinMonth tbody th,
table.kyushinMonth tbody td {
	border-bottom: 2px solid #aaa;
}
table.kyushinMonth thead th {
	text-align : center;
	background-color: #ffe0e0;
}
table.kyushinMonth thead th + th,
table.kyushinMonth tbody th + th,
table.kyushinMonth tbody td + td {
	border-left: 1px solid #aaa;
	text-align: center;
}

table.kyushinMonth tbody tr:last-child th,
table.kyushinMonth tbody tr:last-child td {
	border-bottom: none;
}







div.page-base table {
	border: 1px solid #aaa;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 6px;
	overflow: hidden;
	margin: 0;
}
div.page-base table thead th,
div.page-base table tbody th,
div.page-base table tbody td {
	padding: 4px 10px 4px 10px;
	border-bottom: 1px solid #aaa;
}
div.page-base table thead th {
	background-color: #ffe0e0;
}
div.page-base table tbody th {
	background-color: #fff3ee;
}
div.page-base table thead th + th,
div.page-base table tbody td {
	border-left: 1px solid #aaa;
	text-align: center;
}
div.page-base table tbody td:first-child {
	border-left: none;
}

div.page-base table tbody tr:last-child th,
div.page-base table tbody tr:last-child td {
	border-bottom: none;
}

.triangle {
	position: absolute;
	border-bottom: 50px solid #67A6EB;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	height: 0;
	width: 0;
}

.circle {
	display: inline-block;
	width: 50px;
	height: 50px;
	background: #67A6EB;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	-o-border-radius: 50px;
	-ms-border-radius: 50px; 
	border-radius: 50px;
}

.square {
	display: inline-block;
	width: 50px;
	height: 50px;
	background: #67A6EB;
}

div.ggmap {
	position: relative;
	padding-bottom: 45%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.menu-item {
}

div.whatsnew {
	padding: 20px 20px 0 20px;
}

div.whatsnew ul li {
	font-size: 0.8em;
	color : #665544;
	padding: 0;
	margin:0px 5px 0 5px;
}

/*
-----------------------------------------------------------
     モーダルダイアログ
-----------------------------------------------------------
*/

.myModal_popUp,
input[name="myModal_switch"],
#myModal_open + label ~ label {
  display: none;
}
#myModal_open + label,
#myModal_close-button + label {
  cursor: pointer;
}

.myModal_popUp {
  animation: fadeIn 1s ease 0s 1 normal;
  -webkit-animation: fadeIn 1s ease 0s 1 normal;
}
#myModal_open:checked ~ #myModal_close-button + label{
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

#myModal_open:checked + label ~ .myModal_popUp {
  background: #fff;
  display: block;
  width: 90%;
  height: 80%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  z-index: 998;
}

#myModal_open:checked + label ~ .myModal_popUp > .myModal_popUp-content {
  width: calc(100% - 0px);
  height: calc(100% - 20px - 44px );
  padding: 10px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling:touch;
}

#myModal_open:checked + label + #myModal_close-overlay + label {
  background: rgba(0, 0, 0, 0.70);
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  z-index: 997;
}

#myModal_open:checked ~ #myModal_close-button + label {
  display: block;
  background: #fff;
  text-align: center;
  font-size: 25px;
  line-height: 44px;
  width: 90%;
  height: 44px;
  position: fixed;
  bottom: 10%;
  left: 5%;
  z-index: 999;
}
#myModal_open:checked ~ #myModal_close-button + label::before {
  content: '×';
}
#myModal_open:checked ~ #myModal_close-button + label::after {
  content: 'CLOSE';
  margin-left: 5px;
  font-size: 80%;
}
/*
 * ------------------------------------------------------------------------------
 *  768 以上の解像度
 * ------------------------------------------------------------------------------
 * /
@media (min-width: 768px) {
  #myModal_open:checked + label ~ .myModal_popUp {
    width: 600px;
    height: 670px;
  }
  #myModal_open:checked + label ~ .myModal_popUp > .myModal_popUp-content {
    height: calc(100% - 20px);
  }
  #myModal_open:checked ~ #myModal_close-button + label {
    width: 44px;
    height: 44px;
    left: 50%;
    top: 50%;
    margin-left: 240px;
    margin-top: -285px;
    overflow: hidden;
  }
  #myModal_open:checked ~ #myModal_close-button + label::after {
    display: none;
  }
}