@charset "UTF-8";

:root {
  --white: #FFF;
	--beige: #EBE6DF;
  --black: #3C0A07;
  --color1: #84A0B7;
  --color2: #3C0A07;
  --color3: #70753F;
	--lavender: #ECDCEC;

	--font1: sofia-pro, sans-serif;
	--font2: sofia-pro, sans-serif;
}



html {
  font-size: min(3.46vw, 14px);
}
body {
  font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  /*font-weight: 300;*/
  line-height: 2;
  letter-spacing: .05em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--beige);
  color: var(--black);
}

/* ==========================================================================
   Loading
========================================================================== */
#container {
  opacity: 0;
  transition: opacity 1.4s .2s;
  width: 100%;
  overflow: hidden;
  position: relative;
}
body.loaded #container {
  opacity: 1 !important;
}


/*  Animation
================ */
.iv {
  opacity: 0;
  filter: blur(1rem);
  transition: .5s ease-out;
  transition-property: opacity, filter;
}
.iv.show {
  opacity: 1;
  filter: blur(0);
}
@keyframes fadeinup {
  0% {
    opacity: 0;
    filter: blur(1rem); }
  100% {
    opacity: 1;
    filter: blur(0); }
}

/* =========================================
   Layout
============================================ */
section {
	position: relative;
}
.section {
	margin-top: 6em;
	margin-bottom: 6em;
}
.section-p {
	padding-top: 6em;
	padding-bottom: 6em;
}
.content {
	margin-top: 2.5em;
	margin-bottom: 2.5em;
}
.content-p {
	padding-top: 2.5em;
	padding-bottom: 2.5em;
}
@media (min-width: 992px){
	.section {
		margin-top: 10em;
		margin-bottom: 10em;
	}
	.section-p {
		padding-top: 10em;
		padding-bottom: 10em;
	}
	.content {
		margin-top: 3em;
		margin-bottom: 3em;
	}
	.content-p {
		padding-top: 3em;
		padding-bottom: 3em;
	}
}


@media (max-width: 575px){
	.container, .row {
	  --bs-gutter-x: 16vw;
	}
}
ul.row {
  list-style-type: none;
}

.form-wrap {
	max-width: 50em;
	margin-right: auto;
	margin-left: auto;
}


@media (max-width: 991px){
	.pc {	display: none; }
}
@media (min-width: 992px){
	.sp { display: none; }
}

/* =========================================
   Image
============================================ */
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
svg {
	fill: currentColor;
	vertical-align: middle;
}

/* =========================================
   Headline
============================================ */
h1,h2,h3,h4,h5,h6 {font-weight: 500}
.huge {
	font-size: 2.857em;
}
h1,.h1 {
	font-size: 2.143em;
	line-height: 1.5;
}
h2,.h2 {
	font-size: 1.857em;
	line-height: 1.5;
}
h3,.h3 {
	font-size: 1.714em;
}
h4,.h4 {
	font-size: 1.429em;
}
h5,.h5 {
	font-size: 1.286em;
}
h6,.h6 {
	font-size: 1.143em;
}
small, .small {
	font-size: .846em;
}
@media (min-width: 992px){
	.huge_pc {
		font-size: 2.857em;
	}
	h2,.h2 {
		font-size: 2.143em;
	}
	h3,.h3 {
		font-size: 1.857em;
	}
}


p {
	margin-bottom: 1.25em;
}

.en_ttl, .font1 {
	font-family: var(--font1);
	font-weight: 500 !important;
}
.en, .font2 {
	font-family: var(--font2);
	font-weight: 300 !important;
	line-height: 1.75;
}
.serif {
	font-family: 'Noto Serif JP', serif;
}
.sans-serif {
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}

.section-header {
	margin-bottom: 3em;
}
.section-header .en_ttl {
	line-height: 1;
}
.section-header .ttl {
	display: block;
	font-weight: 500;
	margin-top: 10px;
}

@media (min-width: 992px) {
	.read {
		text-align: center;
	}
}

.text-center {
	text-align: center;
}

/* =========================================
   Button
============================================ */
a {
	text-decoration: none;
	transition-duration: .2s;
	transition-property: opacity, color, border, background;
}
a:hover {
	opacity: .5;
}

.underline {
	text-decoration: underline;
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.143rem;
  font-weight: 500;
  font-family: inherit;
  line-height: 1.5;
  letter-spacing: .05em;
  padding: 1em;
  width: 18.75em;
  max-width: 100%;
  background-color: var(--color2);
  border: 1px solid transparent;
  color: var(--white);
  border-radius: 0;
  text-decoration: none !important;
  outline: none;
  cursor: pointer;
  position: relative;
  transition: all .2s ease-in-out;
}
.btn:hover {
  background-color: var(--color1);
  opacity: 1!important;
}
.btn.btn_b {
  background-color: transparent;
  border-color: currentColor;
  color: currentColor;
}
.btn.btn_b:hover {
  background-color: rgba(0,0,0,0.075);
}

