@charset "utf-8";
/* CSS Document */

/* サイドバーレイアウト */

main {
	position: fixed;
    width: 7%;
    height: 100%;
    top: 0;
    left: 0;
	background-color: #FFFFFF;
	background-image: url("../image/top-back.jpg");
	background-size: cover;
    box-shadow: 0px 0px 4px 0px #666;
	z-index: 100;
}
main img {
	width: 50px;
	margin-left: 5px;
	margin-top: 20px;
}

/*サイドバースマホ版*/
@media(max-width: 640px){
	main, .sidebar {
		display: none;
	}
}

/*全体ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ*/

.access{
	display: block;
	position: relative;
	width: 93%;
	left: 7%;
	overflow: hidden;
}
/*スマホ版*/
@media(max-width: 640px){
	.access{
		width: 100%;
		left: 0%;
	}
}


/*ヘッダーｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ*/
.header {
    background-image: url("../image/top-obi.jpg");
    background-size: cover;         /* 拡大して領域を埋める */
    background-position: center;    /* 中央基準で表示 */
    height: 5rem;
    position: relative;
}

.header img{
	object-fit: cover;
	object-position: center;
}

.header h1{
	position: absolute;
	margin-left: 2rem;
	margin-top: 1rem;
	font-size: 1.7rem;
	color: white;                 /* privacy.css と同じ */
	font-family: "Noto Serif JP", serif;
}

.header h2{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	
	overflow: hidden;
}

/*スマホ版*/
@media(max-width: 640px){
	.header{
		height: 10vh;
	}
	
	.header h1{
		top: 20%;
		font-size: 6vw;
	}
}

/*マップｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ*/
.map {
	position: relative;
	width: 100%;
	padding-top: 55%; /* 高さ比率を保つ */
	margin-bottom: 2vh;
}

.map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.map_bottom{
	display: flex;
}

.address{
	position: relative;
	width: 40%;
	height: 20vh;
	left: 8%;
	font-size: 1.2vw;
}

.address h2{
	margin: 0 0 1vh 0;
	font-size: 1.5vw;
}

/*スマホ版*/
@media(max-width: 640px){

	.map {
		width: 100%;
		left: 0%;
	}
	.map_bottom{
		display: block;
	}
	.address{
		width: 100%;
		left: 6%;
		font-size: 3vw;
	}

	.address h2{
		margin:0;
		font-size: 3.5vw;
	}
}

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

h2.calendartitle{
	position: relative;
	left: 10%;
	font-size: 1.5vw;
}

.calendar_month{
	display: flex;
	position: relative;
	width: 50%;
	left: 10%;
	gap: 23.7vw;
	font-size: 1.4vw;
}

.calendar-wrap {
	display: flex;
	position: relative;
	width: 25%;
	left: 10%;
	gap: 10px;
}

@media (max-width : 30vw ){
  .calendar-wrap {
    flex-direction: column;
  }

h2.calendartitle{
	position: relative;
	left: 10%;
	margin-top: 6rem;
	font-size: 1.5vw;
}

}

.calendar {
	position: relative;
	width: 100%;
	border-collapse: collapse;
}
.calendar th,
.calendar td {
	border: 0.5px solid #000;
	text-align: center;
	padding: 1%;
	font-size: 0.9vw;
}
.calendar th {
	padding: 0.8vh 0.8vw;
}
.calendar td {}
	

@media (max-width : 20vw ){
  .calendar th,
  .calendar td {
	padding: 1%;
	font-size: 1vw;
  }
  .calendar th {
	padding: 1vh 1vw;
  }
}

.calendar .sun {
	color: #e17f7e;
	background-color: #f8e4e2;
}
.calendar .sat {
	color: #7ab6f3;
	background-color: #e7f6fd;
}
.calendar .mute {
	color: #aaa;
}
.calendar .today {
	background-color: yellow;
}
.calendar .off {
	background-color: #fadcdb;
}


/*スマホ版*/
@media(max-width: 640px){
	
	.calendar {
		position: relative;
		margin: 3rem 0 0 0;
	}
	
	h2.calendartitle{
		top: -2rem;
		left: 5%;
		font-size: 1rem;
	}

	.calendar_month{
		left: 5%;
		top: -2rem;
		width: 100%;
		gap: 42vw;
		font-size: 2.5vw;
	}
	.calendar-wrap {
		top: -5rem;
		left: 5%;
	}

	.calendar th,
	.calendar td {
		font-size: 2.1vw;
	}
}

/*駐車場*/
.parking{
	display: flex;
	position: relative;
	width: 100%;
	height: 60vh;
}

.header img{
	object-fit: cover;
}


.parking h3{
	position: relative;
	width: 33%;
	top: 10%;
	left: 5%;
}

.parking h2{
	position: relative;
	top: 10%;
	left: 10%;
	font-size: 1.8vw
}

.parking p{
	position: relative;
	width: 38%;
	top: 20%;
	right: 5%;
	font-size: 1.5vw
}

/*スマホ版*/
@media(max-width: 640px){
	.parking{
		display: block;
		height: 25vh;
		margin-bottom: 8rem;
	}
	
	.parking h3{
		width: 90%;
		top: -1rem;
	}

	.parking h2{
		top: -1rem;
		left: 6%;
		font-size: 1rem;
	}

	.parking p{
		position: relative;
		width: 100%;
		top: -1rem;
		left: 6%;
		font-size: .8rem;
	}
}