@charset "UTF-8";
/* CSS Document */
/*↓下層共通*/
.submain {
	align-items: center;
	margin: 0 auto;
	padding-top: 100px;
	justify-content: flex-start;
}
.text {
	width: 30%;
	padding-top: 64px;
}
.picture {
	width: 60%;
	min-width: 300px;
}
.picture img{
	object-fit: cover;
	width: 100%;
}
/*↑ここまで下層共通*/

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






/*--------------------
メインビュー
---------------------*/
.under_main {
	margin: 0 auto;
	text-align: center;
}
/*.main_view{
background-image:url("../images/uminoterrace/mv.jpg");
background-repeat:no-repeat;
background-size:cover;
width:100%;
height:100vh;	
position:relative;
}
*/

#slider {
	width: 100%;
	height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
	position:relative;
}


.ttl {
	position:absolute;
	bottom: 6vh;
	left:50%;
	transform:translate(-50%);
	font-size: 7rem;
	overflow-wrap: break-word;
	font-family: 'Oswald', sans-serif;
	color: #000000;
	display: inline-block;
	line-height: 2rem;
	margin-bottom: 64px;
	font-weight: bold;
	width: 575px;
}
.ttl::before {
	display: block;
	content: "";
	width: 70%;
	height: 2px;
	background-color: #000;
	margin: -50px auto -50px 5px;
}
.ttl::after {
	content: "UMInoTERRACE VILLA";
	width: 575px;
}
.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: 34px;
	margin-left: 70px;
}
.under_main p{
	margin:80px auto 0;
	font-size: 1.6rem;
	line-height: 2;
}



/*--------------------
room（お部屋）内
---------------------*/
.room.submain h2::after {
	content: "Room";
}
.room.submain h2 span:before {
	width: 44%;
}


/*--------------------
equipmen（備品一覧）内
---------------------*/
.equipmen {
	position: relative;
}
.equipmen .flex_direction,
.equipmen .flex {
	align-items: center;
	justify-content: flex-end;
}
.equipmen .inner {
	text-align: center;
}
.equipmen img {
	object-fit: cover;
	width: 100%;
	max-width: 540px;
}
.square {
	width: 45%;
	padding: 64px 0 0 88px;
	text-align: left;
	background-color: #f1f1f1;
	margin-left: 100px;
	position: relative;
}
.map{
	width: 40%;
}
.equipmen .square:first-child {
	background-color: #ffffff;
	padding: 0;
}
.flex_direction .square:last-child {
	margin-right: 60px;
	margin-left: 0;
	padding-right: 88px;
}
.flex_direction .square:last-child .desqription {
	margin-left: auto;
}
.desqription {
	width: 100%;
	max-width: 380px;
}
.desqription .oswald {
	font-size: 6.0rem;
	color: #000000;
	padding-top: -100px;
	position: absolute;
	top: -16px;
	left: 8%;
}
.desqription .oswald span{
	font-size: 1.4rem;
	color: #333333;
	font-weight: 300;
	margin-left: 24px;
}
.flex_direction .oswald {
	left: 20%;
}
.desqription h4 {
	font-size: 1.8rem;
	border-bottom: 2px solid #000000;
	padding-bottom: 16px;
	margin-bottom: 24px;
	transition: 0.3s all ease-in-out;
}
.equipmen ul {
	margin-bottom: 72px;
}
.desqription ul li {
	margin-bottom: 8px;
}
.line {
	display: block;
	width: 645px;
	height: 1px;
	background-color: rgba(0, 0, 0, 0);
	position: absolute;
	top: 790px;
	left: 252px;
	z-index: 1;
	transform: rotate(330deg);
}
.line2 {
	display: block;
	width: 635px;
	height: 1px;
	background-color: rgba(0, 0, 0, 0);
	position: absolute;
	transform: rotate(333deg);
	top: 808px;
	left: 261px;
	z-index: 1;
}
.line3 {
	display: block;
	width: 627px;
	height: 1px;
	background-color: rgba(0, 0, 0, 0);
	position: absolute;
	top: 820px;
	left: 266px;
	z-index: 1;
	transform: rotate(335deg);
}
.line4 {
	display: block;
	width: 615px;
	height: 1px;
	background-color: rgba(0, 0, 0, 0);
	position: absolute;
	transform: rotate(338deg);
	top: 838px;
	left: 273px;
	z-index: 1;
}
.line5{
	display: block;
	width: 605px;
	height: 1px;
	background-color: rgba(0, 0, 0, 0);
	position: absolute;
	transform: rotate(341deg);
	top: 855px;
	left: 279px;
	z-index: 1;
}
.line::after, .line2::after,
.line3::after, .line4::after,
.line5::after{
	content: '';
	display: block;
	width: 0;
	height: 1px;
	background-color: #000000;
	position: absolute;
	bottom: 0;
	right: 0;
	transition: .5s;
	z-index: 1;
}
.line::before,
.line2::before,
.line3::before, 
.line4::before,
.line5::before{
	display: inline-block;
	content: "";
	width: 0px;
	height: 15px;
	background-color: #BC0003;
	border-radius: 50%;
	position: absolute;
	top: -7px;
	left: -15px;
}
.line6 {
	display: block;
	width: 490px;
	height: 1px;
	background-color: rgba(0, 0, 0, 0);
	position: absolute;
	transform: rotate(348deg);
	bottom: 500px;
	left: 395px;
	z-index: 1;
}
.line7 {
	display: block;
	width: 490px;
	height: 1px;
	background-color: rgba(0, 0, 0, 0);
	position: absolute;
	transform: rotate(9deg);
	bottom: 411px;
	left: 395px;
	z-index: 1;
}

