@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@300;400;500;700;900&display=swap');


/* =================== */
/*       pubulic       */
/* =================== */
html {
	font-size:clamp(10px, 1.04vw, 25px);
	overflow-x:hidden;
	scroll-padding-top:250px;
}
body {
	position:relative;
	-webkit-text-size-adjust:100%;
	font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 400;
  font-style:normal;
	overflow:hidden;
	background:url(../img/bg.jpg) repeat;
	background-size:100% auto;
}



main { position:relative; margin-top:6rem; }



img {
  width:100%;
  height:auto;
  max-width:100%;
}

a { transition:0.5s ease all; }


.sp-on { display:none; }

.flex-box {
	display:-webkit-box;
	display:flex;
	-webkit-box-pack:justify;
	justify-content:space-between;
	align-items:center;
}

.fadein {
	opacity:0;
	transform:translate(0, 15%);
	transition:.5s;
}
.fadein.is-show {
	transform:translate(0, 0);
	opacity:1;
}

.fadein-lt {
	opacity:0;
	transform:translate(-5%, -5%);
	transition:1s;
}
.fadein-lt.is-show {
	transform:translate(0, 0);
	opacity:1;
}
.fadein-rt {
	opacity:0;
	transform:translate(5%, -5%);
	transition:1s;
}
.fadein-rt.is-show {
	transform:translate(0, 0);
	opacity:1;
}
.fadein-lb {
	opacity:0;
	transform:translate(-5%, 5%);
	transition:1s;
}
.fadein-lb.is-show {
	transform:translate(0, 0);
	opacity:1;
}
.fadein-rb {
	opacity:0;
	transform:translate(5%, 5%);
	transition:1s;
}
.fadein-rb.is-show {
	transform:translate(0, 0);
	opacity:1;
}


.center-fade {
	transform:scale(1.2);
	opacity:0;
	transition:.8s;
}
.center-fade.is-show {
	opacity:1;
	transform:scale(1);
}
.transscaleX { opacity:0; }
.transscaleX.is-show {
    animation:transscaleX .5s ease 0s forwards;
}
@keyframes transscaleX {
  0% {
    transform:scaleX(0);
    opacity:0;
  }
  100% {
    transform:scaleX(1);
    opacity:1;
  }
}

.blur {
	filter:blur(10px);
	transition:1.5s;
}
.blur.is-show {
	filter:blur(0);
	opacity:1;
}


.in-w85 {
	width:85rem;
	margin:0 auto;
	position:relative;
}
.in-w80 {
	width:80rem;
	margin:0 auto;
	position:relative;
}
.in-w75 {
	width:75rem;
	margin:0 auto;
	position:relative;
}
.in-w60 {
	width:60rem;
	margin:0 auto;
	position:relative;
}
.max-w-box {
	max-width:2500px;
	margin:0 auto;
	position:relative;
}


h2,h3,h4 { font-weight:100; }









.kv-box {
	height:48rem;
}
.kv-box .kv-in {
	width:100%;
	height:100%;
}
.kv-box video {
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:2.5rem;
}
.kv-box img {
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:2.5rem;
}






/* =================== */
/*       main-nav      */
/* =================== */
#header {
	position:relative;
	z-index:1000;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:6rem;
	background:url(../img/head_bk.jpg) no-repeat;
	background-size:contain;
}
#header a:hover { opacity:.5; }
#header .site-logo {
	width:11rem;
	position:absolute;
	left:0;
	right:0;
	margin:0 auto;
	top:.5rem;
	transition:1s;
}
#header .site-logo .wht { display:none; }
#header .nav-wrap {
	width:100%;
	transition:1s;
	margin-top:2.8rem;
}
#header #main-nav { width:100%; }
#header #main-nav .nav { justify-content:center; width:100%; padding-right:6rem; }
#header #main-nav .nav li { margin:0 1.5rem; }
#header #main-nav .nav li:nth-child(3) { margin-right:23rem; }
#header #main-nav .nav li a {
	font-size:max(15px, 1.1rem);
	display:block;
	font-weight:bold;
	letter-spacing:.1em;
}








