@charset "UTF-8";
/* CSS Document */
/* ========================================
   Common
======================================== */
:root {
  --navy: #0f1f3a;
  --navy2: #102844;
  --gold: #c9a063;
  --paper: #fff;
  --header-h: 72px;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h));
}
body {
  color: var(--navy);
  background: #fff;
  font-family: "Noto Sans JP", sans-serif;
}
img {
  width: 100%;
}
/* ============================================================
   UTILITY
============================================================ */
.forPc {
  display: block;
}
.forMobile {
  display: none;
}
@media (max-width: 767px) {
  .forPc {
    display: none;
  }
  .forMobile {
    display: block;
  }
}
/* ========================================
   Fade animation
======================================== */
.fadeIn, .fadeInUp {
  opacity: 0;
  transition:
    opacity 2.9s ease, transform 2.9s cubic-bezier(.22, 1, .36, 1);
}
.fadeIn {
  transform: none;
}
.fadeInUp {
  transform: translateY(30px);
}
.fadeIn.is-show, .fadeInUp.is-show {
  opacity: 1;
  transform: translateY(0);
}
/* Delay */
.delay01 {
  transition-delay: .15s;
}
.delay02 {
  transition-delay: .3s;
}
.delay03 {
  transition-delay: .45s;
}
.delay04 {
  transition-delay: .6s;
}
/* ========================================
   Reduced motion
======================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .fadeIn, .fadeInUp {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ========================================
   Shared section components
======================================== */
.sectionInner {
  width: min(1180px, 90%);
  margin-inline: auto;
}
.sectionBlock {
  padding: 4.5rem 0;
}
.sectionBlock--soft {
  background: #faf9f7;
}
.sectionBlock--navy {
  background: var(--navy);
  color: #fff;
}
.sectionHeading {
  margin-bottom: 2rem;
}
.sectionHeading--left {
  text-align: left;
}
.sectionHeading--light {
  color: #fff;
}
.sectionLabel {
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--gold);
  margin-bottom: .35rem;
}
.sectionHeading h2 {
  font-family: "Shippori Mincho", serif;
  font-size: clamp(100%, 2.4vw, 200%);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .04em;
}
.headingBasic {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  margin-bottom: .45rem;
}
.sectionHeadingLine {
  display: block;
  width: 6rem;
  height: 2px;
  margin: .75rem 0 0;
  background: var(--gold);
}
.sectionHeading--left .sectionHeadingLine {
  margin-left: 0;
}
.textLink {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-top: 1.5rem;
  font-weight: 700;
  border-bottom: 1px solid currentColor;
  padding-bottom: .2rem;
}
.textLink i {
  font-size: .75em;
}
.textLink--light {
  color: #fff;
}
@media (max-width: 600px) {
  .sectionInner {
    width: min(100% - 40px, 1180px);
  }
  .sectionBlock {
    padding: 3.25rem 0;
  }
  .sectionHeading h2 {
    font-size: clamp(120%, 5vw, 200%);
  }
  .sectionHeading {
    margin-bottom: 1.4rem;
  }
}

/* ========================================
   Shared buttons
======================================== */
.buttonLink {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	min-height: 3rem;
	padding: 0 1.4rem;
	margin-top: 1.4rem;
	border: 1px solid var(--gold);
	border-radius: 999px;
	color: var(--gold);
	font-weight: 700;
	background: #fff;
	transition: background .25s ease, color .25s ease, transform .25s ease;
}
.buttonLink:hover {
	background: var(--gold);
	color: #fff;
	transform: translateY(-1px);
}
.buttonLink i {
	font-size: .75em;
}

/* ========================================
   Shared Reservation CTA
======================================== */
.finalCta {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0;
	border-radius: 0;
	color: #fff;
	background: var(--navy);
}

.finalCtaInner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 6vw;
	align-items: center;
	min-height: 500px;
	padding-block: 4.5rem;
}

.finalCtaCopy {
	max-width: 650px;
}

.finalCta .sectionLabel {
	margin-bottom: .55rem;
}

.finalCtaBasic {
	font-weight: 700;
	letter-spacing: .08em;
	margin-bottom: 1.3rem;
}

.finalCta h2 {
	font-family: "Shippori Mincho", serif;
	font-size: clamp(180%, 3.2vw, 300%);
	font-weight: 600;
	line-height: 1.3;
    letter-spacing: .035em;
    padding-bottom: 1rem;
}

.finalCtaLine {
	display: block;
	width: 4rem;
	height: 2px;
	margin: 1.6rem 0 1.45rem;
	background: var(--gold);
}

.finalCtaNote {
	color: rgba(255, 255, 255, .78);
	line-height: 1.9;
}

.finalCtaActions {
	display: grid;
	gap: 1rem;
}

