@charset "utf-8";

/* banner__residence
-------------------------------------------------- */
.banner__residence {
	position: sticky;
	display: block;
	left: min(calc(50% + 680px - 220px), calc(100vw - 275px));
	top: 95px;
	width: 200px;
	transition: opacity 1.4s cubic-bezier(.22, .61, .36, 1), filter 1.4s cubic-bezier(.22, .61, .36, 1), visibility 1.4s;
	opacity: 0;
	filter: blur(4px);
	visibility: hidden;
	z-index: 2;
}
.banner__residence.isShow {
	opacity: 1;
	filter: blur(0);
	visibility: visible;
}

@media (min-width: 768px) {
	.banner__residence--sp {
		display: none;
	}
}

@media (max-width: 767px) {
	.banner__residence--sp {
		display: block;
		width: 90.6666vw;
		height: 20vw;
		margin: 8vw auto 0;
		z-index: 11;
	}
}


/* kvBlk
-------------------------------------------------- */
.kvBlk {
	position: relative;
	width: 100%;
	padding-top: 80px;
}
.kvBlk__title,
.kvBlk__logo {
	position: absolute;
	left: 50%;
	z-index: 2;
	transition: opacity 1.5s ease-out, transform 1.5s cubic-bezier(.22, .61, .36, 1), filter 1.5s ease-out;
	opacity: 0;
	filter: blur(6px);
}
.kvBlk__title {
	top: 35%;
	width: 18.6765%;
	transform: translate(-50%,0);
	transition-delay: .5s;
}
.kvBlk__logo {
	bottom: 22.5%;
	width: 26.3971%;
	transform: translate(-50%,10%);
	transition-delay: 1s;
}
.kvBlk._action .kvBlk__title,
.kvBlk._action .kvBlk__logo {
	transform: translate(-50%,0);
	opacity: 1;
	filter: blur(0);
}
.kvBlk__image {
	position: relative;
	z-index: 1;
	transition: filter 1.2s ease-out, transform 1.2s ease-out;
	filter: brightness(1.18);
}
.kvBlk._action .kvBlk__image {
	filter: brightness(1);
}

@media (max-width: 767px) {
	.kvBlk {
		padding-top: 17.3333vw;
	}
	.kvBlk__title {
		top: 46.5333vw;
		width: 41.8667vw;
	}
	.kvBlk__logo {
		bottom: 18.5vw;
		width: 59.2vw;
	}
}

/* conceptBlk
-------------------------------------------------- */
.conceptBlk {
	position: relative;
	padding-top: 60px;
	background: #F3F9F9;
}
.conceptBlk__copy {
	position: relative;
	font-size: 1.6rem;
	text-align: center;
	letter-spacing: 0.3em;
	line-height: 2.75;
	z-index: 2;
}
.conceptBlk__scrollImage {
	display: flex;
	width: 100%;
	margin-top: 70px;
	overflow: hidden;
}
.conceptBlk__scrollTrack {
  display: flex;
	width: max-content;
  animation: slide-flow 60s infinite linear 1s both;
	will-change: transform;
}
.conceptBlk__scrollItem{
	flex: 0 0 auto;
}
.conceptBlk__scrollItem img {
  display: block;
  width: auto;
  height: clamp(180px, 32vw, 420px);
}
[class^="conceptBlk__wing"] {
	position: absolute;
	opacity: 0;
	transition: transform 1s ease-in-out, opacity .5s ease-in-out;
	z-index: 1;
}
[class^="conceptBlk__wing"]._action {
	opacity: 1;
	transform: translate(0,0);
}
.conceptBlk__wing1 {
	left: -2.9411%;
	top: 15.7647%;
	width: 27.7941%;
	transform: translateY(-5px,-15px);
}
.conceptBlk__wing2 {
	left: 22.7941%;
	top: 15.4558%;
	width: 8.897%;
	transition-delay: .5s;
}
.conceptBlk__wing3 {
	right: 14.9117%;
	top: -7.4117%;
	width: 19.4852%;
	transform: translate(5px,-10px);
}
.conceptBlk__wing1 img {
	animation: wingFloat1 6.8s ease-in-out infinite;
	transform-origin: 35% 65%;
	will-change: transform;
}
.conceptBlk__wing2 img {
	animation: wingFloat2 5.9s ease-in-out infinite .4s;
	transform-origin: 45% 60%;
	will-change: transform;
}
.conceptBlk__wing3 img {
	animation: wingFloat3 7.4s ease-in-out infinite .2s;
	transform-origin: 55% 55%;
	will-change: transform;
}

