/* ----------
@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}
---------- */




.top-img {
	background-image: url(../images/top/top-img.jpg);
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	position: relative;
}


.top-moji {
	background-image: url(../images/top/top-moji.png);
	background-size: 52px;
	background-repeat: no-repeat;
	background-position: top 1rem right 2rem;
	padding-top: 19.1rem;
}





@media (min-width: 576px) {

	.top-moji {
		background-size: 56px;
		background-repeat: no-repeat;
		background-position: top 1.6rem right 3.4rem;
		padding-top: 25rem;
	}

}




@media (min-width: 768px) {

	.top-moji {
		background-size: 66px;
		background-repeat: no-repeat;
		background-position: top 3.1rem right 8.2rem;
		padding-top: 30rem;
	}

}




@media (min-width: 992px) {

	.top-moji {
		background-size: 84px;
		background-repeat: no-repeat;
		background-position: top 2.1rem right 9.2rem;
		padding-top: 38rem;
	}

}




@media (min-width: 1200px) {

	.top-moji {
		background-size: 84px;
		background-repeat: no-repeat;
		background-position: top 2.1rem right 12.2rem;
		padding-top: 37rem;
	}

}







#top-main {
position: relative;
}


#top-main::after {
	content: '';
	width: 100%;
	height: 14rem;
	background-image: url(../images/top/hana-01.png),url(../images/top/hana-02.png);
	background-repeat: no-repeat;
	background-size: auto 119px;
	background-position: left -50px bottom, right -50px bottom;
	position: absolute;
	bottom: -1.5rem;
	left: 0;
	right: 0;
}




@media (min-width: 576px) {

	#top-main::after {
		background-position: right calc(50% + 250px) bottom, left calc(50% + 250px) bottom;
		background-size: auto 200px;
	}

}




@media (min-width: 768px) {

	#top-main::after {
		height: 15.9rem;
		background-position: right calc(50% + 331px) bottom, left calc(50% + 320px) bottom;
		background-size: auto 257px;
	}

}




@media (min-width: 992px) {

	#top-main::after {
		height: 25rem;
		background-position: right calc(50% + 430px) bottom, left calc(50% + 430px) bottom;
		background-size: auto 331px;
	}

}


@media (min-width: 1200px) {

	#top-main::after {
		height: 25rem;
		background-position: right calc(50% + 530px) bottom, left calc(50% + 530px) bottom;
		background-size: auto 375px;
	}

}




/*=======================================
      最高のひと時のフレックス、文字色
============================================ */


.hitotoki-li {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
}


@media (min-width: 768px) {

	.hitotoki-li {
		width: 53%;
	}

}


.hitotoki-li li {
	list-style: none;
}

.hitotoki-li img {
	width: 87%;
}






/*=======================================
      メニューのボタン
============================================ */


.top-menu-list {
	list-style-type: none;
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
}

.top-menu-list li {
	width: 90%;
	margin-bottom: 1rem;
	font-size: .9375rem;
	position: relative;
}

@media (min-width: 576px) {

	.top-menu-list li {
		width: 41%;
		margin-left: auto;
		margin-right: auto;
	}

}


@media (min-width: 768px) {

	.top-menu-list li {
		width: 41%;
		margin-left: auto;
		margin-right: auto;
	}

}


@media (min-width: 992px) {

	.top-menu-list li {
		width: 25%;
		font-size: 0.78rem;
		margin: 0 1rem;
	}

}


@media (min-width: 1200px) {

	.top-menu-list li {
		width: 27%;
		font-size: .9375rem;
	}

}




/*---写真------------------------------ */



.top-menu-list li.about a {
	background-image: url(../images/top/02-01.png);
}
.top-menu-list li.menu a {
	background-image: url(../images/top/02-02.jpg);
}
.top-menu-list li.staff a {
	background-image: url(../images/top/02-03.jpg);
}
.top-menu-list li.owner a {
	background-image: url(../images/top/02-06.jpg);
}
.top-menu-list li.blog a {
	background-image: url(../images/top/02-04.jpg);
}
.top-menu-list li.inquiry a {
	background-image: url(../images/top/02-05.jpg);
}






.top-menu-list a {
	display: block;
	padding: 3rem;
	color: #fff;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center center;
	position: relative;
	margin-bottom: 1rem;
}


/* iphone5 */
@media (max-width: 350px) {
	.top-menu-list a {
		padding:2.5rem;
	}
}

@media (min-width: 576px) {
	.top-menu-list a {
		padding:1.8rem;
	}
}