.btn span[data-en] {
  display: block;
}
.btn span[data-en]::after {
  content: attr(data-en);
  display: block;
  font-family: var(--font1);
  font-size: .75em;
  font-weight: 400;
}



.buttons.row .btn {
	width: 100%;
	margin-bottom: 1.25em;
}
.buttons.row > *:last-child .btn {
	margin-bottom: 0;
}

/* =========================================
   Link
============================================ */
.i-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}
.i-link svg {
	width: 1.25em;
	height: 1.25em;
	margin-right: .5em;
}
.i-link._map {
	font-family: var(--font1);
}
.i-link._map svg {
	width: .75em;
}
.i-link._youtube {
	font-weight: 600;
}

.exlink {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}
.exlink svg {
	width: .917em;
	height: .917em;
	margin-left: .5em;
}

.more {
	text-align: right;
	font-weight: 500;
	margin-bottom: 0;
}
.more > a,
.more > span {
	display: inline-flex !important;
	align-items: center;
	text-decoration: none;
	/*color: var(--color1);*/
	font-family: var(--font1);
}
.more > a::before,
.more > span::before {
	content: '';
	display: block;
	width: 2em;
	height: 1px;
	margin-right: .5em;
	background: currentColor;
}


/* =========================================
   Card
============================================ */
a.card {
	display: block;
	opacity: 1 !important;
	text-decoration: none;
}
.cards {
	list-style-type: none;
}
.cards.row > .content {
	margin-top: 0;
}
.cards.row > .content:last-child {
	margin-bottom: 0;
}
.card picture {
	display: block;
	width: 100%;
	aspect-ratio: 12/7;
	overflow: hidden;
}
.card picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.0);
	transition: transform .6s ease-in-out;
}
a.card:hover picture img {
	transform: scale(1.15);
}
.card .en_ttl {
	margin: 1.25em 0 .75em;
}
.card.row .en_ttl {
	margin-bottom: .5em;
}
.card p {
	margin-bottom: .5em;
}
@media (min-width: 768px){
	.card.row .en_ttl {
		margin-top: 0;
	}
}


/* =========================================
   Slider
============================================ */
.splide__track {
	overflow: visible;
}
.splide__list {
	height: auto;
}
.splide__slide {
	border: 0 !important;
}
.splide__slide picture,
.splide__slide picture img {
	width: 100%;
}
.splide__arrow {
  width: 2.85em;
  height: 2.85em;
  opacity: 1;
  background: var(--beige);
}
.splide__arrow svg {
  fill: var(--color1);
  height: .75em;
  width: .75em;
}
.splide__arrow--next {
  right: calc(-2.85em/2);
}
.splide__arrow--prev {
  left: calc(-2.85em/2);
}
.splide__progress {
	background: transparent;
	width: 100%;
	height: 2px;
	margin: 3em 0 0;
	position: relative;
}
.splide__counter .splide__progress {
	width: 100%;
	height: 1px;
	margin: 0;
}
.splide__progress::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: currentColor;
	opacity: .3;
	position: absolute;
	top: 0;
	left: 0;
}
.splide__progress__bar {
	background: currentColor;
	height: 100%;
	transition: width .6s ease;
	width: 0;
}

.slider-controller {
	width: 100%;
	position: absolute;
	bottom: -3em;
}

/* =========================================
   Color
============================================ */
.color1 {
	color: var(--color1);
}
.color2 {
	color: var(--color2);
}

/* =========================================
   Navigation
============================================ */
nav ul li a {
	text-decoration: none;
}

/* =========================================
   Header
============================================ */
#siteHeader {
	color: var(--white);
	width: 100%;
	height: 90px;
	padding-left: 2em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 888;
	transition: .1s;
	transition-property: color, padding;
}
#siteHeader .logo {
	display: block;
	width: 130px;
	padding: 10px 0;
	font-size: 1em;
	line-height: 1;
	margin: 0;
}
#siteHeader .logo img {
	display: block;
	width: 100%;
}
@media (min-width: 992px){
	#siteHeader {
		height: 120px;
		padding-left: 2.5em;
	}
	#siteHeader .logo {
		width: 160px;
	}
}



#siteHeader .gNav nav ul.primary-menu {
	font-family: var(--font1);
	font-weight: 500;
	line-height: 1.5;
}
#siteHeader .gNav nav ul.primary-menu li {
	margin-bottom: .6em;
}
#siteHeader .gNav nav ul li a:not(.btn) {
	display: inline-flex;
	letter-spacing: .2em;
}