@keyframes slide-flow {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

@keyframes wingFloat1 {
	0%, 100% {
		transform: translate3d(0, 0, 0) rotate(-1.8deg) scale(1.04);
	}
	50% {
		transform: translate3d(1.2%, -3.8%, 0) rotate(1.6deg) scale(1.09);
	}
}

@keyframes wingFloat2 {
	0%, 100% {
		transform: translate3d(0, 0, 0) rotate(1.6deg) scale(0.94);
	}
	50% {
		transform: translate3d(-1.3%, -4.4%, 0) rotate(-1.9deg) scale(0.88);
	}
}

@keyframes wingFloat3 {
	0%, 100% {
		transform: translate3d(0, 0, 0) rotate(-1.3deg) scale(1);
	}
	50% {
		transform: translate3d(1.8%, -3.2%, 0) rotate(2.1deg) scale(1.04);
	}
}

@media (max-width: 767px) {
	.conceptBlk {
		padding-top: 17.3333vw;
	}
	.conceptBlk__copy {
		font-size: 3.2vw;
	}
	.conceptBlk__scrollImage {
		margin-top: 17.5vw;
	}
	.conceptBlk__scrollTrack {
		animation-duration: 40s;
	}
	.conceptBlk__scrollItem {
    width: 357.3333vw;
  }
	.conceptBlk__scrollItem img {
    height: 56.8vw;
  }
	.conceptBlk__wing1 {
		left: -10.6666vw;
		top: 75.7333vw;
		width: 35.46667vw;
	}
	.conceptBlk__wing2 {
		left: 22.7941%;
		top: 8.4558%;
		width: 8.897%;
	}
	.conceptBlk__wing3 {
		right: 2vw;
		top: -9vw;
		width: 32.6667vw;
	}
}


/* newsBlk
-------------------------------------------------- */
.newsBlk {
	padding: 115px 5.8823%;
}
.newsBlk__list {
	border-bottom: 1px solid #E9E6EF;
}

.newsBlk__listItem {
	position: relative;
	padding: 35px 15px;
	border-top: 1px solid #E9E6EF;
}
.newsBlk__listItem::before {
	content: "";
  position: absolute;
  right: 40px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 1px solid #BEB9C8;
  border-right: 1px solid #BEB9C8;
  transform: translateY(-50%) rotate(45deg);
}
.newsBlk__listItem::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 20px;
	width: 44px;
	height: 44px;
	border: 1px solid #BEB9C8;
	border-radius: 50%;
	transform: translateY(-50%);
}
.newsBlk__list a.noLink {
	pointer-events: none;
}
.newsBlk__list a.noLink::before,
.newsBlk__list a.noLink::after {
	width: 0;
	height: 0;
	border: none;
}
.newsBlk__listDate {
	font-size: 1.4rem;
	color: #8AB6B6;
}
.newsBlk__listText {
	font-size: 1.4rem;
}

@media (hover: hover) {
	.newsBlk__list a {
		transition: background .5s ease-in;
		opacity: 1;
	}
	.newsBlk__list a:hover {
		background: #7EA6AC;
	}
	.newsBlk__list a:hover .newsBlk__listDate,
	.newsBlk__list a:hover .newsBlk__listText {
		color: #fff;
	}
	.newsBlk__list a:hover::before,
	.newsBlk__list a:hover::after {
		border-color: #fff;
	}
}

@media (min-width: 768px) {
	.newsBlk__inner {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}
	.newsBlk__list {
		width: 83.3333%;
		max-width: 1000px;
	}
	.newsBlk__listItem {
		display: flex;
		gap: 7.5%;
	}
}

@media (max-width: 767px) {
	.newsBlk {
		padding: 17.3333vw 4vw;
	}
	.newsBlk__list {
		margin-top: 6.6667vw;
	}
	.newsBlk__listItem,
	.newsBlk__listText {
		display: block;
	}
	.newsBlk__listItem {
		padding: 5.3333vw 0;
	}
	.newsBlk__listItem::before {
		right: 4.1666vw;
		width: 1.3333vw;
		height: 1.3333vw;
	}
	.newsBlk__listItem::after {
		right: 0;
		width: 9.3333vw;
		height: 9.3333vw;
	}
	.newsBlk__listDate {
		font-size: 2.9333vw;
	}
	.newsBlk__listText {
		margin-top: 3.2vw;
		font-size: 3.4667vw;
	}
}


