@charset "UTF-8";
/* CSS Document */
@media(max-width:767px) {
	/*↓下層共通*/
	.submain {
		max-width: none;
		padding: 70px 6.4% 0;
	}
	.text {
		width: 100%;
		padding-top: 0px;
	}
	.picture {
		max-width: 100%;
		margin-bottom: 32px;
	}
	.picture img {
		object-fit: cover;
		width: 100%;
	}
	.submain h2 span:before {
		width: 22%;
	}
	/*↑下層共通*/

	#slider {
		height: 70vh;
	}
	.ttl {
		position: absolute;
		bottom: 10px;
		left: 50%;
		transform: translate(-50%);
		font-size: 4rem;
		overflow-wrap: break-word;
		font-family: 'Oswald', sans-serif;
		color: #000000;
		display: inline-block;
		line-height: 2rem;
		margin-bottom: 50px;
		margin-top: 50px;
		font-weight: bold;
		width: auto;
	}
	.ttl::before {
		display: block;
		content: "";
		width: 40%;
		height: 2px;
		background-color: #000;
		margin: -50px auto -40px 150px;
	}
	.ttl::after {
		display: inline-block;
		color: #fff;
		text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, 0px 1px 0 #000000, 0-1px 0 #000000, -1px 0 0 #000000, 1px 0 0 #000000;
		transform: rotateX(180deg);
		opacity: 0.1;
		margin-top: 15px;
		margin-left: 50px;
	}






	.m-100{
		margin:50px auto;
	}





	.equipmen{
		padding-right: 6.4%;
		padding-left: 6.4%;
	}
	.equipmen img {
		margin-bottom: 32px;
		margin-top: 30px;
	}
	.square{
		width: 100%;
		padding: 32px 40px 0 40px;
		text-align: left;
		margin-left: 0;
	}
	.flex .square{
		margin-bottom: 60px;
	}
	.flex_direction .square:last-child{
		margin-right: 0;
	}
	.map{
		width: 100%;
	}
	.desqription{
		margin: 0 auto;
	}
	.desqription .oswald{
		font-size: 4.0rem;
		left: 0px;
	}
	.desqription .oswald span{
		font-size: 1.2rem;
		color: #333333;
		margin-left: 8px;
		vertical-align: middle;
	}
	.desqription h4{
		font-size: 1.6rem;
		padding-bottom: 8px;
		margin-bottom: 16px;
	}
	.desqription ul{
		margin-bottom: 40px;
	}
	.line {
		height: 200px;
		width: 1px;
		top: 585px;
		left: 101px;
		transform: rotate(16deg);
	}
	.line2 {
		height: 235px;
		width: 1px;
		transform: rotate(14deg);
		top: 586px;
		left: 100px;
		z-index: 1;
	}
	.line3 {
		height: 270px;
		width: 1px;
		transform: rotate(12deg);
		top: 587px;
		left: 100px;
		z-index: 1;
	}
	.line4 {
		height: 300px;
		width: 1px;
		transform: rotate(11deg);
		top: 587px;
		left: 100px;
		z-index: 1;
	}
	.line5{
		height: 325px;
		width: 1px;
		transform: rotate(10deg);
		top: 587px;
		left: 100px;
		z-index: 1;
	}
	.line::after, .line2::after, .line3::after, .line4::after,.line5::after,.line6::after,.line7::after,.line8::after,.line9::after,.line10::after,.line11::after,.line12::after{
		content: '';
		display: block;
		height: 0;
		width: 1px;
		background-color: #000000;
		position: absolute;
		bottom: 0;
		z-index: 1;
		transition: .5s;
	}
	.line::before, .line2::before, .line3::before, .line4::before,.line5::before{
		display: inline-block;
		content: "";
		width: 0px;
		height: 10px;
		background-color: #BC0003;
		border-radius: 50%;
		position: absolute;
		top: -5px;
		left: -5px;
		z-index: 2;
	}
	.line6 {
		height: 455px;
		width: 1px;
		bottom: 270px;
		left: 102px;
		transform: rotate(7.5deg);
	}
	.line7 {
		height: 345px;
		width: 1px;
		bottom: 270px;
		left: 102px;
		transform: rotate(10deg);
	}

	.line8 {
		height: 510px;
		width: 1px;
		bottom: 235px;
		left: 102px;
		transform: rotate(7deg);
	}
	.line9 {
		height: 360px;
		width: 1px;
		bottom: 235px;
		left: 102px;
		transform: rotate(10deg);
	}
	.line10 {
		height: 360px;
		width: 1px;
		bottom: 125px;
		left: 104px;
		transform: rotate(10deg);
	}
	.line11 {
		height: 400px;
		width: 1px;
		bottom: 85px;
		left: 104px;
		transform: rotate(9deg);
	}
	.line12 {
		height: 430px;
		width: 1px;
		bottom: 55px;
		left: 105px;
		transform: rotate(8deg);
	}

	.line6::before,.line7::before,.line8::before,.line9::before,.line10::before,.line11::before,.line12::before {
		display: inline-block;
		content: "";
		width: 0px;
		height: 10px;
		background-color: #BC0003;
		border-radius: 50%;
		position: absolute;
		top: -5px;
		right: -5px;
		z-index: 2;
	}
	/* マウスカーソルが乗っかるとwidthが100%に伸びる */
	.view.active::after, .view2.active::after, .view3.active::after,.view4.active::after, .view5.active::after, .view6.active::after,.view7.active::after, .view8.active::after, .view9.active::after,.view10.active::after {
		height: 100%;
		background-color: rgba(0,0,0,0);
		transition: background-color .5s 3s;
	}
	.view.active::before, .view2.active::before, .view3.active::before,.view4.active::before, .view5.active::before, .view6.active::before,.view7.active::before, .view8.active::before, .view9.active::before,.view10.active::before {
		width: 10px;
	}

	.gallery ul:not(:last-child){
		margin-bottom: 0px;
	}
	.gallery li{
		height: 200px;
		margin-bottom: 8px;
	}
	.gallery .morebutton{
		font-size: 1.2rem;
		padding-right: 8px;
	}
	.gallery .morebutton::after{
		width: 14px;
		margin-left: 8px;
	}



	/*--------------------
	ここからprice.css
	--------------------*/
	.stay .inner .title {
		display: block;
		width: 100%;
		margin: 0 auto 32px 0;
	}
	.stay h3 {
		margin-bottom: 8px;
	}
	.stay .title {
		display: block;
		width: 100%;
		margin-bottom: 32px;
	}
	.stay .flex, .stay .flex_direction, .Photograph .flex, .Photograph .flex_direction {
		flex-direction: column-reverse;
		margin-bottom: 40px;
		height: auto;
		position: static;
	}
	.contents .picture {
		width: 100%;
		height: 250px;
	}
	.stay .flex_direction .picture, .Photograph .flex_direction .picture {
		position: static;
		top: auto;
		left: auto;
	}
	.stay .flex .picture, .Photograph .flex .picture {
		position: static;
		top: auto;
		right: auto;
	}
	.contents .picture img {
		height: 250px;
	}
	.notion {
		width: 90%;
		margin: 0 auto;
	}
	dl {
		width: 100%;
		padding: 0;
	}
	dl::before {
		display: none;
	}
	dl::after {
		border: none;
	}
	dt {
		font-size: 1.6rem;
	}
	dd {
		font-size: 1.6rem;
	}
	dd:last-child {
		margin-bottom: 0;
	}
	.flex dl dd:nth-of-type(2), .flex dl dd:nth-of-type(4), .flex dl dd:nth-of-type(5) {
		margin-bottom: 0;
	}
	.flex dl dd:nth-of-type(5), .flex dl dd:last-of-type {
		display: inline-block;
		vertical-align: text-top;
	}
	.submain .picture {
		position: static;
	}
	.stay .inner {
		margin-top: 0px;
	}



	.banner{
		margin:70px auto;
		padding: 0 6.4%;
	}	

	.banner_item{
		margin:0 auto 30px;
	}

	.banner_item img{
		width:100%;
	}


.surprise-wrapper {
		flex-direction: column;
		text-align: center;
		padding: 24px 20px;
	}
	.surprise-text {
		text-align: center;
	}
	.surprise-text .surprise-title {
		font-size: 16px;
	}
	.stay dd .surprise-text p {
		font-size: 12px;
	}

	.surprise-icon img {
		margin-bottom: 16px;
	}
}