@media (orientation: landscape) and (max-width: 591px){ /*端末が横向き、画面の横幅が 767px 以下の場合の記述*/

	.top-menu-list a {
		padding 1.8rem;
	}

}



@media (min-width: 768px) {
	.top-menu-list a {
		padding: 3.7rem;
	}
}
@media (min-width: 992px) {
	.top-menu-list a {
		padding: 2.2rem;
	}
}
@media (min-width: 1200px) {
	.top-menu-list a {
		padding: 3.8rem;
	}
}




.top-menu-list li a::before {
	content: '';
	border: 1.7px solid #fff;
	position: absolute;
	top: 0.5rem;
	bottom: 0.5rem;
	left: 0.4rem;
	right: 0.4rem;
	z-index: 10;
}

@media (min-width: 768px) {
	.top-menu-list li a::before {
		border: 1.7px solid #fff;
		top: 0.4rem;
		bottom: 0.4rem;
		left: 0.4rem;
		right: 0.4rem;
	}
}


.top-menu-list a::after {
	content: '';
	width: 100%;
	height: 100%;
	background-color: rgba(130, 154, 158,.2);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}


.top-menu-list span {
	background-repeat: no-repeat;
	background-size: auto 82px;
	background-position: top 1rem center;
	padding-top: 7.05rem;
	display: block;
	position: relative;
	z-index: 3;
}







/*---写真の中にある画像------------------------------ */


.top-menu-list li.about span {
	background-image: url(../images/top/02-01-1.png);
}
.top-menu-list li.menu span {
	background-image: url(../images/top/02-02-2.png);
}
.top-menu-list li.staff span {
	background-image: url(../images/top/02-03-3.png);
}
.top-menu-list li.owner span {
	background-image: url(../images/top/02-06-6.png);
}
.top-menu-list li.blog span  {
	background-image: url(../images/top/02-04-4.png);
}
.top-menu-list li.inquiry span {
	background-image: url(../images/top/02-05-5.png);
}


.top-menu-list a:hover {
	background-size: 110% auto;
	text-decoration: none;
}
.top-menu-list a:hover::after {
	background-color: rgba(255,255,255,0);
}




.top-menu-list h4 {
	font-size: 1.0625rem;
	color: var(--primary);
}










.bg-bl {
	background-color: #f2efe8;
	padding: 1rem 0 1.5rem 0;
}





@media (min-width: 768px) {
	.bg-bl {
	width: 730px;
	margin-left: auto;
	margin-right: auto;
	padding: 1rem 0 2rem 0;
	}
}



@media (min-width: 992px) {
	.bg-bl {
	width: 960px;
	}
}



@media (min-width: 1200px) {
	.bg-bl {
	width: 1140px;
	}
}




















/*=======================================
      インスタのフレックス
============================================ */


.inst-fx-2 {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0 0.9375rem;
}

.inst-fx-2 p {
	margin: 0.2rem 0.2rem;
	width: 31.4%;
}




@media (min-width: 768px) {
.inst-fx-2 {
	flex-wrap: nowrap;
	margin: 0 3rem;
}

	.inst-fx-2 p {
		width: 20%;
		margin: 0 0.5rem;
	}
}



@media (min-width: 768px) {
.inst-fx-2 {
	flex-wrap: nowrap;
	margin: 0 0.175rem;
}

	.inst-fx-2 p {
		width: 20%;
	}
}


@media (min-width: 1200px) {
.inst-fx-2 {
	flex-wrap: nowrap;
}

	.inst-fx-2 p {
		width: 20%;
	}
}




/* iphone5 */
@media (max-width: 350px) {

	.inst-fx-2 p {
	width: 27.4%;
	}

}


/*---花のバックグラウンド------------------------------ */


.hana-bg {
	background-image: url(../images/top/hana-bg.jpg);
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100% auto;
	padding-bottom: 2rem;
}


@media (min-width: 768px) {
	.hana-bg {
		width: 730px;
		margin-left: auto;
		margin-right: auto;
		padding-bottom: 3rem;
	}
}



@media (min-width: 992px) {
	.hana-bg {
		width: 960px;
		padding-bottom: 4rem;
	}
}



@media (min-width: 1200px) {
	.hana-bg {
		width: 1140px;
	}
}






/*--- グーグルカレンダー ----------------------------- */


.calendar-inner iframe {
	width: 100%;
	height: 400px;
}


@media (min-width: 768px) {

	.calendar-inner {
		text-align: center;
	}

	.calendar-inner iframe {
		width: 87.7%;
		height: 550px;
	}

}