/* =================== */
/*         footer      */
/* =================== */
#footer .foot-in {
	position:relative;
	align-items:flex-start;
	padding:9rem 0 3rem;
}
#footer .foot-logo {
	width:11rem;
	margin:0 auto 2rem;
}
#footer .foot-nav {
	justify-content:center;
	margin-bottom:4rem;
}
#footer .foot-nav li { margin:0 1rem; }
#footer .foot-nav li a {
	display:block;
	font-size:max(15px, 1rem);
	letter-spacing:.1em;
	font-weight:bold;
}
#footer .foot-nav li a:hover { opacity:.5; }
#footer address {
	line-height:1.5;
	font-size:max(15px, 1rem);
	text-align:center;
}
#footer .deco {
	width:26.95rem;
	position:absolute;
	right:6rem;
	top:-6rem;
	z-index:1;
}
#footer .copy {
	font-size:max(13px, .7rem);
	align-items:center;
	justify-content:center;
	padding:1rem 0;
	color:#fff;
	background:#3d62ad;
}
#footer .copy .btn { margin-left:1rem; width:2.2rem; min-width:30px; }
#footer #pagetop {
  width:4rem;
  position:fixed;
  top:auto;
  bottom:1.5rem;
  right:1rem;
  z-index:300;
  line-height:0;
}
#footer #pagetop a:hover { opacity:.5; }





/* =================== */
/*      body.index     */
/* =================== */
#search {
	position:relative;
	margin:0 auto 0;
	background:url(../img/search_bk.jpg) no-repeat;
	background-size:cover;
}
.search-wrap {
	position:relative;
	z-index:1;
	min-width:830px;
	max-width:1500px;
	width:62.5%;
	height:8rem;
	min-height:90px;
	margin:0 auto 0;
	padding:.7rem 0;
}
.search-wrap .search-ttl {
	text-align:center;
	font-size:max(20px, 1.75rem);
	height:1em;
	position:absolute;
	left:3.5rem;
	top:0;
	bottom:0;
	margin:auto 0;
	z-index:2;
	color:#000;
	font-weight:bold;
	letter-spacing:.1em;
}
.search-wrap .search-box {
	height:8rem;
	padding-left:14.5rem;
	letter-spacing:0;
	padding-top:1.2rem;
	position:relative;
	z-index:1;
}
.search-wrap .search-box .search-top {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.search-wrap .search-box .form-box {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  width: 33rem;
  min-width:500px;
  margin: 0;
  font-size:max(14px, .7rem);
}
.search-wrap .search-box .line {
  display: flex;
  align-items: center;
}
.search-wrap .search-box .line.undecided {
  align-items: center;
  margin-top: 0 !important;
}
.search-wrap .search-box .line + .line {
  margin-top: 0.5em;
}
.search-wrap .search-box .line input {
  border: 0;
  display: block;
  text-align: center;
  color:#4f4f4f;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
}
.search-wrap .search-box .line .checkbox { cursor:pointer; }
.search-wrap .search-box .line .checkbox input { display:none; }
.search-wrap .search-box .line .checkbox span {
	position:relative;
	width:1.25rem;
	height:1.25rem;
	display:block;
	background:#fff;
	border:1px solid #4f4f4f;
}
.search-wrap .search-box .line .checkbox input[type="checkbox"]:checked + span::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 1px;
  display: block;
  width: .7rem;
  height: .3rem;
  border-left: .3rem solid #4f4f4f;
  border-bottom: .3rem solid #4f4f4f;
  transform: rotate(-45deg);
}
.search-wrap .search-box .ttl {
  margin-right: 0.7em;
  font-size:max(14px, .8rem);
  color:#000;
  font-weight:bold;
}
.search-wrap .search-box .check-in input {
  width: 6.25rem;
  height:1.25rem;
  min-width:80px;
  background:none;
  border-bottom:1px solid #4f4f4f;
  font-size:max(14px, .7rem);
  color:#4f4f4f;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
}
.search-wrap .search-box .select-wrap {
  padding-left: 0.2em;
  width: 6.8rem;
  height: 1.25rem;
  min-width: 100px;
  min-height: 19px;
  position: relative;
  border-bottom:1px solid #4f4f4f;
}
.search-wrap .search-box .select-wrap select {
  width:100%;
  height:100%;
  color:#4f4f4f;
  font-size:max(14px, .7rem);
  font-family: "Zen Kaku Gothic Antique", sans-serif;
}
.search-wrap .search-box .select-wrap select option { color:#4f4f4f; }
.search-wrap .search-box .select-wrap:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8.7px 5px 0 5px;
  border-color: #4f4f4f transparent transparent transparent;
  position: absolute;
  right: 5px;
  top: 50%;
  -webkit-transform: translateY(-33%);
          transform: translateY(-33%);
  display: block;
  pointer-events: none;
}
/*.search-wrap .search-box .guests {
  margin-top: 0.5em;
}*/
.search-wrap .search-box .price .ttl {
  margin-right: .7em;
}
.search-wrap .search-box .price-in {
  text-align: center;
  display: flex;
}
.search-wrap .search-box .price-in span {
  display: block;
  padding:.3em .2em;
  color:#000;
  font-weight:bold;
}
.search-wrap .search-box .search-btn {
  width:9rem;
  min-width:120px;
  margin: 0 auto 0;
  transition: 0.5s ease all;
  background:#fff;
  text-align:center;
  padding:1.2rem 0;
  border-radius:.5rem;
  margin-right:3rem;
}
.search-wrap .search-box .search-btn input {
  width:4rem;
}
.search-wrap .search-box .search-btn:hover { opacity:.7; }


