@charset "utf-8";
@import url("root.css");

/***************************************
------------- TOP MAIN IMG -------------
***************************************/
[class*="z-0"] {
	position: relative;
}
.z-01 { z-index: 1; }
.z-02 { z-index: 2; }
.z-03 { z-index: 3; }
.z-04 { z-index: 4; }
.z-05 { z-index: 5; }
.z-06 { z-index: 6; }



#mv{
position: relative;
z-index:1;
margin: 0 auto 0;
}

.top-slick {
width: 80%;
height:90vh;
margin: 0 0 0 auto;
overflow: hidden;
z-index: 222;
position: relative;
padding:80px 0 0 0;
}
.slick-slide { height:inherit; }

.top-slick__item {
margin-right: 5px;
margin-left: 5px;
}
.top-slick::after{
position: absolute;
top: 350px;
left: -8%;
content: "GRAND \A RESORT";
white-space: pre;
font-size: 80px;
line-height: 1.2;
font-weight: 500;
color: white;
z-index: 1;
font-family: "Cinzel", serif;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

#mv .box{
margin: 0 auto;
width:auto;
padding: 0 0;
text-align: center;
}
#mv .box h1 {
position: absolute;
top: 350px;
left: 13.5%;
font-size: 80px;
color: var(--base-color01);
font-family: "Cinzel", serif;
line-height: 1.2;
font-weight: 500;
z-index: 221;
width: 80%;
margin: 0 auto;
text-align: left;
}

.top-slick::before{
position: absolute;
top: 550px;
left: -8%;
content: "お客様を安心と \A 信頼で結ぶ";

white-space: pre;
font-size:32px;
line-height: 1.4;
font-weight: 500;
color: white;
z-index: 1;
font-family: "Cinzel", serif;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}


#mv .box h2 {
position: absolute;
top: 550px;
left: 13.5%; /* ← これを 0 に！ */
font-size:32px;
color: var(--base-color01);
font-family: "Cinzel", serif;
line-height: 1.4;
font-weight: 500;
z-index: 221;
width: 80%; /* ← top-slickと揃えると完璧 */
margin: 0 auto;
text-align: left;
}


.add-anime {
		animation: zoom-anime 30s linear 0s normal both;
}

@keyframes zoom-anime {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.5);
	}
}

.scroll-text {
writing-mode: vertical-rl;
text-orientation: upright;
font-size: 16px;
color: white;
animation: bounce 1.5s infinite;
position: absolute;
bottom:150px;
right:2%;
z-index: 222;
width: 35px;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}
.scroll-text img{
width: 100%;
display: block;
}

@keyframes bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(10px); }
}

@media (max-width: 768px) {
.top-slick {
width: 100%;
height:90vh;
margin:60px auto 0;
overflow: hidden;
z-index: 222;
position: relative;
padding:0;
}

.top-slick img{
width: auto;
height:90vh;
}

.slick-slide { height:inherit; }


.top-slick__item {
margin-right: 5px;
margin-left: 5px;
}

.top-slick::after{
position: absolute;
top: 40%;
left:5%;
content: "GRAND \A RESORT";
white-space: pre;
font-size: 50px;
line-height: 1.2;
font-weight: 500;
color: white;
z-index: 1;
font-family: "Cinzel", serif;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

.top-slick::before{
position: absolute;
top: 60%;
left:5%;
content: "お客様を安心と \A 信頼で結ぶ";
white-space: pre;
font-size:32px;
line-height: 1.4;
font-weight: 500;
color: white;
z-index: 1;
font-family: "Cinzel", serif;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

#mv .box h1 {display: none;}
#mv .box h2 {display: none;}

.scroll-text {
writing-mode: vertical-rl;
text-orientation: upright;
font-size: 16px;
color: white;
animation: bounce 1.5s infinite;
position: absolute;
bottom:20px;
right:3%;
z-index: 222;
width: 35px;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}
.scroll-text img{
width: 100%;
display: block;
}
}

/***************************************
------------- PHILOSOPHY -------------
***************************************/
#philosophy{
		width: min(100%, 1000px);
		margin: auto;
}

#philosophy .col p{
padding-top: 100px;
margin-left: auto;
}

@media (max-width: 768px) {

#philosophy .col p{
padding:40px 0 0 0;
}

}


/***************************************
------------- SERVICE -------------
***************************************/

#service {
		position: relative;
}
#service .container {
		position: relative;
}
#service .more_box{
position: absolute;
right:0;
top:100px;
}

#service::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; /* ← 下に余白分を引く */
background-color: var(--sub-color00);
z-index: -1;
}

#service .service_row{
display: flex;
justify-content: space-between;
gap: 60px;
flex-wrap: wrap;
margin:280px auto 0;
}
#service .service_col {
flex: 0 0 calc((100% - 120px) / 3);
max-width: calc((100% - 120px) / 3);
text-align: left;
box-sizing: border-box;
margin: 0 auto 50px;
}

#service .service_col:nth-child(2) {margin: -60px auto 0;}
#service .service_col:nth-child(5) {margin: -60px auto 0;}
#service .service_col:nth-child(3) {margin: -120px auto 0;}
#service .service_col:nth-child(6) {margin: -120px auto 0;}

#service .service_col img{
position: relative;
z-index: 99;
}

.kv-num01,
.kv-num02 {
		--slash-angle: -51deg;
		background:var(--sub-color00);
		display: flex;
		align-items: flex-end;
		gap: 1em;
		padding: 0;
		text-align: left;
		position: relative;
		color:var(--service-001);
}
.kv-num01 { color:var(--service-nv); }
.kv-num02 { color:var(--service-gr); }