/* ourStoryBlk
-------------------------------------------------- */
.ourStoryBlk {
	padding: 90px 5.8823%;
	background: #F3F9F9;
}
.ourStoryBlk__box {
	width: 100%;
	padding: 5%;
	margin-top: 60px;
	background: #fff;
}
.ourStoryBlk__title {
	max-width: 407px;
	text-align: center;
}
.ourStoryBlk__title.logo {
	max-width: 364px;
}
.ourStoryBlk__title--text {
	display: block;
	margin-top: 20px;
	font-size: 1.8rem;
}
.ourStoryBlk__detail dt {
	font-family: "Zen Old Mincho", serif;
	font-size: 2.2rem;
}
.ourStoryBlk__detail dd {
	margin-top: 40px;
	font-size: 1.6rem;
	line-height: 2.25;
}

@media (min-width: 768px) {
	.ourStoryBlk__box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 5%;
		min-height: 355px;
	}
	.ourStoryBlk__detail {
		flex: 0 0 auto;
		width: 50%;
	}
}

@media (max-width: 767px) {
	.ourStoryBlk {
		padding: 17.3333vw 4vw;
	}
	.ourStoryBlk__box {
		margin-top: 6.6667vw;
		padding: 16.6666vw 5.3333vw 5.3333vw;
	}
	.ourStoryBlk__box + .ourStoryBlk__box {
		margin-top: 4vw;
	}
	.ourStoryBlk__title--text {
		margin-top: 4vw;
		font-size: 2.9333vw;
	}
	.ourStoryBlk__detail {
		margin-top: 16.6666vw;
	}
	.ourStoryBlk__detail dt {
		font-size: 4vw;
	}
	.ourStoryBlk__detail dd {
		margin-top: 4vw;
		font-size: 3.4667vw;
	}
}


/* shoplistBlk
-------------------------------------------------- */
.shoplistBlk {
	padding: 90px 5.8823%;
	background: #DFEEF0;
}
.shoplistBlk__box {
	margin-top: 60px;
	background: #fff;
}
.shoplistBlk__box + .shoplistBlk__box {
	margin-top: 20px;
}
.shoplist__title {
	position: relative;
	display: flex;
	align-items: center;
	padding: 25px 20px 25px 30px;
	font-size: 1.6rem;
	cursor: pointer;
}
.shoplist__title i {
	display: inline-block;
	width: 42px;
	margin-right: 20px;
}
.shoplist__btn {
	position: absolute;
	right: 20px;
	top: 50%;
	display: block;
	width: 44px;
	height: 44px;
	border: 1px solid #7EA6AC;
	border-radius: 50%;
	background: #fff;
	transform: translateY(-50%);
}
.shoplist__btn::before ,
.shoplist__btn::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	background: #7EA6AC;
	transform: translate(-50%,-50%);
}
.shoplist__btn::before {
	width: 16px;
	height: 1px;
}
.shoplist__btn::after {
	width: 1px;
	height: 15px;
	transition: transform .25s;
}
.shoplist__list {
	display: block;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	margin-top: 0;
	transition: max-height .6s ease, opacity .35s ease, margin-top .35s ease;
}
.shoplist__list.isOpen {
	max-height: 1600px;
	opacity: 1;
	margin-top: 20px;
	padding-bottom: 60px;
}
.shoplist__title.isOpen .shoplist__btn::after {
	transform: translate(-50%,-50%) rotate(-90deg);
}
.shoplist__title.isOpen {
	background: #7EA6AC;
	color: #fff;
}
.shoplist__listItem {
	padding: 20px;
	border-left: 2px solid #7EA6AC;
	background: #F3F9F9;
}
.shoplist__listItem dt {
	font-size: 1.6rem;
	line-height: 1.4;
}
.shoplist__listItem dd {
	margin-top: 15px;
	font-size: 1.2rem;
}
.shoplist__listFloor {
	display: inline-block;
	margin-right: 10px;
	padding-right: 10px;
	border-right: 1px solid #4A4456;
}
.shoplist__listCat {
	color: #7EA6AC;
}
.shoplistBlk__banner {
	max-width: 750px;
	margin: 60px auto 0;
}
.shoplistBlk__banner a {
	display: block;
}