#plan {
	padding:4.5rem 0 8rem;
	position:relative;
	background:url(../img/plan_bk.png) no-repeat bottom center;
	background-size:cover;
}
#plan h3 {
	width:15.4rem;
	margin:0 auto;
}
#plan h3::before {
	content:"";
	width:3.35rem;
	height:3.1rem;
	background:url(../img/ttl_deco.png) no-repeat;
	background-size:contain;
	display:block;
	margin:0 auto .5rem;
}
#plan .plan-list {
	align-items:inherit;
	margin:1.5rem auto 0;
	position:relative;
	z-index:1;
}
#plan .plan-list li {
	width:calc((100% - 6rem) / 3);
	position:relative;
}
#plan .plan-list li a {
	display:block;
	position:relative;
	box-sizing:border-box;
	border-radius:.5rem;
	height:100%;
}
#plan .plan-list li a:hover { opacity:.5; }
#plan .plan-list li .pic {
	width:100%;
	aspect-ratio:3.6/2.6;
	overflow:hidden;
	position:relative;
	z-index:2;
	border-radius:1.5rem;
}
#plan .plan-list li .pic img {
	width:100%;
	height:100%;
	object-fit:cover;
}
#plan .plan-list li .txt-box {
	position:relative;
	z-index:2;
	margin:1.5rem .5rem 0;
}
#plan .plan-list li .ttl {
	font-size:max(15px, 1rem);
	line-height:1.5;
	margin-bottom:.5rem;
	overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2;
  color:#fff;
  font-weight:bold;
}
#plan .plan-list li .txt {
	font-size:max(14px, .9rem);
	overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2;
  line-height:1.6;
  color:#fff;
}



#plan-bnr {
	margin:7.5rem auto 0;
	position:relative;
	z-index:1;
}
#plan-bnr a {
	background:url(../img/plan_bnr_btn.png) no-repeat;
	height:15rem;
	width:100%;
	background-size:contain;
	display:block;
	border-radius:7.5rem;
	display:flex;
	justify-content:center;
	align-items:center;
}
#plan-bnr a img { width:27.1rem; }
#plan-bnr a:hover { opacity:.5; }