.kv-num01,
.kv-num02 {
		.num {
				position: relative;
				z-index: 1;
				font-family: "Cinzel", serif;
				font-weight: 400;
				font-size: 5rem;
				line-height: 0.8;
				letter-spacing: .02em;
				display: inline-block;
				overflow: visible;
		}
		.num::before {
				content: "";
				position: absolute;
				bottom: -20px;
				left:50px;
				width: 75px;
				height: 2px;
				background:var(--service-001);
				transform: rotate(var(--slash-angle));
				transform-origin: left bottom;
				z-index: 3;
		}
		.num::after {
				content: "";
				position: absolute;
				bottom: -20px;
				left:50px;
				width: 70px;
				height: 90px;
				background:var(--sub-color00);
				clip-path: polygon(100% 0, 0% 100%, 100% 100%);
				transform-origin: left bottom;
				z-index: 2; /* 三角形が数字より上、線より下 */
		}
		.label{
				position: absolute;
				right: 0;
				font-size: 1.125rem;
				font-weight: 400;
				z-index: 99;
		}
}

.kv-num01 .num::before { background:var(--service-nv); }
.kv-num02 .num::before { background:var(--service-gr); }

@media (max-width: 768px) {
	#service {
		background-color: var(--sub-color00);
	}
	#service .more_box {
		position: absolute;
		right:0;
		top:8%;
		padding: 80px 0 0 0;
	}

	#service::before {height:auto;}

	#service .service_row{
		gap: 40px;
		margin:40px auto 0;
	}
	#service .service_col {
		flex: 0 0 100%;
		max-width: 100%;
		margin: 0 auto 20px;
	}

	#service .service_col:nth-child(2) {margin: 0 auto 0;}
	#service .service_col:nth-child(5) {margin: 0 auto 0;}
	#service .service_col:nth-child(3) {margin: 0 auto 0;}
	#service .service_col:nth-child(6) {margin: 0 auto 0;}

}

/***************************************
------------- recruitment -------------
***************************************/
#recruitment {
	position: relative;
	width: 100%;
	height: auto;
	display: flex;
}

#recruitment .image-wrap {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 50%;
	overflow: hidden;
	z-index: 1;
}

#recruitment .image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

#recruitment .recruitment_box {
	position: relative;
	z-index: 2;
	margin: 0 auto;
	display: flex;
	justify-content:flex-start;
	align-items: center;
	box-sizing: border-box;
}

#recruitment .recruitment_txt {
	width: 65%;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.75);
	padding: min(7.5%, 90px);
}

#recruitment .recruitment_txt p {
	margin-top: min(10vw,60px);
	text-align: left;
}

@media (max-width: 768px) {
	#recruitment {
		position: static !important;
		height:auto;
		margin: auto;
		flex-wrap: wrap;
	}
	#recruitment .image-wrap {
		position: static !important;
		width: 100%;
	}
	#recruitment .recruitment_box {
		margin: 0 auto;
		justify-content:space-between;
		flex-wrap: wrap;
	}
	#recruitment .recruitment_txt {
		width:100%;
	}
}

/***************************************
------------- parallax -------------
***************************************/
.parallax {
	background: url(../img/parallax_bg01.webp) no-repeat center center / cover;
	height: clamp(300px,35vh,600px);
	background-attachment: fixed;
}

/***************************************
------------- news -------------
***************************************/
#news{
	background: var(--sub-color00);
}
#news .container {
	position: relative;
}
#news .more_box {
	position: absolute;
	right:0;
	top: 100px;
}
#news .news_wrap {
	width: 100%;
	margin: min(15vw, 100px) auto 0;
}
#news dl{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 auto 1em;
	padding: 0 0 1em;
	border-bottom: 2px dotted var(--base-color01);
}
#news dl:last-of-type {
	margin-bottom: 0;
}
#news dt{
	width: clamp(115px,12%,140px);
	flex-shrink: 0;
	text-align: left;
	display: flex;
	align-items: center;
}
#news dt::before {
	content: "";
	display: block;
	width: .8em;
	height: auto;
	aspect-ratio: 1/1;
	background: url(../img/cal.svg) no-repeat center center / contain;
	margin-right: .5em;
	filter: invert(62%) sepia(34%) saturate(292%) hue-rotate(146deg) brightness(93%) contrast(88%);
}
#news dd {
	width: calc(100% - clamp(115px,12%,140px));
	text-align: left;
}

#news dd a{transition: color .25s ease;}
#news dd a:hover{color: var(--base-color01);}

@media (max-width: 768px) {
	#news .more_box {
		position: static !important;
	}
	#news .view {
		margin-top: 30px;
	}
	#news dt{
		width: 100%;
	}
	#news dd{
		width: 100%;
	}
}
/***************************************
------------- COMPANY -------------
***************************************/

#company {
	margin: -200px auto 0;
}
#company .company_img {
	width: min(100%, 480px);
	aspect-ratio: 4/6;
	background: url(../img/company.webp) no-repeat top center / cover;
}
#company .row {
	align-items: center;
	gap: 50px;
}
#company .company_txt {
	padding-top: 200px;
}
#company dl{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 50px auto 0;
	padding: 0;
	border-left: 2px solid var(--base-color01);
	color: var(--base-color01);
}
#company dt{
	width: 20%;
	text-align: center;
	padding-bottom: 20px;
}
#company dd{
	width: 80%;
	text-align: left;
	padding-bottom: 20px;
}
#company dt:last-of-type {padding: 0;}
#company dd:last-of-type {padding: 0;}


@media (max-width: 768px) {
	#company { margin:0 auto; }
	#company .row {	margin: auto; }
	#company .col:nth-child(2n){ padding: 0;}
	#company dt { width: 25%; }
	#company dd { width: 75%; }
}