@charset "UTF-8";

main {
	background: url(/images/accommodation/main.jpg);
	background-size: cover;
	background-position: center;
}
.contents{
	.title{
		width: 100%;
		margin: 0 auto 50px;
	}
	.inner{
		ul.whiteList{
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 10px;
			width: 100%;
			margin: 0 auto 2%;

			li{
				a{
					background: var(--colorW);
					padding: 5px 20px;
					transition: all ease 0.5s;

					&:hover{
						background: var(--color01);
						color: var(--colorW);
					}
				}
			}
		}
	}
	a.linksbutton{
		margin: 0 auto;
	}
}
.pswp{
	.pswp__scroll-wrap, .pswp__bg, .pswp__container, .pswp__item, .pswp__content, .pswp__img, .pswp__zoom-wrap{
		padding: 15%;
	}
}

#contents01{
	.inner{
		gap: 2%;
		padding: 0;

		.rooms{
			width: 49%;
			margin: 0 0 2%;

			ol.room-gallery {
				display: flex;
				flex-wrap: wrap;
				gap: 2%;
				margin: 0 0 20px;
				padding: 0;
			}

			ol.room-gallery li {
				overflow: hidden;
				img {
					width: 100%;
					height: auto;
					display: block;
					transition: transform .3s;
				}

				a:hover img {
					transform: scale(1.05);
				}

				&:nth-child(1){
					width: 100%;
					margin: 0 0 10px;
				}
				&:not(:nth-child(1)){
					width: calc(96% / 3);
					
				}

			}

			dl{
				background: var(--colorW);
				padding: 20px;

				dt{
					border-bottom :1px solid var(--color02);
					margin: 0 auto 10px;
					padding: 0 20px;
					position: relative;

					span{
						background: var(--color02);
						color: var(--colorW);
						font-size: var(--font-menu);
						display: flex;
						justify-content: center;
						align-items: center;
						width: fit-content;
						padding: 0 20px;
						position: absolute;
						bottom: 0;
						right: 0;
					}
				}
				dd{
					padding: 10px 20px;

					p{
						margin: 0 0 20px;
					}
					button{
						margin: 0 auto;
					}
				}
			}
		}
	}
}

#contents02{
	.inner{
		align-items: center;

		figure{
			width: 25%;
		}
		.list{
			width: 75%;
			padding: 0 0 0 5%;

			dl{
				display: flex;
				flex-wrap: wrap;
				margin: 0 0 10px;

				dt{
					background: var(--color02);
					color: var(--colorW);
					text-align: center;
					width: 5%;
					margin: 0 0 10px;
					padding: 5px 0;
				}
				dd{
					background: var(--colorW);
					width: 95%;
					padding: 5px 10px;
					margin: 0 0 10px;
				}
			}
		}
	}
}

#contents03{
	.whiteList{
		margin: 0 auto 5%;
	}
	.inner{
		.box{
			width: 100%;

			picture{
				width: 30%;
				margin: 0 2% 3% 0;
			}
			dl{
				background: var(--colorW);
				width: 68%;
				margin: 0 0 3% 0;
				padding: 30px 40px;

				dt{
					border-bottom: 2px solid var(--color02);
					width: 100%;
					margin: 0 0 10px;
					padding: 0 0 10px;
				}
				dd{
					padding: 10px 0;

					span{
						font-size: 0.8rem;
						display: block;
						padding: 10px 0;
					}
				}
			}
		}
	}
}

#contents04{
	.whiteList{
		margin: 0 auto 5%;
	}
	.inner{
		.box{
			picture{
				margin: 0 2% 3% 0;
			}
			dl{
				background: var(--colorW);
				margin: 0 0 3% 0;
				padding: 30px 40px;

				dt{
					border-bottom: 2px solid var(--color02);
					margin: 0 0 10px;
					padding: 0 0 10px 20px;
				}
			}
		}
	}
}
@media screen and (min-width: 769px) {
#contents04{
	.inner{
		.box01{
			width: 100%;

			picture{
				width: 30%;
			}
			dl{
				width: 68%;
			}
		}
		.box02{
			width: 58%;
			margin: 0 2% 0 0;

			picture{
				width: 49%;
			}
			dl{
				width: 49%;
			}
		}
		.box03{
			width: 40%;

			dl{
				width: 100%;
			}
		}
		.box04{
			background: var(--colorW);
			width: 49%;
			margin: 0 1% 0 0;
			align-items: center;

			picture{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 30%;
				margin: 0;
			}
			dl{
				width: 68%;
				padding: 30px 20px;

				dd{
					a{
						border: 2px solid var(--color02);
						display: block;
						width: 100%;
						margin: 10px auto 0;
						padding: 5px 20px 5px 40px;
						transition: all ease 0.5s;
						position: relative;

						&:before{
							content:"";
							width: 0;
							height: 0;
							border-style: solid;
							border-right: 0;
							border-left: 10px solid var(--color02);
							border-top: 5px solid transparent;
							border-bottom: 5px solid transparent;
							position: absolute;
							top: 50%;
							left: 10px;
							transform: translate(0,-50%);
							transition: all ease 0.5s;
						}

						&:hover{
							background: var(--color02);
							color: var(--colorW);
						}

						&:hover:before{
							border-left: 10px solid var(--colorW);
						}
					}
				}
			}
		}
		.box05{
			background: var(--colorW);
			width: 49%;
			margin: 0 0 0 1%;

			picture{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 30%;
				margin: 0;

				img{
					width: 70%;
				}
			}
			dl{
				width: 68%;
				padding: 30px 20px;
			}
		}
	}
}
}

@media screen and (max-width: 768px) {
	main{
		background: url(/images/accommodation/main.jpg);
		background-size: cover;
		background-repeat: no-repeat;
	}
	.contents{
		.inner{
			ul.whiteList{
				justify-content: unset;
				margin: 0 auto 5%;
				li{
					width: 48%;
					a{
						display: block;
						width: 100%;
					}
				}
			}
		}
	}
	#contents01{
		.inner{
			.rooms{
				width: 100%;
				margin: 0 0 5%;
			}
		}
	}
	#contents02{
		.inner{
			align-items: unset;
			figure{
				width: 36%;
			}
			.list{
				width: 63%;

				dl{
					dt{
						background: var(--colorW);
						width: 15%;
						position: relative;

						span{
							background: var(--color02);
							font-size: var(--font-menu);
							display: flex;
							justify-content: center;
							align-items: center;
							width: 30px;
							height: 25px;
							position: absolute;
							top: 0;
							left: 0;
						}
					}
					dd{
						width: 85%;
					}
				}
				p{
					font-size: var(--font-menu);
				}
			}
		}
	}

	#contents03{
		.inner{
			.box{
				margin: 0 auto 5%;
				picture{
					width: 100%;
					margin: 0 auto 0;
				}
				dl{
					width: 100%;
					margin: 0 auto 0;
				}
			}
		}
	}
	#contents04{
		.inner{
			.box{
				margin: 0 auto 5%;
				picture{
					width: 100%;
					margin: 0 auto 0;
				}
				dl{
					width: 100%;
					margin: 0 auto 0;
				}
			}
			.box04,.box05{
				background: var(--colorW);
				align-items: center;
				padding: 0 0 0 20px;
				
				picture{
					width: 30%;
				}
				dl{
					width: 70%;
					padding: 20px 20px;
				}
			}
		}
	}
}