body.index main {
	background:url(../img/main_bk.png) no-repeat center top 10rem;
	background-size:100% auto;
}

body.index #top-sec {
	padding-top:4rem;
	height:49rem;
}
body.index #top-sec .in-w60 { min-width:700px; }
body.index #top-sec h2 {
	width:5.85rem;
	position:absolute;
	top:4.5rem;
	left:21rem;
	z-index:1;
}
body.index #top-sec .deco {
	width:15.25rem;
	position:absolute;
	top:0;
	left:10rem;
}
body.index #top-sec .txt {
	color:#fff;
	font-size:max(15px, 1rem);
	line-height:2.5;
	width:max(300px, 27.5rem);
	padding-top:11rem;
	margin-left:calc(100% - max(300px, 27.5rem));
	font-weight:bold;
}
body.index #top-sec .pic {
	width:22.45rem;
	margin-left:1.5rem;
	margin-top:-10rem;
}

body.index .pickup-layout { margin-bottom:6rem; }
body.index .pickup-layout .main { width:55rem; margin-left:-5.5rem; }
body.index #pickup2 .pickup-layout .txt-box { order:1; }
body.index #pickup2 .pickup-layout .main { margin-right:-5.5rem; margin-left:0; order:2; }
body.index .pickup-layout .txt-box {
	width:calc(100% - 55rem - 5rem);
	margin:4rem auto 0;
}
body.index .pickup-layout .ttl-box { position:relative; }
body.index .pickup-layout .ttl-box .deco1 {
	width:4.9rem;
	position:absolute;
	top:-6rem;
	left:-3rem;
}
body.index .pickup-layout .ttl-box .deco2 {
	width:8.5rem;
	position:absolute;
	bottom:-2.5rem;
	right:-5rem;
}
body.index #pickup1 .pickup-layout .ttl-box h2 { width:24.45rem; }
body.index #pickup2 .pickup-layout .ttl-box h2 { width:24.4rem; }
body.index #pickup3 .pickup-layout .ttl-box h2 { width:23.8rem; }
body.index .pickup-layout .txt {
	font-size:max(15px, 1rem);
	line-height:2;
	margin:3.5rem 1rem 3rem;
}
body.index .pickup-layout .btn a {
	width:20rem;
	padding:1.9rem 0 1.8rem;
	border-radius:100vmax;
	background:#3d62ad;
	display:block;
	text-align:center;
	margin:0 auto;
}
body.index .pickup-layout .btn a img { width:14.2rem; }
body.index .pickup-layout .btn a:hover { opacity:.5; }





@media screen and (max-width: 1250px) {
	body.index #top-sec .txt { line-height:2; }
}

@media screen and (max-width: 1150px) {
	body.index #top-sec .txt { padding-top:6.5rem; }
}