@media (hover: hover) {
	.shoplist__title {
		transition: background .35s ease-in;
	}
	.shoplist__title:hover {
		background: #7EA6AC;
	}
	.shoplist__title:hover {
		color: #fff;
	}
}

@media (min-width: 768px) {
	.shoplist__list {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		padding-left: 50px;
	}
	.shoplist__list.isOpen {
		margin-top: 20px;
	}
	.shoplist__listItem {
		width: 31.5%;
		max-width: 340px;
	}
}

@media (max-width: 767px) {
	.shoplistBlk {
		padding: 17.3333vw 4vw;
	}
	.shoplistBlk__box {
		margin-top: 5.3333vw;
	}
	.shoplistBlk__box + .shoplistBlk__box {
		margin-top: 2.6666vw;
	}
	.shoplist__title {
		padding: 4vw;
		font-size: 3.4667vw;
	}
	.shoplist__title i {
		width: 5.6vw;
		margin-right: 2vw;
	}
	.shoplist__listItem {
		padding: 2.6666vw 5.3333vw;
	}
	.shoplist__listItem + .shoplist__listItem {
		margin-top: 3.2vw;
	}
	.shoplist__listItem dt {
		font-size: 3.4667vw;
	}
	.shoplist__listItem dd {
		margin-top: 2.6666vw;
		font-size: 2.6666vw;
	}
	.shoplist__btn {
		right: 2.6666vw;
		width: 5.8667vw;
		height: 5.8667vw;
	}
	.shoplist__btn::before {
		width: 2.1333vw;
	}
	.shoplist__btn::after {
		height: 2.1333vw;
	}
	.shoplist__list.isOpen {
		margin-top: 0;
		padding: 4vw;
	}
	.shoplistBlk__banner {
		margin-top: 6vw;
	}
}

/* accessBlk
-------------------------------------------------- */
.accessBlk {
	padding: 90px 5.8823% 0;
}
.accessBlk__address {
	margin-top: 60px;
	font-size: 1.6rem;
	line-height: 1.4;
}

@media (min-width: 768px) {
	.accessBlk__inner {
		display: flex;
		justify-content: space-between;
		gap: 5%;
	}
	.accessBlk__map {
		flex: 1 1 0;
		max-width: 600px;
		min-width: 400px;
	}
}

@media (max-width: 767px) {
	.accessBlk {
		padding: 17.3333vw 4vw 0;
	}
	.accessBlk__address {
		margin-top: 6.6667vw;
		font-size: 3.4667vw;
	}
	.accessBlk__map {
		margin-top: 6vw;
	}
}


/* bottomBanner
-------------------------------------------------- */
.bottomBanner {
	position: relative;
	margin-top: 180px;
}

[class^="bottomBanner__wing"] {
	position: absolute;
	transition: transform 1s ease-in-out, opacity .5s ease-in-out;
}
[class^="bottomBanner__wing"]._action {
	opacity: 1;
	transform: translate(0,0);
}
.bottomBanner__wing1 {
	left: 2%;
	bottom: -13.5%;
	width: 21.7647%;
	transform: translate(-10px,-15px);
}
.bottomBanner__wing2 {
	right: -10%;
	top: -21%;
	width: 34.2647%;
	transform: translate(5px,-10px);
}
.bottomBanner__wing1 img {
	animation: wingFloat1 6.8s ease-in-out infinite;
	transform-origin: 35% 65%;
	will-change: transform;
}
.bottomBanner__wing2 img {
	animation: wingFloat3 7.4s ease-in-out infinite .2s;
	transform-origin: 55% 55%;
	will-change: transform;
}
.bottomBanner__nav {
	position: absolute;
	left: 50%;
	bottom: 5%;
	transform: translateX(-50%);
}
.bottomBanner__navList {
	display: flex;
	gap: 30px;
	font-family: "Forum", serif;
	font-size: 1.6rem;
}

@media (max-width: 767px) {
	.bottomBanner {
		margin-top: 24vw;
	}
	.bottomBanner__navList {
		gap: 4vw;
		width: 100%;
		font-size: 3.2vw;
		white-space: nowrap;
	}
	.bottomBanner__wing2 {
		right: -2%;
		width: 53.3333vw;
	}
}