.line8 {
	display: block;
	width: 495px;
	height: 1px;
	background-color: rgba(0, 0, 0, 0);
	position: absolute;
	transform: rotate(341deg);
	bottom: 500px;
	left: 400px;
	z-index: 1;
}
.line9 {
	display: block;
	width: 475px;
	height: 1px;
	background-color: rgba(0, 0, 0, 0);
	position: absolute;
	transform: rotate(10deg);
	bottom: 380px;
	left: 410px;
	z-index: 1;
}
.line10 {
	display: block;
	width: 500px;
	height: 1px;
	transform: rotate(11deg);
	background-color: rgba(0, 0, 0, 0);
	position: absolute;
	bottom: 200px;
	left: 390px;
	z-index: 1;
}
.line11 {
	display: block;
	width: 505px;
	height: 1px;
	transform: rotate(7deg);
	background-color: rgba(0, 0, 0, 0);
	position: absolute;
	bottom: 183px;
	left: 382px;
	z-index: 1;
}
.line12 {
	display: block;
	width: 505px;
	height: 1px;
	transform: rotate(4deg);
	background-color: rgba(0, 0, 0, 0);
	position: absolute;
	bottom: 169px;
	left: 380px;
	z-index: 1;
}
.line6::after,
.line7::after,
.line8::after,
.line9::after,
.line10::after,
.line11::after,
.line12::after {
	content: '';
	display: block;
	width: 0;
	height: 1px;
	background-color: #000000;
	position: absolute;
	bottom: 0;
	left: 0;
	transition: .5s;
	z-index: 1;
}
.line6::before,
.line7::before,
.line8::before,
.line9::before,
.line10::before,
.line11::before,
.line12::before {
	display: inline-block;
	content: "";
	width: 0px;
	height: 15px;
	background-color: #BC0003;
	border-radius: 50%;
	position: absolute;
	top: -7px;
	right: -15px;
}
/* マウスカーソルが乗っかると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 {
	width: 100%;
}
.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: 15px;
}
.equipmen　.btn {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: #000000;
	vertical-align: text-bottom;
	position: relative;
	transition: all .4s;
	cursor: pointer;
	margin-right: 24px;
}
.equipmen .btn:hover {
	transform: rotate(180deg);
	transition: all .4s;
}
.btn span:first-child {
	display: block;
	width: 10px;
	height: 3px;
	background-color: #ffffff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.btn span:nth-child(2) {
	display: block;
	width: 10px;
	height: 3px;
	background-color: #ffffff;
	transform: translate(-50%, -50%) rotate(90deg);
	position: absolute;
	top: 50%;
	left: 50%;
	transition: all .4s;
}
.btn.active span:nth-child(2) {
	transform: translate(-50%, -50%) rotate(0deg);
	position: absolute;
	top: 50%;
	left: 50%;
	transition: all .4s;
}


/*--------------------
gallery（フォトコレクション）内
---------------------*/
.gallery ul:not(:last-child) {
	margin-bottom: 8px;
}
.gallery li {
	max-width: 355px;
	height: 250px;
	overflow: hidden;
	position: relative;
	width: 100%;
}
.gallery li img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	min-height: -webkit-fill-available;
	transition: .3s ease-in-out;
}
.gallery .morebutton {
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN W3", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: 500;
	font-size: 1.4rem;
	line-height: 2.4rem;
	font-style: italic;
	padding-right: 24px;
	padding-bottom: 0;
}
.gallery .morebutton::after {
	display: inline-block;
	content: url("../images/puluss2.svg");
	width: 20px;
	margin-left: 16px;
	vertical-align: -webkit-baseline-middle;
}
.gallery a:hover img { /*hoverした時の変化*/
	transition: .3s ease-in-out;
	transform: scale(1.1);
}







