@charset "UTF-8";

/*################ トップイメージ ################*/
#midasi {
}

#topwrap {
	height: calc(100vh - 50px);
	background: url(img/backtop.svg);
	background-color: #f1f1f1;
	padding-top: 70px;
/*	border: 2px red solid;*/
}

#topslide {
	position: relative;
}

#topslide li {
	display: none;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.top1 {
	height : calc(100vh - 120px);
	margin: 0px auto;
	position: relative;
/*	border: 2px green solid;*/
}
.top1 a {
	color: #FFD900;
}
/****トップの画像（背景設定）****/
.topbg1{
	background: url("img/top1.jpg");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
}
.topbg2{
	background: url(img/top2.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.topbg3{
	background: url(img/top3.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.topbg4{
	background: url(img/top4.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.topstay{
	background: url("img/nagomi.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
/**************トップの画像の見出し**************/
/*********************************************/
/**a SP設定**/
.top2a {
	background-color: rgba(0,0,0,0.7);
	position: absolute;
	width: 90%;
	position: absolute;
	bottom: 60%;
	right: 5%;
	padding: 10px 15px;
	border-radius: 20px;
	text-align: center;
}
.top2a h1 {
	font-size: 1.4em;
	color: #FFD900;
	line-height: 1.3em;
	padding-bottom: 0.3em;
}
.top2a p {
	font-size: 1em;
	color: #FFFFFF;
}
/**b SP設定**/
.top2b {
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	bottom: 10%;
	right:5%;
	padding: 13px 25px 10px;
	margin: 5%;
	border-radius: 20px;
}
.top2b h1 {
	font-size: 1.5em;
	color: #FFD900;
	line-height: 1.3em;
}
.top2b p {
	font-size: 1em;
	color: #FFFFFF;
}
/**c SP設定**/
.top2c {
	background-color: rgba(0,0,0,0.5);
	width: 90%;
	height: 30%;
	position: absolute;
	bottom: 50%;
	right: 5%;
	padding: 15px;
	border-radius: 20px;
}
.top2c h1 {
	font-size: 1.4em;
	text-align: center;
	color: #FFD900;
	line-height: 1.2em;
	padding-bottom: 0.3em;
	text-shadow: 0px 0px 7px black, 0px 0px 7px black;
	}
.top2c p {
	font-size: 1em;
	color: #FFFFFF;
	text-align: center;
	text-shadow: 0px 0px 7px black, 0px 0px 7px black;
}
/**d SP設定**/
.top2d {
	background: url(img/sponsor/sinzo.png) no-repeat center 150px/ 90%;
	background-color: rgba(0,0,0,0.6);
	width: 90%;
	position: absolute;
	bottom: 10%;
	right: 5%;
	padding: 15px;
	padding-bottom: 30%;
	border-radius: 20px;
	background-color: rgba(0,0,0,0.6);
}
.top2d h1 {
	font-size: 1.4em;
	line-height: 1.4em;
	color: #FFD900;
	text-align: center;
	padding-bottom: 0.1em;
}
.top2d p {
	font-size: 1em;
	color: #FFFFFF;
	text-align: center;
	text-shadow: 0px 0px 7px black, 0px 0px 7px black;
}

/*#########################################################################*/
/*################ トップイメージのメディアクエリ_768px以上に適応 ################*/
@media (min-width: 768px) {

	#midasi {
		margin-bottom: 10px;
	}
	#topwrap {
		height: 800px;
	}
	.top1 {
		padding-top: 0;
		height: 730px;
	}
	/**a PC設定**/
	.top2a {
		width: 60%;
		bottom: 60%;
		left: 20%;
		transform: rotate(-4deg);
	}
	.top2a h1 {
		font-size: 3em;
	}
	.top2a p {
		font-size: 1.5em;
	}
	.top2a br {
		display: none;
	}
	/**b PC設定**/
	.top2b {
		bottom: 7%;
		left:20%;
		right:10%;
	}
	.top2b h1 {
		font-size: 3em;
	}
	.top2b p {
		font-size: 1.5em;
	}
	.top2b br {
		display: none;
	}
	/**c PC設定**/
	.top2c {
		background-color: rgba(0,0,0,0.6);
		width: 50%;
		height: auto;
		bottom: 10%;
		right:5%;
	}
	.top2c h1 {
		font-size: 3em;	
		padding: 7px 0;
	}
	.top2c p {
		font-size: 1.5em;
		text-align: left;
	}
	.top2c br {
		display: none;
	}
	/**d PC設定**/
	.top2d {
		background: url(img/sponsor/sinzo.png) no-repeat 50px 100px;
		background-color: rgba(0,0,0,0.6);
		width: 500px;
		bottom: 10%;
		right:5%;
		padding-bottom: 20%;
	}
	.top2d br {
		display: none;
	}
	.topbg1{
		background: url("img/top1.jpg");
		background-repeat: no-repeat;
		background-position: top center;
		background-size: cover;
	}
	.topstay{
		background: url("img/routeinn1.jpg");
		background-repeat: no-repeat;
		background-position: top center;
		background-size: cover;
	}

}/*メディアクリア閉じブロック*/


/*##########################################*/
/*################ Contents ################*/
/*##########################################*/

/* CSS Document */