#siteHeader .gNav {
	width: 100%;
	height: 100dvh;
	overflow-y: auto;
	background: var(--color1);
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	transition: transform .4s;
}
#siteHeader .gNav .inner {
	padding: 5em 0;
	opacity: 0;
	transform: translateY(-2rem);
	transition: transform .5s, opacity .5s;
}
#siteHeader .gNav.on .inner {
	opacity: 1;
	transform: translateY(0);
}
#siteHeader .gNav nav {
	width: min(100%, 24em);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#siteHeader .gNav nav ul.primary-menu {
	font-size: 1.538em;
}
#siteHeader .gNav nav .nav-info dl dd {
	margin-bottom: 1.5em;
}
#siteHeader .gNav nav .nav-info .sns-menu {
	font-family: var(--font1);
	font-weight: 500;
	margin: 1.5em 0;
}
#siteHeader .gNav nav ul.reserve-menu {
	margin-top: 1.25em;
}
#siteHeader .gNav nav .nav-footer {
	font-family: var(--font1);
	font-weight: 500;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 2.75em;
}
@media (max-width: 767px){
	#siteHeader .gNav nav .nav-info dl {
		display: none;
	}
}
@media (min-width: 768px){
	#siteHeader .gNav nav {
		width: min(90%, 76em);
		flex-wrap: wrap;
		flex-direction: row;
	}
	#siteHeader .gNav nav ul.primary-menu {
		flex: 0 0 45%;
	}
	#siteHeader .gNav nav .nav-info {
		flex: 0 0 55%;
	}
	#siteHeader .gNav nav ul.reserve-menu {
		flex: 0 0 calc(100% + var(--bs-gutter-x));
		margin: 2em 0 .5em;
	}
	#siteHeader .gNav nav .nav-footer {
		flex: 0 0 100%;
		margin-top: 1.5em;
	}
	#siteHeader .gNav nav .nav-info .sns-menu {
		display: flex;
		gap: 3%;
		margin: 3em 0 1.5em;
	}
}
@media (min-width: 992px){
	#siteHeader .gNav nav ul.primary-menu {
		font-size: 2em;
		flex: 0 0 50%;
	}
	#siteHeader .gNav nav .nav-info {
		flex: 0 0 50%;
	}
}



/* Nav Btn */
.nav-btn {
	font-family: var(--font1);
	color: inherit;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 90px;
	height: 90px;
	line-height: 1;
	cursor: pointer;
	position: fixed;
	top: 0;
	right: 0;
	transition: .1s;
}
#siteHeader.fixed .nav-btn:not(.on) {
	color: var(--black);
}
.nav-btn i{
  display: block;
  background: currentColor;
  width: 41.6666%;
  height: 2px;
  position: absolute;
  right: 0;
  left: 0;
  margin: -1px auto 0;
  transition: transform .3s, top .2s .3s;
}
.nav-btn i:nth-of-type(1){
  top: calc(50% - 5px);
}
.nav-btn i:nth-of-type(2){
  top: calc(50% + 5px);
}
.nav-btn.on i{
  transition: transform .3s .3s, top .2s;
}
.nav-btn.on i:nth-of-type(1){
  top: 50%;
  transform: rotate(45deg);
}
.nav-btn.on i:nth-of-type(2){
  top: 50%;
  transform: rotate(-45deg);
}
@media (min-width: 992px){
	.nav-btn {
		width: 120px;
		height: 120px;
	}
}



.fixedBtn {
	background: var(--color1);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font1);
	font-size: 1.143em;
	width: 100%;
	text-align: center;
	line-height: 4.286rem;
	font-weight: 500;
	text-decoration: none;
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 666;
}
.fixedBtn svg {
	position: absolute;
	left: 1.5em;
}
@media (min-width: 576px) and (orientation: landscape){
	.fixedBtn {
		width: 300px;
	}
}

/* =========================================
   Page header
============================================ */
#pageHeader {
	height: 500px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	color: var(--white);
}

/* =========================================
   Footer
============================================ */
#siteFooter {
	width: 100%;
	background: var(--black);
	color: var(--lavender);
	padding-top: 7.14em;
	font-family: var(--font1);
	position: relative;
}
#siteFooter a {
	text-decoration: none;
}
#siteFooter .footer-info .logo {
	display: inline-block;
	width: 200px;
	margin-bottom: 2em;
}
#siteFooter .footer-info .sns-menu {
	font-weight: 500;
	margin-bottom: 3%;
}
#siteFooter .fNav nav ul li a {
	display: inline-block;
	line-height: 1.5;
	padding: .5em 0;
}
#siteFooter .fNav nav ul.primary-menu li a {
	font-size: 1.143em;
	font-weight: 500;
}
#siteFooter .fNav nav ul.group-menu {
	margin: 3% 0;
}
#siteFooter .fNav nav ul.group-menu li a {
	font-size: .857em;
}
#siteFooter .copyright {
	font-size: .786em;
}
#siteFooter .cop-footer {
	background: var(--beige);
	color: var(--black);
	margin-top: 7.14em;
	padding: 3.57em 0;
}
#siteFooter .cop-footer .link {
	font-size: .857em;
	font-weight: 500;
}
@media (max-width: 767px){
	#siteFooter .cop-footer {
		text-align: center;
	}
	#siteFooter .cop-footer .link {
		margin-top: 1.5em;
	}
}
@media (min-width: 992px){
	#siteFooter .footer-menu {
		text-align: right;
	}
	#siteFooter .fNav nav ul {
		display: flex;
		justify-content: flex-end;
		gap: 3%;
	}
	#siteFooter .cop-footer {
		padding: 2em 0;
	}
}