@media screen and (max-width: 960px) {
	.sp-on { display:initial; }
	.pc-on { display:none; }

	.in-w80 { width:86.6%; }
	.in-w85 { width:93.3%; }
	.in-w75 { width:86.6%; }
	.in-w60 { width:86.6%; }

	html { scroll-padding-top:80px; }

	.fadein { transform:translate(0, 0); opacity:1; transition:none; }
	.center-fade img { transform:translate(0, 0); opacity:1; transition:none; }

	body { background-size:960px auto; }

	main { margin-top:50px; }

	#header { background-size:cover; height:5rem; }
	#header .nav-box { height:auto; }
	#header .site-logo { left:0; transition:none; width:8.55rem; top:7px; }
	#header.open .head-in::before { z-index:1; }
	#header.open .site-logo { width:148.5px; margin:100px auto 0; position:relative; z-index:2; }
	#header.open .site-logo .wht { display:block; }
	#header.open .site-logo .clr { display:none; }
	#header #main-nav {
		height:auto;
		width:100%;
		min-width:inherit;
		min-height:inherit;
		z-index:10;
		display:none;
	}
	#header.open .nav-wrap { display:block; margin-top:0; background:rgba(255,255,255,.95); width:100%; height:100vh; position:fixed; top:0; left:0; padding-top:220px; transition:none; }
	#header.open .nav-wrap::before {
		content:"";
		width:86.6%;
		height:calc(100vh - 14rem);
		background:#3d62ad;
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
		margin:auto;
		border-radius:2.5rem;
	}
	#header.open .nav-wrap::after {
		content:"";
		width:27.35rem;
		height:15.55rem;
		background:url(../img/nav_deco.png) no-repeat;
		background-size:contain;
		position:absolute;
		bottom:9rem;
		left:0;
		right:0;
		margin:0 auto;
	}
	#header.open #main-nav { display:block; }
	#header #hamburger {
		display:block;
		width:40px;
		height:40px;
		cursor:pointer;
		z-index:10000;
		position:fixed;
		right:3.35%;
		top:6px;
	}
	#header #hamburger .inner_line {
		display:block;
		margin:0 auto;
		width:30px;
		height:2px;
		transition:1s;
		background:#3d62ad;
		position:absolute;
		left:5px;
	}
	#header #hamburger .inner_line span { transition:all .4s; }
	#header #hamburger #line1 { top:12px; }
	#header #hamburger #line2 { top:19px; background:#000; }
	#header #hamburger #line3 { top:26px; }
	#header #hamburger.open #line1 { transform:translateY(5px) rotate(-30deg); }
	#header #hamburger.open #line2 { transform:translateY(-2px) rotate(30deg); }
	#header #hamburger.open #line3 { display:none; }
	#header #main-nav .nav { display:block; text-align:center; padding-right:0; color:#fff; position:relative; }
	#header #main-nav .nav li { margin:0 auto 20px !important; }
	#header #main-nav .nav li a { font-size:15px; }
	#header.open.fixed #hamburger { animation:none; }
	#header.open.fixed .head-in,
	#header.fixed .head-in { animation:none; }
	#header .nav-wrap { transition: none; }


  #search {
  	width:100%;
  	margin:0 auto;
  }
	.search-wrap { width:80%; max-width:600px; border-radius:7.5rem; min-width:inherit; margin:0 auto 0; height:auto; padding:30px 50px; }
	.search-wrap .in-w60 { min-width:250px; }
	.search-wrap .search-ttl {
		position:relative;
		text-align:center;
		margin:0 auto;
		border-right:0;
		font-size:20px;
		height:auto;
		position:initial;
	}
	.search-wrap .form-wrap { display:block; }
	.search-wrap .search-box { height:auto; padding-left:0; margin:0 auto; padding-top:25px; }
	.search-wrap .search-box .form-box { min-width:inherit; margin:0 auto; font-size:15px; width:auto; max-width:450px; }
	.search-wrap .search-box .line { margin-bottom:10px; align-items:flex-start; }
	.search-wrap .search-box .check-in input { width:110px; height:auto; line-height:25px; padding:0; font-size:14px; border-radius:0; }
	.search-wrap .search-box .ttl { width:6em; margin-right:0; line-height:25px; font-size:15px; }
	.search-wrap .search-box .select-wrap { padding-left:0; width:110px; height:auto; line-height:25px; }
	.search-wrap .search-box .line input[type="checkbox"] { width:25px; height:25px; margin:0; }
	.search-wrap .search-box .search-btn.sp-on { width:100%; max-width:250px; height:50px; display:block; margin:30px auto 0; }
	.search-wrap .search-box .select-wrap select { font-size:14px; }
	.search-wrap .search-box .price .ttl { margin-right:0; }
	.search-wrap .search-box .line.type { margin-left:15px; }
	.search-wrap .search-box .line.undecided { margin-left:15px; }
	.search-wrap .search-box .search-btn input { width:65px; }
	.search-wrap .search-box .search-btn { margin-top:2rem; margin-right:auto; }

	#plan h3 { width:18rem; }

	#plan-bnr a { width:600px; height:120px; margin:0 auto; }
  #plan-bnr .sp-on { display:none; }
  #plan-bnr .pc-on { display:block; }

	body.index .pickup-layout .txt { line-height:1.66; }
	body.index .pickup-layout { display:block; max-width:650px; }
	body.index .pickup-layout .main { margin:0 auto; width:100%; }
	body.index .pickup-layout .txt-box { width:100%; padding:0 30px; }
	body.index .pickup-layout .ttl-box { width:270px; margin:0 auto; }

	body.index #top-sec { height:52rem; }
	body.index #top-sec .in-w60 { min-width:inherit; max-width:650px; }
	body.index main { background-size:960px auto; }

}