/*--------------------
price（料金）内
--------------------*/
.price.submain h2::after {
	content: "Price";
}
.price.submain h2 span:before {
	width: 50%;
}
.price h3{
	margin-bottom: 16px;
}
.price .title{
	display: block;
	width: 40%;
	margin:0 0 0 auto;
}




/*--------------------
stay（宿泊料金）内
--------------------*/
.stay a{
	color:#333;
	font-weight:700;
	text-decoration:underline;
}
.stay a:hover{
	opacity:0.7;
	transition:0.3s;
}


.stay .inner .title {
	display: block;
	width: 40%;
	margin: 0 0 0 auto;
}
.stay .flex,
.stay .flex_direction,
.Photograph .flex,
.Photograph .flex_direction{
	align-items: center;
	margin-bottom: 80px;
	height: 500px;
	position: relative;
}
.stay .contents .picture{
	max-width: 600px;
	width: 60%;
	height: 470px;
}
.stay .flex_direction .picture,
.Photograph .flex_direction .picture{
	position: absolute;
	top: 0;
	left: 0;
	z-index: -3;
}
.stay .flex .picture,
.Photograph .flex .picture{
	position: absolute;
	top: 0;
	right: 0;
	z-index: -3;
}
.contents .picture img{
	object-position: center;
	object-fit: cover;
	width: 100%;
	height: 470px;
}
dl{
	width: 50%;
	padding: 45px 72px 45px 72px;
}
dl::before{
	display: block;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	z-index: -2;
	top: 10px;
	left: 10px;
}
dl::after{
	display: block;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	border: solid 1px #000000;
	z-index: -1;
	top: 0;
	left: 0;
}

dt{
	font-size: 1.8rem;
	font-weight: 600;
	margin-bottom: 16px;
}
dt:before{
	display: inline-block;
	content: "";
	background-color: #000000;
	width: 2px;
	height: 20px;
	vertical-align: bottom;
	margin-right: 24px;
}
dd{
	font-size: 1.5rem;
	margin-left: 24px;
	margin-bottom: 24px;
}
dd:last-child{
	margin-bottom: 0;
}
.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: 100px;
}
.notion {
	width:1100px;
	margin:0 auto;
}
.notion dl {
	width:100%;
}


.banner{
	margin:150px auto;
}	

.banner a{
	display:block;
	text-align: center;
}	
.banner_item{
	margin:0 auto 50px;
}

.banner_item img{
	max-width: 970px;
}


@media screen and (max-width:767px){
	/*------------------------------------------------
	SP Style
	------------------------------------------------*/
	.notion {
		width:90%;
		margin:0 auto;
	}

}



.surprise-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 16px;
	box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.08);
	padding: 24px 32px;
	max-width: 720px;
	margin: 0 auto;
	gap: 10px;
}

.surprise-icon img {
	width: 80px;
	height: auto;
}

.surprise-text {
	text-align: left;
}

.surprise-text .surprise-title {
	font-size: 18px;
    font-weight: bold;
    color: #333;
    border-bottom: 7px solid rgba(193, 84, 138, 40%);
    display: inline-block;
    margin-bottom: 12px;
    width: -moz-fit-content;
  width: fit-content;
    line-height: 1.5;
	background:#fff;
	min-width: 240px;
}
.stay dd .surprise-text p {
	font-size: 14px;
	color: #444;
	line-height: 1.8;
	font-weight: 400;
}
.stay .surprise-text a{
	color:#333;
	font-weight:500;
	border-bottom: 1px solid rgba(193, 84, 138, 40%);
	text-decoration: none;
}
.surprise-text a:hover{
	opacity:0.3;
}