/*--------------------------
つるいむら湿原温泉ホテル
tsurui-onsen.com
2022-11-02
----------------------------*/
/*
body	{ color: #eee; background-color: #4d416c; }
body	{ color: #eee; background-color: #594c7c; }
section:nth-child(odd)	{ background-color: transparent; }
section:nth-child(even)	{ background-color: #63548b; }
section:nth-child(even)	{ background-color: #774c94; }
*/
section:nth-child(odd)	{ background-image: url(bg1409028_1280.png); background-attachment: fixed; }
section:nth-child(odd)	{ background-image: url(bg01.png); background-attachment: fixed; }

.grid h3	{ text-align: center; }
/*.grid h3	{ font-weight: normal; font-family: 游明朝, YuMincho, serif; }*/

.more a { font-size: 1rem; color: #0f3190; background-color: transparent; border: thin solid #0f3190; border-radius: 3em; transition: .2s; }
.more a:hover { background-color: transparent; text-decoration: none; transform: scale(1.1); }


.sectitle	{ display: block; min-height: 0; border: none; background: none; }
.sectitle	{ text-align: center; }
.sectitle	{ padding-bottom: 1rem; border-bottom: 5px solid #6a8; }
.sectitle:before	{ display: block; margin: auto; height: auto; background: none; font-family: forkawesome; font-size: 1.5em; }


/*-----------------------------
Visual
-----------------------------*/
.top-container	{ height: 100%; background-color: #0139; }
.top-container	{ display: flex; justify-content: center; align-items: center; text-align: center; }
.top-logo	{ display: flex; flex-flow: column; justify-content: space-between; align-items: center; }
.top-logo {
	margin: auto;
	padding: 0;
	height: 100%;
}
.top-logo h1,
.top-logo h2	{ text-indent: -9999px; }
/*
.top-logo h2	{
	width: 40vw; max-width: 200px;
	aspect-ratio: 1/1;
	background: url(marklogo_w.svg) no-repeat 50% 50% / contain;
	filter: drop-shadow(0px 0px 5px #0039);
}
*/
/*
.top-logo h2	{
	background: url(marklogo.svg) no-repeat 50% 50% / contain;
	filter: drop-shadow(0px 0px 5px #fff);
}
*/
.top-logo h2	{
	width: 70vw;
	max-width: 500px;
	aspect-ratio: 1/1;
	background: url(./maincp.png) no-repeat 50% 50% / contain;
/*	filter: drop-shadow(0px 0px 5px #0039);*/
}
.top-logo a	{ margin-bottom: -16px; padding: 0 24px; font-size: 48px; line-height: 48px; transition: .2s; }
.top-logo a	{ color: #d0c190; background-color: #756849; border-radius: 1em 1em 0 0; }
.top-logo a:hover	{ transform: scale(1.2); text-decoration: none; }
/*
.top-logo h1	{
	margin: auto; padding: 0;
	text-indent: -9999px;
}
.top-logo h2	{ margin-top: 30px; font-weight: normal; }
.top-logo .sns	{ margin-top: 30px; }
.top-logo a	{ color: #fff; transition: .2s; }
.top-logo a:hover	{ transform: scale(1.2); text-decoration: none; }
*/

/*-----------------------------
Header
-----------------------------*/
/*
.header	{ display: none; }
.header.fixed+*	{ margin-top: 0; }
*/
.header	{ background-color: #17385d; }
.header	{ background: linear-gradient(#223344, #001122); }
.header .logo a	{ background-image: url(marklogo_hw.svg); }
.dr-open	{ background: url(menu-dark.svg) no-repeat 50% 50% / contain; }	/* ドロワーボタン */


/*-----------------------------
Maintenance
-----------------------------*/
.mainte	{
	display: block; width: fit-content; margin: 0 auto 2em; padding: 1em; border: 2px solid #c006;
	p	{ margin-bottom: 0; }
}

/*-----------------------------
Banner
-----------------------------*/
.spbnr	{ display: block; max-width: 980px; margin: 0 auto 2em; }
.spbnr a	{ display: block; transition: .2s; }
.spbnr a:hover	{ opacity: .9; transform: scale(1.02); }
.spbnr a:after	{ content: '' !important; margin-left: 0 !important; }

.exbnr	{ display: block; max-width: 700px; margin: 0 auto 2em; }
.exbnr a	{ display: block; transition: .2s; }
.exbnr a:hover	{ opacity: .9; transform: scale(1.02); }
.exbnr a:after	{ content: '' !important; margin-left: 0 !important; }


/*-----------------------------
	Restaurant
-----------------------------*/
#restaurant	{ background-color: #a9c0b2; background-image: none; }
#restaurant	{ background-color: #c7cdbc; background-image: none; }


/*-----------------------------
	Information
-----------------------------*/
/*#top-info	{ padding: 2em 0; background-color: rgba(125, 194, 183, .2); }*/
#top-info	{ position: relative; background-attachment: fixed; z-index: -2; }
#top-info	{ background: linear-gradient(#17385d, #0f1024); }
#top-info	{ background: linear-gradient(#123, #234); }
#top-info	{ background: linear-gradient(#543, #210); }
#top-info	{ background-image: none; background-color: #756849; }
/*#top-info:before	{ position: absolute; top: 0; width: 100%; height: 100%; content: ''; background-color: #0004; z-index: -1; }*/
#top-info .inner	{ max-width: 960px; padding: 1em; }
#top-info h3	{ padding-bottom: .5rem; color: #fff; border-bottom: 3px dotted #fff3; }
#top-info h3,
#top-info h4	{ color: #fff; text-align: center; font-weight: normal; font-family: 游明朝, YuMincho, serif; letter-spacing: 0; }
#top-info h3+h4	{ margin-top: .5rem; }


/*-----------------------------
	Facebook
-----------------------------*/
/*#top-fb	{ display: flex; flex-flow: column; justify-content: center; }*/
#top-fb	{ text-align: center; }
#top-fb	{ min-height: 20vh; background: url(bg1.jpg) no-repeat 50% 50% / cover; background-attachment: fixed; }
#top-fb	{ background-image: url(../images/sample/sample1.jpg); }
#top-fb	{ position: relative; }
#top-fb:before	{
	position: absolute; left: 0; width: 100%; height: 100%;
	background-color: #3332;
	-webkit-backdrop-filter: saturate(100%) blur(2px);
	backdrop-filter: saturate(100%) blur(2px);
	content: '';
}

/*-----------------------------
	Photo Gallery
-----------------------------*/
#top-gallery	{ background-color: #a9c0b2; }
#top-gallery .inner { padding: 1em 0; max-width: none; }
#top-gallery img { display: block; }


/*-----------------------------
	Banner
-----------------------------*/
#top-bnr	{ background-color: #7dc2b7; }
#top-bnr .inner > *+*	{ margin-top: 1em; }
#top-bnr ul	{ margin: 0; padding: 0; list-style-type: none; }
#top-bnr ul	{ display: flex; flex-wrap: wrap; gap: 1em; }
#top-bnr li	{ flex: 1 0 auto; max-width: 100%; }
#top-bnr li	{ background-color: #fff; box-shadow: 0 0 15px 3px rgb(0 32 64 / 20%); }
#top-bnr li	{ display: flex; flex-direction: column; justify-content: center; text-align: center; }
#top-bnr a	{ display: block; padding: 1em; transition: .2s; }
#top-bnr a:hover	{ opacity: .8; }
#top-bnr a:after	{ display: none; }
#top-bnr img { display: block; margin: auto; }


/*----------------------
	Googlemap
----------------------*/
.googlemap iframe	{ max-width: none; max-height: 500px; }


/* for SmartPhone Landscape (横) */
@media screen and (min-width:480px) { 
}



@media screen and (min-width:768px) { /* and ( max-width:1024px) { */

	.top-logo a	{ margin-bottom: -20px; padding: 0 32px; font-size: 64px; line-height: 64px; }

	#top-info .inner	{ border-radius: 1em; }
	#top-info h4	{ font-size: 2em; }
	#top-bnr li	{ flex: 1 0 40%; }
	#top-bnr .x3 li	{ flex: 1 0 25%; }

}