@media screen and (max-width: 750px) {
	.kv-box { height:auto; }
	.kv-box video { border-radius:1.5rem; }
	#search { margin:20px auto 0; background:none; background:url(../img/search_bk_sp.jpg) no-repeat; background-size:cover; }
	.search-wrap { padding:40px 20px 30px; background:none; border-radius:0; }
	.search-wrap .search-ttl { font-size:20px; }
  .search-wrap .search-box .search-top { display:block; }
  .search-wrap .search-box .form-box { display:block; width:200px; }
  .search-wrap { width:86.6%; }
  .search-wrap .search-box .price-in { display:block; }
  .search-wrap .search-box .price-in span { padding:5px 0; transform:rotate(270deg); }
  .search-wrap .search-box .line.type { margin-left:0; }
  .search-wrap .search-box .line.undecided { margin-left:0; }
  .search-wrap .search-box .search-btn { width:90%; margin-top:30px; padding:15px 0; }

  #plan { height:auto; padding-top:30px; padding-bottom:180px; background:url(../img/plan_bk_sp.png) no-repeat bottom center; background-size:cover; }
  #plan .plan-list { display:block; width:70%; margin-top:20px; }
  #plan .plan-list li { width:100%; margin:0 auto 25px !important; }
  #plan .plan-list li .ttl { margin:0 0 5px; line-height:1.3; }
  #plan .plan-list li .txt { -webkit-line-clamp:2; line-height:1.5; }

  #plan-bnr { margin:45px auto 0; width:350px; }
  #plan-bnr .sp-on { display:block; }
  #plan-bnr .pc-on { display:none; }
  #plan-bnr a { width:350px; height:150px; background:url(../img/plan_bnr_btn_sp.png) no-repeat; background-size:cover; }

  #footer .deco { width:225px; right:15px; top:-30px; }
  #footer .foot-logo { width:148px; margin-bottom:35px; }
  #footer .foot-nav { display:block; }
  #footer .foot-nav li { margin:0 0 20px; text-align:center; }

  body.index main {
    background: url(../img/main_bk_sp.png) no-repeat center top 6rem;
    background-size:100% auto;
  }
  body.index #top-sec { padding-top:2rem; height:auto; }
  body.index #top-sec h2 { position:relative; top:inherit; left:inherit; padding-left:25px; box-sizing:content-box; margin:0 auto; padding-top:40px; }
  body.index #top-sec .deco { left:3rem; }
  body.index #top-sec .txt { padding-top:30px; width:calc(100% - 40px); margin:0 auto; line-height:1.66; }
  body.index #top-sec .pic { margin:-5px auto -20px; box-sizing:content-box; padding-left:30px; }
  body.index .pickup-layout { margin-bottom:50px; }
  body.index .pickup-layout .txt { margin:35px 5px 20px; }
  body.index .pickup-layout .txt-box { margin-top:30px; }

}