.finalReserve,
.finalPhone {
	position: relative;
	display: grid;
	grid-template-columns: 2.2rem 1fr auto;
	gap: 1.1rem;
	align-items: center;
	min-height: 112px;
	padding: 0 2rem;
	border-radius: 4px;
	transition:
		transform .25s ease,
		box-shadow .25s ease,
		background .25s ease,
		border-color .25s ease;
}

.finalReserve {
	color: #fff;
	font-weight: 700;
	background:
		linear-gradient(135deg, #d7b66e 0%, #c99c52 100%);
	border: 1px solid rgba(255, 255, 255, .34);
	box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
}

.finalPhone {
	color: #fff;
	border: 1px solid rgba(201, 160, 99, .9);
	background: rgba(255, 255, 255, .015);
}

.finalReserve > i:first-child,
.finalPhone > i:first-child {
	font-size: 170%;
}

.finalReserve > span {
	font-size: 125%;
}

.finalPhone > span {
	font-family: "Shippori Mincho", serif;
	font-size: clamp(150%, 2.2vw, 220%);
	letter-spacing: .02em;
	white-space: nowrap;
}

.finalReserve > .fa-chevron-right,
.finalPhone > .fa-chevron-right {
	font-size: 90%;
}

.finalPhone > i:first-child,
.finalPhone > .fa-chevron-right {
	color: var(--gold);
}

@media (hover: hover) {
	.finalReserve:hover {
		transform: translateY(-2px);
		box-shadow: 0 16px 34px rgba(0, 0, 0, .18);
	}

	.finalPhone:hover {
		transform: translateY(-2px);
		background: rgba(255, 255, 255, .055);
		border-color: #e0bb78;
	}
}

@media(max-width:900px) {
	.finalCtaInner {
		grid-template-columns: 1fr;
		gap: 2.2rem;
		min-height: 0;
		padding-block: 3.5rem;
	}

	.finalCtaCopy {
		max-width: none;
	}

	.finalCtaActions {
		max-width: 680px;
	}

	.finalCta::before {
		right: -16%;
		bottom: -24%;
		width: 82%;
	}
}

@media(max-width:600px) {
	.finalCtaInner {
		width: calc(100% - 40px);
		padding-block: 2.6rem;
		gap: 1.8rem;
	}

	.finalCta h2 {
		font-size: clamp(150%, 7vw, 220%);
		line-height: 1.55;
	}

	.finalCtaBasic {
		margin-bottom: 1rem;
	}

	.finalCtaLine {
		margin: 1.2rem 0;
	}

	.finalCtaNote br {
		display: none;
	}

	.finalReserve,
	.finalPhone {
		min-height: 74px;
		padding: 0 1rem;
		grid-template-columns: 1.8rem 1fr auto;
		gap: .75rem;
	}

	.finalReserve > span {
		font-size: 105%;
	}

	.finalPhone > span {
		font-size: clamp(120%, 6vw, 165%);
	}

	.finalReserve > i:first-child,
	.finalPhone > i:first-child {
		font-size: 130%;
	}

	.finalCta::before {
		right: -30%;
		bottom: -10%;
		width: 120%;
		opacity: .2;
	}
}
.finalCtaLogo {
	display: block;
	width: min(180px, 42%);
	height: auto;
	margin-bottom: 1.25rem;
	filter: brightness(0) invert(1);
}
@media(max-width:600px) {
	.finalCtaLogo {
		width: min(200px, 50%);
		margin-bottom: 1rem;
	}
}

/* ==========================================================
   FOOTER
   ========================================================== */

.siteFooter {
  background: #fff;
  border-top: 1px solid #ece8e2;
}

.footerInner {
  padding-top: 2rem;
}

.footerNav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #ece8e2;
}

.footerNavMain,
.footerNavSub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .7rem 1.4rem;
}

.footerNav a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #5f6872;
  font-size: .72rem;
  line-height: 1.6;
  text-decoration: none;
  transition: color .2s ease;
}

.footerNav a::before {
  content: "›";
  color: var(--gold);
  font-size: .82em;
  line-height: 1;
  transform: translateY(-.02em);
}

.footerNavMain a {
  color: var(--navy);
  font-weight: 600;
}

.footerNavSub a {
  color: #8a8f94;
  font-size: .68rem;
}

.footerNav a:hover {
  color: var(--gold);
}

#crArea {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 24px;
  box-sizing: border-box;
  color: #999;
  font-size: 10px;
  font-weight: 400;
  text-align: left;
}

#crArea p {
  margin: 0;
}

#crArea a {
  color: #999 !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  text-decoration: none;
}

#crArea a:hover {
  color: #222 !important;
}

@media (max-width: 800px) {
  .footerNav {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }
}

@media (max-width: 600px) {
  .footerInner {
    padding-top: 1.5rem;
  }

  .footerNavMain {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: .65rem 1rem;
  }

  .footerNavSub {
    gap: .6rem 1.2rem;
  }

  .footerNav a {
    font-size: .7rem;
  }

  .footerNavSub a {
    font-size: .65rem;
  }

  #crArea {
    padding: 16px 0 22px;
  }
}