@charset "UTF-8";
/* ****************************************************************************

　目次

-------------------------------------------------------------------------------

　01. フォント
　02. バリアブル
　03. ベース
　04. Swiper
　05. ローディング
  06. アイコン
  07. ボタン
  08. インナー
  09. タイトル
  10. リード文
  11. カルーセル
  12. KV
  13. フィソロフィー
  14. メイドフォーユー
  15. テクノロジー
  16. お問い合わせ
  17. 固定フッター
  18. モーダル
  19. SNS
  20. ファンクション
  21. キーフレームアニメーション

******************************************************************************* */
/* ==

　01. フォント

=============================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Gilda+Display&display=swap");
@font-face {
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/NotoSerifJP/NotoSerifJP-Regular.woff2") format("woff2");
  font-family: "Noto Serif JP";
  font-display: swap;
}
/* ==

　02. バリアブル

=============================================================================== */
.resMain01 {
  --res-color-white01: #fff;
  --res-color-black01: #404040;
  --res-color-lightGray01: #F2F1EF;
  --res-color-gray01: #C9C6C2;
  --res-color-gold01: #C0B19C;
  --res-color-darkBrown01: #9C8F7E;
  --res-space-unit: 4px;
  --res-fontfamily-yu-gothic: "Yu Gothic", "YuGothic", "游ゴシック", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", Arial, Helvetica, sans-serif;
  --res-fontfamily-noto-serif: "Noto Serif JP", "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  --res-fontfamily-inter: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --res-fontfamily-gilda-display: "Gilda Display", Georgia, "Times New Roman", serif;
  --res-sp-contents-maxWidth: 500px;
}

/* ==

　03. ベース

=============================================================================== */
html.is-modalOpen {
  overflow: hidden;
}
html.is-modalOpen body::after {
  visibility: visible;
  clip-path: inset(0% 0 0 0);
  pointer-events: auto;
  transition: clip-path 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0s;
}

body::after {
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(15px);
  background-color: rgba(64, 64, 64, 0.95);
  content: "";
  -webkit-backdrop-filter: blur(15px);
  z-index: 9999;
  clip-path: inset(100% 0 0 0);
  pointer-events: none;
  transition: clip-path 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0s 0.3s;
}

#container {
  margin-top: 0;
  padding-bottom: 0;
}

.resMain01 {
  display: block;
  position: relative;
  color: var(--res-color-black01);
  font-weight: 500;
  line-height: 1.2;
  font-family: var(--res-fontfamily-yu-gothic);
  font-feature-settings: "palt" 1;
}
.resMain01 ul, .resMain01 ol, .resMain01 dl, .resMain01 p {
  font-size: 100%;
}
.resMain01 button {
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.resMain01 * {
  box-sizing: border-box;
}

/* ==

　04. Swiper

=============================================================================== */
.resMain01 .swiper {
  position: relative;
  overflow: hidden;
}
.resMain01 .swiper-wrapper {
  box-sizing: content-box;
  display: flex;
}
.resMain01 .swiper-slide {
  flex-shrink: 0;
  width: 100%;
}
.resMain01 .swiper-button-wrapper {
  display: flex;
}
.resMain01 .swiper-button-wrapper > *:not(:first-child) {
  margin-left: 8px;
}
.resMain01 .swiper-button-prev,
.resMain01 .swiper-button-next {
  z-index: 10;
  width: calc(var(--res-space-unit) * 6.5);
  height: calc(var(--res-space-unit) * 4.5);
  -webkit-user-select: none;
     -moz-user-select: none;
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--res-space-unit) * 0.5);
  background-color: var(--res-color-white01);
  cursor: pointer;
  transition: opacity 0.3s ease-out;
  transition: background-color 0.3s ease-out;
          user-select: none;
}
.resMain01 .swiper-button-prev::after,
.resMain01 .swiper-button-next::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(var(--res-space-unit) * 1.5);
  height: calc(var(--res-space-unit) * 1.5);
  margin: auto;
  background-color: var(--res-color-black01);
  content: "";
  -webkit-mask: url(/jutaku/visit/residence/images/ico_arrow01.svg) no-repeat center center/contain;
  left: 2px;
          mask: url(/jutaku/visit/residence/images/ico_arrow01.svg) no-repeat center center/contain;
}
.d_hover .resMain01 .swiper-button-prev:hover,
.d_hover .resMain01 .swiper-button-next:hover {
  background-color: #E6E6E6;
}
.d_hover .resMain01 .swiper-button-prev:hover::after,
.d_hover .resMain01 .swiper-button-next:hover::after {
  animation: res-kf-scaleUpBack 0.6s ease-out forwards;
}
.resMain01 .swiper-button-prev {
  transform: scaleX(-1);
}
.resMain01 .swiper-button-disabled {
  cursor: default;
  opacity: 0.3;
  pointer-events: none;
}
.resMain01 .swiper-button-disabled.swiper-button-lock {
  display: none;
}
.resMain01 .swiper-pagination {
  display: flex;
  align-items: center;
  height: calc(var(--res-space-unit) * 1.5);
}
.resMain01 .swiper-pagination-bullet {
  display: inline-block;
  width: var(--res-space-unit);
  height: var(--res-space-unit);
  border-radius: 999em;
  background-color: var(--res-color-gray01);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s ease-out, width 0.3s ease-out, height 0.3s ease-out, background-color 0.3s ease-out;
}
.resMain01 .swiper-pagination-bullet:not(:first-child) {
  margin-left: calc(var(--res-space-unit) * 1.5);
}
.resMain01 .swiper-pagination-bullet-active {
  width: calc(var(--res-space-unit) * 1.5);
  height: calc(var(--res-space-unit) * 1.5);
  border-radius: 1px;
  background-color: var(--res-color-white01);
  opacity: 1;
}

/* ==

　05. ローディング

=============================================================================== */
.resLoading01 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--res-space-unit) * 20);
  height: calc(var(--res-space-unit) * 20);
  margin: auto;
  background: url(/common/images/rn04/svg/loading_ico01.svg) center center/contain no-repeat;
}

/* ==

　06.アイコン

=============================================================================== */
.resMain01 .resIcon01 {
  display: inline-block;
  position: relative;
  width: calc(var(--res-space-unit) * 5.5);
  height: calc(var(--res-space-unit) * 3.5);
  border-radius: 2px;
  background-color: var(--res-color-black01);
  vertical-align: -0.2em;
  transition: background-color 0.3s ease-out;
}
.resMain01 .resIcon01::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--res-space-unit) * 1.5);
  height: calc(var(--res-space-unit) * 1.5);
  margin: auto;
  background-color: var(--res-color-white01);
  content: "";
}
.resMain01 .resIcon01--verticalLr {
  width: calc(var(--res-space-unit) * 3.5);
  height: calc(var(--res-space-unit) * 5.5);
  vertical-align: -0.1em;
}
.resMain01 .resIcon01--white {
  background-color: var(--res-color-white01);
}
.resMain01 .resIcon01--white::after {
  background-color: var(--res-color-black01);
}
.resMain01 .resIcon01--gold {
  background-color: var(--res-color-gold01);
}
.resMain01 .resIcon01--arrow::after {
  -webkit-mask: url(/jutaku/visit/residence/images/ico_arrow01.svg) no-repeat center center/contain;
  left: 2px;
          mask: url(/jutaku/visit/residence/images/ico_arrow01.svg) no-repeat center center/contain;
}
.resMain01 .resIcon01--more::after {
  -webkit-mask: url(/jutaku/visit/residence/images/ico_plus01.svg) no-repeat center center/contain;
          mask: url(/jutaku/visit/residence/images/ico_plus01.svg) no-repeat center center/contain;
}

.resMain01 .resIcon02 {
  display: inline-block;
  position: relative;
  width: calc(var(--res-space-unit) * 7.5);
  height: 7px;
}
.resMain01 .resIcon02::after {
  width: calc(var(--res-space-unit) * 1.5);
  height: calc(var(--res-space-unit) * 1.5);
  background-color: var(--res-color-black01);
  content: "";
  -webkit-mask: url(/jutaku/visit/residence/images/ico_arrow01_l.svg) no-repeat center center/contain;
  position: absolute;
  top: 0;
  left: 0;
          mask: url(/jutaku/visit/residence/images/ico_arrow01_l.svg) no-repeat center center/contain;
}
.resMain01 .resIcon02 > span {
  position: absolute;
  top: calc(50% - 0.5px);
  right: 0;
  width: 16px;
  height: 1px;
}
.resMain01 .resIcon02 > span::before, .resMain01 .resIcon02 > span::after {
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  content: "";
}
.resMain01 .resIcon02 > span::before {
  width: 100%;
  border-top: 1px dotted var(--res-color-black01);
  opacity: 0.5;
}
.resMain01 .resIcon02 > span::after {
  width: 0;
  border-top: 1px solid var(--res-color-black01);
  transition: width 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.resMain01 .resIcon02--white::after {
  background-color: var(--res-color-white01);
}
.resMain01 .resIcon02--white > span::before {
  border-color: var(--res-color-white01);
}
.resMain01 .resIcon02--white > span::after {
  border-color: var(--res-color-white01);
}
.resMain01 .resIcon02--arrowR {
  transform: scaleX(-1);
}

.resMain01 .resIcon03 {
  display: inline-block;
  position: relative;
}
.resMain01 .resIcon03::after {
  background-color: var(--res-color-black01);
  content: "";
}
.resMain01 .resIcon03--white::after {
  background-color: var(--res-color-white01);
}
.resMain01 .resIcon03--minus {
  width: 7.5px;
  height: 7.5px;
}
.resMain01 .resIcon03--minus::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  margin: auto;
}

/* ==

　07. ボタン

=============================================================================== */
.resMain01 .resBtn01 {
  display: inline-flex;
  position: relative;
  align-items: center;
  padding: 0 0 calc(var(--res-space-unit) * 2);
  border: none;
  border-width: 0 0 1px;
  background-color: transparent;
  color: var(--res-color-black01);
  font-size: 100%;
  line-height: 1;
  font-family: var(--res-fontfamily-inter);
  text-decoration: none;
  cursor: pointer;
}
.resMain01 .resBtn01::before, .resMain01 .resBtn01::after {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  content: "";
}
.resMain01 .resBtn01::before {
  width: 100%;
  background-color: rgba(192, 177, 156, 0.2);
}
.resMain01 .resBtn01:after {
  width: 0;
  background-color: var(--res-color-black01);
  transition: width 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.resMain01 .resBtn01_txt {
  font-weight: 400;
  font-size: 100%;
}
.resMain01 .resBtn01_ico {
  margin: 0 0 0 calc(var(--res-space-unit) * 3);
}
.resMain01 .resBtn01--white {
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--res-color-white01);
}
.resMain01 .resBtn01--white::before {
  background-color: rgba(255, 255, 255, 0.3);
}
.resMain01 .resBtn01--white::after {
  background-color: var(--res-color-white01);
}
.resMain01 .resBtn01--gold::before {
  background-color: var(--res-color-gray01);
}
.resMain01 .resBtn01--gold:after {
  background-color: #877C6E;
}
.resMain01 .resBtn01--verticalLr {
  padding: 0 0 0 calc(var(--res-space-unit) * 2);
  border-width: 0 0 0 1px;
}
.resMain01 .resBtn01--verticalLr::before, .resMain01 .resBtn01--verticalLr::after {
  top: 0;
  bottom: auto;
  width: 1px;
}
.resMain01 .resBtn01--verticalLr::before {
  height: 100%;
}
.resMain01 .resBtn01--verticalLr:after {
  width: 1px;
  height: 0;
  transition: height 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.resMain01 .resBtn01--verticalLr .resBtn01_ico {
  margin: calc(var(--res-space-unit) * 3) 0 0;
}
.resMain01 .resBtn01--noUnderline::before, .resMain01 .resBtn01--noUnderline::after {
  display: none;
}
.d_hover .resMain01 .resBtn01:not(span):hover:not(.resBtn01--verticalLr):not(.resMadeforyouCard01_btn)::after {
  width: 100%;
}
.d_hover .resMain01 .resBtn01:not(span):hover.resBtn01--verticalLr::after {
  height: 100%;
}
.d_hover .resMain01 .resBtn01:not(span):hover .resIcon01--arrow {
  background-color: rgba(64, 64, 64, 0.8);
}
.d_hover .resMain01 .resBtn01:not(span):hover .resIcon01--arrow::after {
  animation: res-kf-scaleUpBack 0.6s ease-out forwards;
}
.d_hover .resMain01 .resBtn01:not(span):hover .resIcon01--more {
  background-color: #ADA08D;
}
.d_hover .resMain01 .resBtn01:not(span):hover .resIcon01--more::after {
  animation: res-kf-scaleUpBack 0.6s ease-out forwards;
}
.d_hover .resMain01 .resBtn01:not(span):hover .resIcon01--white {
  background-color: rgba(255, 255, 255, 0.8);
}

.resMain01 .resBtn02 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--res-space-unit) * 34);
  min-height: 49px;
  border-radius: 999em;
  backdrop-filter: blur(20px);
  background-color: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  -webkit-backdrop-filter: blur(20px);
  transition: background-color 0.3s ease-out;
}
.resMain01 .resBtn02.is-disabled {
  cursor: default;
  opacity: 0.2;
}
.resMain01 .resBtn02_txt {
  font-weight: 400;
  font-size: 100%;
  font-family: var(--res-fontfamily-inter);
}
.resMain01 .resBtn02_ico {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0 calc(var(--res-space-unit) * 4);
}
.resMain01 .resBtn02--white {
  color: var(--res-color-white01);
}
.resMain01 .resBtn02--icoLeft {
  flex-direction: row-reverse;
}
.resMain01 .resBtn02--icoLeft .resBtn02_ico {
  margin: 0 calc(var(--res-space-unit) * 4) 0 0;
}
.d_hover .resMain01 .resBtn02:hover {
  background-color: rgba(255, 255, 255, 0.15);
}
.d_hover .resMain01 .resBtn02:hover .resIcon03--minus::after {
  animation: res-kf-scaleUpBack 0.6s ease-out forwards;
}
.d_hover .resMain01 .resBtn02:hover .resIcon02::after {
  animation: res-kf-scaleUpBack 0.6s ease-out forwards;
}
.d_hover .resMain01 .resBtn02:hover .resIcon02 > span::after {
  width: 100%;
}

/* ==

　08. インナー

=============================================================================== */
.resMain01 .resInner01 {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 calc(var(--res-space-unit) * 8);
}

/* ==

　09. タイトル

=============================================================================== */
.resMain01 .resTit01 {
  font-weight: 400;
  font-size: 267%;
  font-family: var(--res-fontfamily-noto-serif);
  letter-spacing: 0.16em;
  text-align: center;
}
.resMain01 .resTit01_sub {
  display: block;
  margin: 0 0 calc(var(--res-space-unit) * 16);
  color: var(--res-color-darkBrown01);
  font-weight: 700;
  font-size: 117%;
  font-family: var(--res-fontfamily-inter);
  text-align: center;
}

/* ==

　10. リード文

=============================================================================== */
.resMain01 .resLead01 {
  margin: calc(var(--res-space-unit) * 9) 0 0;
  font-size: 134%;
  line-height: 1.8;
  letter-spacing: 0.04em;
  text-align: center;
}

/* ==

　11. カルーセル

=============================================================================== */
.resMain01 .resCarousel01 {
  overflow: hidden;
  border-radius: var(--res-space-unit);
}
.resMain01 .resCarousel01_slide {
  height: 553px;
}
.resMain01 .resCarousel01_img {
  width: 100%;
  height: 100%;
}
.resMain01 .resCarousel01_img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--res-space-unit);
}
.resMain01 .resCarousel01_btnWrap {
  align-items: flex-end;
  justify-content: flex-end;
  height: calc(var(--res-space-unit) * 9.5);
}

.resMain01 .resCarousel01Thumb_in {
  position: relative;
}
.resMain01 .resCarousel01Thumb_in::before {
  display: block;
  padding-top: 66.5%;
  content: "";
}
.resMain01 .resCarousel01Thumb_item {
  visibility: hidden;
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.resMain01 .resCarousel01Thumb_item.is-prev, .resMain01 .resCarousel01Thumb_item.is-active {
  visibility: visible;
  opacity: 1;
}
.resMain01 .resCarousel01Thumb_item.is-active {
  z-index: 2;
}
.resMain01 .resCarousel01Thumb_item.is-prev {
  z-index: 1;
}
.resMain01 .resCarousel01Thumb_img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--res-space-unit);
}
.resMain01 .resCarousel01Thumb_img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.resMain01 .resCarousel01Thumb .resLoading01 {
  width: calc(var(--res-space-unit) * 12);
  height: calc(var(--res-space-unit) * 12);
}

.resMain01 .resCarousel03 {
  width: 100%;
  height: 100%;
  border-radius: var(--res-space-unit);
}
.resMain01 .resCarousel03_wrap {
  width: 100%;
  height: 100%;
}
.resMain01 .resCarousel03_slide {
  position: relative;
  width: 100%;
  height: 100%;
}
.resMain01 .resCarousel03_item {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--res-space-unit);
}
.resMain01 .resCarousel03_btnWrap {
  z-index: 1;
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translateX(calc(100% + var(--res-space-unit) * 8));
}
.resMain01 .resCarousel03_pagination {
  position: absolute;
  bottom: calc(var(--res-space-unit) * -6.5);
  justify-content: flex-end;
  width: 100%;
}

.resMain01 .resCarousel03Card01 {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
.resMain01 .resCarousel03Card01::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(148.47deg, rgba(0, 0, 0, 0) 69.14%, rgba(0, 0, 0, 0.25) 86.54%);
  content: "";
  opacity: 0.5;
}
.resMain01 .resCarousel03Card01_img {
  width: 100%;
  height: 100%;
}
.resMain01 .resCarousel03Card01_img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.resMain01 .resCarousel03Card01_caption {
  z-index: 1;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  padding: 0 calc(var(--res-space-unit) * 6) calc(var(--res-space-unit) * 6);
  font-size: 109%;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: right;
}

.resMain01 .resCarousel03Thumb {
  position: relative;
  margin: calc(var(--res-space-unit) * 8) 0 0;
}
.resMain01 .resCarousel03Thumb_in {
  position: relative;
  width: 73.6%;
}
.resMain01 .resCarousel03Thumb_in::before {
  display: block;
  padding-top: 66.5%;
  content: "";
}
.resMain01 .resCarousel03Thumb_item {
  visibility: hidden;
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.resMain01 .resCarousel03Thumb_item.is-prev, .resMain01 .resCarousel03Thumb_item.is-active {
  visibility: visible;
  opacity: 1;
}
.resMain01 .resCarousel03Thumb_item.is-active {
  z-index: 2;
}
.resMain01 .resCarousel03Thumb_item.is-prev {
  z-index: 1;
}
.resMain01 .resCarousel03Thumb_img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--res-space-unit);
}
.resMain01 .resCarousel03Thumb_img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.resMain01 .resCarousel03Thumb .resLoading01 {
  width: calc(var(--res-space-unit) * 12);
  height: calc(var(--res-space-unit) * 12);
}

.resMain01 .resCarousel04 {
  height: 100%;
}
.resMain01 .resCarousel04_wrap {
  height: 100%;
}
.resMain01 .resCarousel04_slide {
  height: 100%;
}

/* ==

　12. KV

=============================================================================== */
.resMain01 .resVisual01 {
  --resVisual01-body-backdropfilter: 10px;
  --resVisual01-bg-bottom: 0%;
  --gnav-nHeader-height: 50px;
  --gnav-utility-height: 40px;
  height: calc(100vh - var(--gnav-utility-height) - var(--gnav-nHeader-height));
  height: calc(100dvh - var(--gnav-utility-height) - var(--gnav-nHeader-height));
}
.resMain01 .resVisual01_in {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--res-color-white01);
}
.resMain01 .resVisual01_body {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(var(--resVisual01-body-backdropfilter));
  text-align: center;
  -webkit-backdrop-filter: blur(var(--resVisual01-backdropfilter));
}
.resMain01 .resVisual01_titWrap {
  display: flex;
  visibility: hidden;
  position: absolute;
  right: 0;
  bottom: 50%;
  left: 0;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  transform: translateY(50%);
  opacity: 0;
}
.resMain01 .resVisual01_lead {
  position: relative;
}
.resMain01 .resVisual01_lead p, .resMain01 .resVisual01_lead span {
  font-weight: 400;
  font-size: 167%;
  font-family: var(--res-fontfamily-noto-serif);
  letter-spacing: 0.16em;
}
.resMain01 .resVisual01_lead p {
  color: rgba(255, 255, 255, 0.3);
}
.resMain01 .resVisual01_lead span {
  position: absolute;
  top: 0;
  left: 0;
  line-height: 1.75;
  clip-path: inset(0 100% 0 0);
}
.resMain01 .resVisual01_tit {
  position: relative;
}
.resMain01 .resVisual01_tit h1, .resMain01 .resVisual01_tit span {
  margin: calc(var(--res-space-unit) * 1) 0 0;
  padding-bottom: calc(var(--res-space-unit) * 2);
  font-weight: 700;
  font-size: 400%;
  font-family: var(--res-fontfamily-inter);
}
.resMain01 .resVisual01_tit h1 {
  color: rgba(255, 255, 255, 0.3);
}
.resMain01 .resVisual01_tit span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  clip-path: inset(0 100% 0 0);
}
.resMain01 .resVisual01_bg {
  visibility: hidden;
  z-index: 1;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
}
.resMain01 .resVisual01_bg::after {
  z-index: 3;
  position: absolute;
  bottom: var(--resVisual01-bg-bottom);
  left: 0;
  width: 100%;
  height: 200%;
  background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  content: "";
  opacity: 0.4;
}

.resMain01 .resVisualBlc01 {
  width: 100%;
  height: 100%;
}
.resMain01 .resVisualBlc01_column {
  display: grid;
  grid-template-rows: 50.5% 1fr;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  height: 100%;
}
.resMain01 .resVisualBlc01_item:nth-of-type(1) {
  grid-row: span 2;
}
.resMain01 .resVisualBlc01_img {
  display: block;
  width: 100%;
  height: 100%;
}
.resMain01 .resVisualBlc01_img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ==

　13. フィソロフィー

=============================================================================== */
.resMain01 .resPhilosophy01 {
  margin: calc(var(--res-space-unit) * 18) 0 0;
}
.resMain01 .resPhilosophy01_column {
  display: grid;
  grid-template-columns: 1fr 30px 238px;
}
.resMain01 .resPhilosophy01_item {
  position: relative;
}
.resMain01 .resPhilosophy01_item:nth-of-type(1) {
  margin-right: 41px;
}
.resMain01 .resPhilosophy01_sec {
  padding: calc(var(--res-space-unit) * 40) 0 0;
}
.resMain01 .resPhilosophy01_sec + .resPhilosophy01_sec {
  margin: calc(var(--res-space-unit) * 16) 0 0;
}
.resMain01 .resPhilosophy01_sec .resPhilosophyCard02:not(:first-of-type) {
  margin: calc(var(--res-space-unit) * 24) 0 0;
}
.resMain01 .resPhilosophy01_blc {
  padding: 0 0 calc(var(--res-space-unit) * 39);
  background: linear-gradient(180deg, rgba(242, 241, 239, 0) 0%, #F2F1EF 1.68%, #F2F1EF 97.6%, rgba(242, 241, 239, 0) 100%);
}

.resMain01 .resPhilosophyBlc01 {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  left: 0;
  padding: calc(var(--res-space-unit) * 20) 0 0;
}
.resMain01 .resPhilosophyBlc01::before {
  position: absolute;
  top: calc(var(--res-space-unit) * 20);
  left: 0;
  width: 1px;
  height: 643px;
  background: linear-gradient(0deg, rgba(201, 198, 194, 0) 0%, rgb(201, 198, 194) 33%, rgb(201, 198, 194) 66%, rgba(201, 198, 194, 0) 100%);
  content: "";
}
.resMain01 .resPhilosophyBlc01_column {
  position: relative;
}
.resMain01 .resPhilosophyBlc01_item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.resMain01 .resPhilosophyScrollspy01 {
  display: flex;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  left: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.resMain01 .resPhilosophyScrollspy01_bullet {
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 auto;
  border-radius: 999em;
  background-color: var(--res-color-gray01);
  opacity: 0.5;
  transition: all 0.3s ease-out;
}
.resMain01 .resPhilosophyScrollspy01_bullet:not(:first-child) {
  margin: var(--res-space-unit) 0 0;
}
.resMain01 .resPhilosophyScrollspy01_bullet.is-current {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background-color: var(--res-color-gold01);
  opacity: 1;
}

.resMain01 .resPhilosophyCard01 {
  padding: calc(var(--res-space-unit) * 9) 0 0 calc(var(--res-space-unit) * 6);
}
.resMain01 .resPhilosophyCard01_head {
  display: flex;
  z-index: 0;
  position: relative;
  flex-direction: row-reverse;
  align-items: flex-start;
}
.resMain01 .resPhilosophyCard01_num {
  display: block;
  z-index: -1;
  position: absolute;
  top: calc(var(--res-space-unit) * -10);
  right: 0;
  color: var(--res-color-gold01);
  font-weight: 400;
  font-size: 533%;
  line-height: 1;
  font-family: var(--res-fontfamily-gilda-display);
  opacity: 0.3;
}
.resMain01 .resPhilosophyCard01_lead {
  padding: 0 calc(var(--res-space-unit) * 8) 0 0;
  font-weight: 400;
  font-size: 150%;
  line-height: 1.5;
  font-family: var(--res-fontfamily-noto-serif);
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
}
.resMain01 .resPhilosophyCard01_titWrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  writing-mode: vertical-rl;
}
.resMain01 .resPhilosophyCard01_tit {
  margin: 0 calc(var(--res-space-unit) * 9.5) 0 0;
  font-weight: 400;
  font-size: 400%;
  line-height: 1;
  font-family: var(--res-fontfamily-noto-serif);
  letter-spacing: 0.08em;
}
.resMain01 .resPhilosophyCard01_tit span {
  margin: 0.08em 0;
  text-align: center;
  text-combine-upright: all;
}
.resMain01 .resPhilosophyCard01_subTit {
  margin: 0 calc(var(--res-space-unit) * 3) 0 0;
  color: var(--res-color-gold01);
  font-weight: 400;
  font-size: 100%;
  font-family: var(--res-fontfamily-inter);
}
.resMain01 .resPhilosophyCard01_txt {
  margin: calc(var(--res-space-unit) * 12) 0 0;
  font-size: 109%;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: justify;
}
.resMain01 .resPhilosophyCard01_label {
  display: block;
  margin: calc(var(--res-space-unit) * 24) 0 0;
  color: var(--res-color-gold01);
  color: var(--res-color-gold01);
  font-weight: 700;
  font-size: 100%;
  opacity: 0.5;
}

.resMain01 .resPhilosophyCard02_column {
  display: grid;
  grid-template-columns: 1fr 206px;
  gap: 0 calc(var(--res-space-unit) * 8);
}
.resMain01 .resPhilosophyCard02_item:nth-of-type(1) {
  order: 2;
  min-width: 0;
}
.resMain01 .resPhilosophyCard02_item:nth-of-type(2) {
  order: 1;
  min-width: 0;
}
.resMain01 .resPhilosophyCard02_side {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
  gap: calc(var(--res-space-unit) * 11);
}
.resMain01 .resPhilosophyCard02_head {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: flex-end;
  writing-mode: vertical-rl;
}
.resMain01 .resPhilosophyCard02_subTit {
  display: inline-block;
  position: relative;
  width: 9px;
  padding: calc(var(--res-space-unit) * 3.5) 0 0;
  color: var(--res-color-darkBrown01);
  font-size: 100%;
  line-height: 1;
  font-family: var(--res-fontfamily-inter);
}
.resMain01 .resPhilosophyCard02_subTit::before {
  position: absolute;
  top: 0;
  left: 1px;
  width: calc(var(--res-space-unit) * 1.5);
  height: calc(var(--res-space-unit) * 1.5);
  border-radius: 1px;
  background-color: var(--res-color-darkBrown01);
  content: "";
}
.resMain01 .resPhilosophyCard02_tit {
  margin: 0 calc(var(--res-space-unit) * 5) 0 calc(var(--res-space-unit) * 10);
  font-weight: 400;
  font-size: 234%;
  line-height: 1.5;
  font-family: var(--res-fontfamily-noto-serif);
  letter-spacing: 0.08em;
}
.resMain01 .resPhilosophyCard02_tit span {
  margin: 0.08em 0;
  text-align: center;
  text-combine-upright: all;
}
.resMain01 .resPhilosophyCard02_btnWrap {
  text-align: right;
}
.resMain01 .resPhilosophyCard02_blc {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}
.resMain01 .resPhilosophyCard02_column--reverse {
  grid-template-columns: 206px 1fr;
}
.resMain01 .resPhilosophyCard02_column--reverse .resPhilosophyCard02_item:nth-of-type(1) {
  order: 1;
}
.resMain01 .resPhilosophyCard02_column--reverse .resPhilosophyCard02_item:nth-of-type(2) {
  order: 2;
}
.resMain01 .resPhilosophyCard02_column--reverse .resPhilosophyCard02_head {
  justify-content: flex-start;
}
.resMain01 .resPhilosophyCard02_column--reverse .resCarousel01_btnWrap {
  justify-content: flex-start;
}

/* ==

　14. メイドフォーユー

=============================================================================== */
.resMain01 .resMadeforyou01_in {
  max-width: 1146px;
  margin: 0 auto;
}
.resMain01 .resMadeforyou01_blc {
  margin: calc(var(--res-space-unit) * 38) 0 0;
}
.resMain01 .resMadeforyou01_sec + .resMadeforyou01_sec {
  margin: calc(var(--res-space-unit) * 20) 0 0;
}
.resMain01 .resMadeforyou01_column {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: calc(var(--res-space-unit) * 30) 0 0;
  gap: calc(var(--res-space-unit) * 4) var(--res-space-unit);
}

.resMain01 .resMadeforyouBlc01 {
  position: absolute;
  top: 0;
  left: 0;
  width: 113.7%;
  height: 100%;
  height: 160px;
  margin: calc(var(--res-space-unit) * -8) 0 0 -19.3%;
  overflow: hidden;
  border-radius: var(--res-space-unit);
}
.resMain01 .resMadeforyouBlc01--01 {
  --resMadeforyouBlc01-loop-distance: 2926px;
  --resMadeforyouBlc01-loop-duration: 131s;
}
.resMain01 .resMadeforyouBlc01--02 {
  --resMadeforyouBlc01-loop-distance: 931px;
  --resMadeforyouBlc01-loop-duration: 46.55s;
}
.resMain01 .resMadeforyouBlc01--03 {
  --resMadeforyouBlc01-loop-distance: 1197px;
  --resMadeforyouBlc01-loop-duration: 59.85s;
}
.resMain01 .resMadeforyouBlc01_in {
  display: flex;
  width: calc(var(--resMadeforyouBlc01-loop-distance) * 2);
  animation: res-kf-imgLoop var(--resMadeforyouBlc01-loop-duration) linear infinite;
}
.resMain01 .resMadeforyouBlc01_column {
  display: flex;
}
.resMain01 .resMadeforyouBlc01_item {
  width: calc(var(--res-space-unit) * 32);
  margin-right: 5px;
}
.resMain01 .resMadeforyouBlc01_item img {
  border-radius: var(--res-space-unit);
}

.resMain01 .resMadeforyouCard01 {
  display: block;
  z-index: 0;
  position: relative;
  padding: 0 10% calc(var(--res-space-unit) * 12);
  color: var(--res-color-white01);
  text-decoration: none;
}
.resMain01 .resMadeforyouCard01_bg {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--res-space-unit);
}
.resMain01 .resMadeforyouCard01_bg::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25);
  content: "";
}
.resMain01 .resMadeforyouCard01_bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.8;
}
.resMain01 .resMadeforyouCard01_label {
  display: flex;
  position: absolute;
  top: calc(var(--res-space-unit) * 10);
  left: 2.8%;
  align-items: center;
  width: 34px;
  writing-mode: vertical-rl;
}
.resMain01 .resMadeforyouCard01_num {
  position: absolute;
  top: calc(var(--res-space-unit) * 3);
  left: 50%;
  transform: translateX(-50%);
  font-weight: 400;
  font-size: 400%;
  line-height: 1;
  font-family: var(--res-fontfamily-gilda-display);
  letter-spacing: -0.04em;
  opacity: 0.2;
}
.resMain01 .resMadeforyouCard01_job {
  font-weight: 700;
  font-size: 100%;
  line-height: 1;
  font-family: var(--res-fontfamily-inter);
}
.resMain01 .resMadeforyouCard01_job::before {
  display: inline-block;
  width: calc(var(--res-space-unit) * 1.5);
  height: calc(var(--res-space-unit) * 1.5);
  margin: 0 0 calc(var(--res-space-unit) * 7) 0;
  border-radius: 1px;
  background-color: var(--res-color-white01);
  content: "";
  font-size: 60%;
  vertical-align: -0.1em;
}
.resMain01 .resMadeforyouCard01_column {
  display: grid;
  grid-template-columns: 1fr 50.2%;
  gap: calc(var(--res-space-unit) * 9) calc(var(--res-space-unit) * 8);
}
.resMain01 .resMadeforyouCard01_item:nth-of-type(2) {
  display: flex;
  flex-direction: column;
}
.resMain01 .resMadeforyouCard01_lead {
  font-weight: 400;
  font-size: 167%;
  line-height: 1.6;
  font-family: var(--res-fontfamily-noto-serif);
  letter-spacing: 0.16em;
}
.resMain01 .resMadeforyouCard01_subTit {
  margin: calc(var(--res-space-unit) * 8) 0 0;
  font-weight: 700;
  font-size: 333%;
  line-height: 1.1;
  font-family: var(--res-fontfamily-inter);
}
.resMain01 .resMadeforyouCard01_tit {
  margin: calc(var(--res-space-unit) * 2) 0 0;
  font-size: 117%;
  line-height: 1.8;
  letter-spacing: 0.04em;
}
.resMain01 .resMadeforyouCard01_body {
  width: 100%;
  margin: calc(var(--res-space-unit) * 25) 0 0;
}
.resMain01 .resMadeforyouCard01_logo {
  margin: calc(var(--res-space-unit) * 10) 0 0;
}
.resMain01 .resMadeforyouCard01_txt {
  margin: auto 0 0 calc(var(--res-space-unit) * 1);
  font-size: 117%;
  line-height: 1.8;
  letter-spacing: 0.04em;
}
.resMain01 .resMadeforyouCard01_img {
  position: relative;
  width: 125%;
  height: 155px;
  margin: 0 0 calc(var(--res-space-unit) * 8);
  border-radius: 0 0 0 var(--res-space-unit);
  background-color: var(--res-color-white01);
}
.resMain01 .resMadeforyouCard01_img::after {
  position: absolute;
  right: 0;
  bottom: calc(var(--res-space-unit) * -1);
  width: var(--res-space-unit);
  height: var(--res-space-unit);
  background: url(/jutaku/visit/residence/images/madeforyou_deco01.svg) no-repeat center center/contain;
  content: "";
}
.resMain01 .resMadeforyouCard01_btnWrap {
  position: relative;
  margin: calc(var(--res-space-unit) * 10) 0 0;
  overflow: hidden;
  text-align: right;
}
.resMain01 .resMadeforyouCard01_btn {
  position: static;
}
.resMain01 .resMadeforyouCard01_btn::after {
  display: block;
  right: 0;
  left: auto;
  width: 400%;
  background: transparent linear-gradient(90deg, rgb(242, 241, 239) 0%, rgba(242, 241, 239, 0) 25%, rgb(242, 241, 239) 50%, rgba(242, 241, 239, 0) 75%, rgb(242, 241, 239) 100%);
}
.d_hover .resMain01 .resMadeforyouCard01:hover .resMadeforyouCard01_btn::after {
  animation: res-kf-lineLoop 2.2s linear infinite;
}
.d_hover .resMain01 .resMadeforyouCard01:hover .resIcon01--arrow.resIcon01--white {
  background-color: rgba(255, 255, 255, 0.8);
}
.d_hover .resMain01 .resMadeforyouCard01:hover .resIcon01--arrow.resIcon01--white::after {
  animation: res-kf-scaleUpBack 0.6s ease-out forwards;
}

.resMain01 .resMadeforyouCard02 {
  display: block;
  z-index: 0;
  position: relative;
  height: 100%;
  min-height: calc(var(--res-space-unit) * 114);
  padding: calc(var(--res-space-unit) * 16) calc(var(--res-space-unit) * 12) calc(var(--res-space-unit) * 12);
  overflow: hidden;
  border-radius: var(--res-space-unit);
  color: var(--res-color-white01);
  text-decoration: none;
}
.resMain01 .resMadeforyouCard02_in {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.resMain01 .resMadeforyouCard02_logo {
  width: 299px;
}
.resMain01 .resMadeforyouCard02_lead {
  margin: calc(var(--res-space-unit) * -1) 0 0;
  font-size: 117%;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.resMain01 .resMadeforyouCard02_tit {
  margin: calc(var(--res-space-unit) * 2) 0 0;
  font-size: 333%;
  line-height: 1.6;
}
.resMain01 .resMadeforyouCard02_txt {
  margin: auto 0 0;
  font-size: 134%;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.resMain01 .resMadeforyouCard02_btnWrap {
  margin: calc(var(--res-space-unit) * 13) 0 0;
}
.resMain01 .resMadeforyouCard02_bg {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.resMain01 .resMadeforyouCard02_bg::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  content: "";
}
.resMain01 .resMadeforyouCard02_bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s ease-out;
}
.d_hover .resMain01 .resMadeforyouCard02:hover .resMadeforyouCard02_bg img {
  transform: scale(1.05);
}
.d_hover .resMain01 .resMadeforyouCard02:hover .resBtn01::after {
  width: 100%;
}
.d_hover .resMain01 .resMadeforyouCard02:hover .resIcon01--arrow.resIcon01--white {
  background-color: rgba(255, 255, 255, 0.8);
}
.d_hover .resMain01 .resMadeforyouCard02:hover .resIcon01--arrow.resIcon01--white::after {
  animation: res-kf-scaleUpBack 0.6s ease-out forwards;
}

/* ==

　15. テクノロジー

=============================================================================== */
.resMain01 .resTechnology01 {
  z-index: 1;
  position: relative;
  margin: calc(var(--res-space-unit) * 30) 0 0;
  padding: calc(var(--res-space-unit) * 30) 0;
  background-color: var(--res-color-lightGray01);
}

.resMain01 .resTechnologyBlc01 {
  margin: calc(var(--res-space-unit) * 18) 0 0;
}
.resMain01 .resTechnologyBlc01_column {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--res-space-unit);
}

.resMain01 .resTechnologyCard01 {
  height: 100%;
  padding: calc(var(--res-space-unit) * 8) calc(var(--res-space-unit) * 8) calc(var(--res-space-unit) * 8) calc(var(--res-space-unit) * 12);
  border-radius: calc(var(--res-space-unit) * 2);
  background-color: var(--res-color-white01);
}
.resMain01 .resTechnologyCard01_tit {
  position: relative;
  padding: calc(var(--res-space-unit) * 11) 0 0;
  font-weight: 400;
  font-size: 167%;
  line-height: 1.6;
  font-family: var(--res-fontfamily-noto-serif);
  letter-spacing: 0.16em;
}
.resMain01 .resTechnologyCard01_tit::before, .resMain01 .resTechnologyCard01_tit::after {
  position: absolute;
  top: 0;
  width: var(--res-space-unit);
  height: var(--res-space-unit);
  border-radius: 1px;
  background-color: var(--res-color-gold01);
  content: "";
}
.resMain01 .resTechnologyCard01_tit::before {
  left: 0;
}
.resMain01 .resTechnologyCard01_tit::after {
  left: calc(var(--res-space-unit) * 1.5);
}
.resMain01 .resTechnologyCard01_column {
  display: grid;
  grid-template-columns: 1fr 24.8%;
  gap: calc(var(--res-space-unit) * 12);
}
.resMain01 .resTechnologyCard01_txt {
  margin: calc(var(--res-space-unit) * 5) 0 0;
  font-size: 117%;
  line-height: 1.8;
  letter-spacing: 0.04em;
}
.resMain01 .resTechnologyCard01_img img {
  border-radius: var(--res-space-unit);
}
.resMain01 .resTechnologyCard01_btnWrap {
  margin: calc(var(--res-space-unit) * 6) 0 0;
}
.resMain01 .resTechnologyCard01_caption {
  position: relative;
  top: calc(var(--res-space-unit) * 3);
  margin: calc(var(--res-space-unit) * 2) 0 0;
  font-size: 92%;
  line-height: 1.8;
  letter-spacing: 0.04em;
  text-align: right;
  opacity: 0.7;
}

.resMain01 .resTechnologyBlc02 {
  margin: calc(var(--res-space-unit) * 20) 0 0;
}
.resMain01 .resTechnologyBlc02_in {
  max-width: 1186px;
  margin: 0 auto;
}
.resMain01 .resTechnologyBlc02_column {
  display: grid;
  grid-template-columns: 1fr 39.6%;
  gap: calc(var(--res-space-unit) * 30);
}
.resMain01 .resTechnologyBlc02_list > li:not(:first-child) {
  margin-top: calc(var(--res-space-unit) * 8);
}
.resMain01 .resTechnologyBlc02_notes > li {
  position: relative;
  padding: 0 0 0 2.727em;
  font-size: 92%;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.resMain01 .resTechnologyBlc02_notes > li:not(:first-child) {
  margin-top: calc(var(--res-space-unit) * 1.5);
}
.resMain01 .resTechnologyBlc02_notes > li > .num {
  position: absolute;
  top: 0;
  left: 0;
}
.resMain01 .resTechnologyBlc02_btn {
  padding: 0 0 calc(var(--res-space-unit) * 3);
  font-family: var(--res-fontfamily-yu-gothic);
}
.resMain01 .resTechnologyBlc02_btn::before {
  background-color: rgba(64, 64, 64, 0.3);
}
.resMain01 .resTechnologyBlc02_btn .resBtn01_txt {
  font-size: 117%;
}
.resMain01 .resTechnologyBlc02_btn .resBtn01_ico {
  margin: 0 0 0 calc(var(--res-space-unit) * 6);
}

/* ==

　16. お問い合わせ

=============================================================================== */
.resMain01 .resContact01 {
  color: var(--res-color-white01);
  --resContact01-height: 100vh;
  --resContact01-height: 100dvh;
  --resContact01-body-offset: calc(var(--resContact01-height) * 0.95);
  overflow-x: clip;
}
.resMain01 .resContact01_track {
  position: relative;
  height: calc(var(--resContact01-height) * 2 + var(--resContact01-body-offset));
}
.resMain01 .resContact01_pin {
  position: sticky;
  top: calc((100vh - var(--resContact01-height)) / 2);
  top: calc((100dvh - var(--resContact01-height)) / 2);
  left: 0;
  width: 100%;
  height: var(--resContact01-height);
  pointer-events: none;
}
.resMain01 .resContact01_body {
  display: flex;
  z-index: 2;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--resContact01-height);
  margin-top: var(--resContact01-body-offset);
}

.resMain01 .resContactBlc01 {
  display: grid;
  position: relative;
  height: 100%;
  gap: calc(var(--res-space-unit) * 0.5);
}
.resMain01 .resContactBlc01_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
}
.resMain01 .resContactBlc01_track {
  width: 100%;
  height: 100%;
}
.resMain01 .resContactBlc01_body {
  display: flex;
  height: 100%;
}
.resMain01 .resContactBlc01_body--01 {
  --resContactBlc01-loop-duration: 60s;
  width: calc(200% + var(--res-space-unit) * 0.5);
}
.resMain01 .resContactBlc01_body--02 {
  transform: translateX(-50%);
  --resContactBlc01-loop-duration: 60s;
  width: calc(266.6666666667% + var(--res-space-unit) * 0.5 * 2);
}
.resMain01 .resContactBlc01_column {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  gap: calc(var(--res-space-unit) * 0.5);
}
.resMain01 .resContactBlc01_column:not(:first-child) {
  margin-left: calc(var(--res-space-unit) * 0.5);
}
.resMain01 .resContactBlc01_column--02 {
  position: relative;
  left: -6.25%;
  grid-template-columns: repeat(4, 1fr);
  width: calc(100% + 33.3333333333% + var(--res-space-unit) * 0.5);
}
.resMain01 .resContactBlc01_img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
}
.resMain01 .resContactBlc01_img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.resMain01 .resContactBlc01_img--01 img {
  -o-object-position: bottom center;
     object-position: bottom center;
}
.resMain01 .resContactBlc01_img--02 img {
  -o-object-position: bottom center;
     object-position: bottom center;
}
.resMain01 .resContactBlc01_img--03 img {
  -o-object-position: bottom center;
     object-position: bottom center;
}
.resMain01 .resContactBlc01_img--04 img {
  -o-object-position: top right;
     object-position: top right;
}
.resMain01 .resContactBlc01_img--05 img {
  -o-object-position: top center;
     object-position: top center;
}
.resMain01 .resContactBlc01_img--06 img {
  -o-object-position: top center;
     object-position: top center;
}
.resMain01 .resContactBlc01_img--07 img {
  -o-object-position: top left;
     object-position: top left;
}

.resMain01 .resContactBlc02 {
  width: 100%;
}
.resMain01 .resContactBlc02_tit {
  font-weight: 400;
  font-size: 234%;
  line-height: 1.6;
  font-family: var(--res-fontfamily-noto-serif);
  letter-spacing: 0.16em;
  text-align: center;
}
.resMain01 .resContactBlc02_lead {
  margin: calc(var(--res-space-unit) * 8) 0 0;
  font-size: 134%;
  line-height: 1.8;
  letter-spacing: 0.04em;
  text-align: center;
}
.resMain01 .resContactBlc02_list {
  display: flex;
  justify-content: center;
  margin: calc(var(--res-space-unit) * 22) 0 0;
}
.resMain01 .resContactBlc02_list > li {
  width: 100%;
  max-width: calc(var(--res-space-unit) * 130);
}
.resMain01 .resContactBlc02_list > li:not(:first-child) {
  margin-left: calc(var(--res-space-unit) * 6);
}

.resMain01 .resContactCard01 {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--res-space-unit) * 23.5);
  backdrop-filter: blur(calc(var(--res-space-unit) * 2));
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(calc(var(--res-space-unit) * 2));
  position: relative;
  width: 100%;
  padding: calc(var(--res-space-unit) * 2);
  border-radius: 999em;
  color: var(--res-color-black01);
  text-decoration: none;
  transition: background-color 0.3s ease-out;
}
.resMain01 .resContactCard01::before, .resMain01 .resContactCard01::after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
}
.resMain01 .resContactCard01::before {
  right: calc(var(--res-space-unit) * 26);
  width: 1px;
  height: calc(var(--res-space-unit) * 12);
  background: linear-gradient(0deg, rgba(201, 198, 194, 0) 0%, rgb(201, 198, 194) 33%, rgb(201, 198, 194) 67%, rgba(201, 198, 194, 0) 100%);
}
.resMain01 .resContactCard01::after {
  right: calc(var(--res-space-unit) * 12);
  width: 8px;
  height: 9px;
  background-color: var(--res-color-black01);
  -webkit-mask: url(/jutaku/visit/residence/images/ico_arrow01.svg) no-repeat center center/contain;
          mask: url(/jutaku/visit/residence/images/ico_arrow01.svg) no-repeat center center/contain;
}
.resMain01 .resContactCard01_img {
  display: block;
  width: 111px;
  height: 100%;
  overflow: hidden;
  border-radius: 999em;
}
.resMain01 .resContactCard01_img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s ease-out;
}
.resMain01 .resContactCard01_txt {
  width: calc(100% - 111px);
  padding: 0 calc(var(--res-space-unit) * 26) 0 calc(var(--res-space-unit) * 6);
  font-size: 134%;
  line-height: 1.8;
  letter-spacing: 0.04em;
}
.d_hover .resMain01 .resContactCard01:hover {
  background-color: rgba(255, 255, 255, 0.95);
}
.d_hover .resMain01 .resContactCard01:hover .resContactCard01_img img {
  transform: scale(1.01);
}

/* ==

　17. 固定フッター

=============================================================================== */
.resMain01 .resFixedFooter01 {
  z-index: 1000;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}
.resMain01 .resFixedFooter01_in {
  padding: 0 calc(var(--res-space-unit) * 6) calc(var(--res-space-unit) * 6 + env(safe-area-inset-bottom, 0px));
}
.resMain01 .resFixedFooter01_list {
  display: flex;
  justify-content: center;
}
.resMain01 .resFixedFooter01_list > li:not(:first-child) {
  margin-left: calc(var(--res-space-unit) * 3);
}
.resMain01 .resFixedFooter01_item {
  transform: translateY(150%);
}

.resMain01 .resFixedFooterCard01 {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(calc(var(--res-space-unit) * 5));
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(calc(var(--res-space-unit) * 5));
  width: 177px;
  padding: var(--res-space-unit);
  border-radius: 999em;
  color: var(--res-color-white01);
  text-decoration: none;
  pointer-events: auto;
  transition: background-color 0.3s ease-out;
}
.resMain01 .resFixedFooterCard01_txt {
  width: calc(100% - var(--res-space-unit) * 16);
  padding: 0 0 0 var(--res-space-unit);
  font-size: 100%;
  letter-spacing: 0.08em;
  text-align: center;
}
.resMain01 .resFixedFooterCard01_img {
  width: calc(var(--res-space-unit) * 16);
  height: 100%;
  overflow: hidden;
  border-radius: 999em;
}
.resMain01 .resFixedFooterCard01_img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s ease-out;
}
.d_hover .resMain01 .resFixedFooterCard01:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
.d_hover .resMain01 .resFixedFooterCard01:hover .resFixedFooterCard01_img img {
  transform: scale(1.01);
}

/* ==

　18. モーダル

=============================================================================== */
.resMain01 .resModal01 {
  visibility: hidden;
  z-index: 10000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(5%);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0s 0.3s;
  --resModal01-content-height: 687px;
}
.resMain01 .resModal01.is-open {
  visibility: visible;
  transform: translateY(0);
  clip-path: inset(0% 0 0 0);
  transition: clip-path 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0s;
}
.resMain01 .resModal01_wrap {
  display: grid;
  position: relative;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 45px calc(var(--res-space-unit) * 8) 0;
  overflow: auto;
}
.resMain01 .resModal01_body {
  width: 100%;
  min-width: calc(950px - var(--res-space-unit) * 8 * 2);
  max-width: calc(1440px - var(--res-space-unit) * 8 * 2);
  min-height: calc(740px - var(--res-space-unit) * 8 - var(--res-space-unit) * 5); /*比率的には594px*/
  margin: 0 auto;
  color: var(--res-color-white01);
}
.resMain01 .resModal01_column {
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 0 0 calc(var(--res-space-unit) * 10 + env(safe-area-inset-bottom, 0px));
  gap: calc(var(--res-space-unit) * 14.5);
}
.resMain01 .resModal01_main {
  display: grid;
  grid-template-columns: 1fr calc(var(--res-space-unit) * 78);
  height: var(--resModal01-content-height);
  gap: calc(var(--res-space-unit) * 8);
}
.resMain01 .resModal01_photo {
  position: relative;
  min-width: 0;
}
.resMain01 .resModal01_footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  min-height: calc(var(--res-space-unit) * 17.5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.resMain01 .resModal01Info {
  display: grid;
  position: relative;
  grid-template-rows: 1fr auto;
  height: var(--resModal01-content-height);
  padding: calc(var(--res-space-unit) * 12.5) calc(var(--res-space-unit) * 8) calc(var(--res-space-unit) * 10.5) 0;
  gap: calc(var(--res-space-unit) * 8);
}
.resMain01 .resModal01Info_head {
  text-orientation: mixed;
  writing-mode: vertical-rl;
}
.resMain01 .resModal01Info_category {
  position: absolute;
  top: calc(var(--res-space-unit) * 8);
  right: 0;
  color: var(--res-color-gold01);
  font-weight: 400;
  font-size: 400%;
  font-family: var(--res-fontfamily-noto-serif);
  letter-spacing: 0.08em;
  opacity: 0.2;
}
.resMain01 .resModal01Info_category span {
  text-orientation: upright;
  text-combine-upright: all;
}
.resMain01 .resModal01Info_num {
  position: relative;
  width: 9px;
  margin: calc(var(--res-space-unit) * 1) 0 0;
  padding: 14px 0 0;
  font-weight: 400;
  font-size: 100%;
  line-height: 1;
  font-family: var(--res-fontfamily-inter);
}
.resMain01 .resModal01Info_num::before {
  position: absolute;
  top: 0;
  left: -0.03em;
  width: calc(var(--res-space-unit) * 1.5);
  height: calc(var(--res-space-unit) * 1.5);
  border-radius: 1px;
  background-color: var(--res-color-white01);
  content: "";
}
.resMain01 .resModal01Info_tit {
  margin: 0 calc(var(--res-space-unit) * 8) 0 0;
  font-weight: 400;
  font-size: 200%;
  line-height: 1.6;
  font-family: var(--res-fontfamily-noto-serif);
  letter-spacing: 0.08em;
}
.resMain01 .resModal01Info_tit span {
  text-combine-upright: all;
}
.resMain01 .resModal01Info_txt {
  font-size: 117%;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: justify;
}

/* ==

　19. SNS

=============================================================================== */
.resMain01 .resSocial01 {
  margin: calc(var(--res-space-unit) * 10) 0 calc(var(--res-space-unit) * 5);
  padding: 0 50px;
}
.resMain01 .resSocial01_list {
  display: flex;
  justify-content: flex-end;
}
.resMain01 .resSocial01_item:not(:first-child) {
  margin-left: calc(var(--res-space-unit) * 3.5);
}

/* ==

　20. ファンクション

=============================================================================== */
.resMain01 .fnCarousel01 {
  position: relative;
  height: 100%;
}
.resMain01 .fnCarousel01 .resLoading01 {
  transform: translateY(-1.584em);
}
.resMain01 .fnCarousel01 .swiper {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}
.resMain01 .fnCarousel01.is-loaded .swiper {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.resMain01 .resCarousel01Thumb_in[data-carousel01-thumb] {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}
.resMain01 .resCarousel01Thumb_in[data-carousel01-thumb].is-loaded {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.resMain01 .fnCarousel02 {
  position: absolute;
  top: 0;
  left: 0;
  width: 113.7%;
  height: 100%;
  margin: calc(var(--res-space-unit) * -8) 0 0 -19.3%;
}
.resMain01 .fnCarousel02 .swiper {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}
.resMain01 .fnCarousel02 .resCarousel02_wrap {
  gap: 0;
}
.resMain01 .fnCarousel02.is-loaded .swiper {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.resMain01 .fnFadeIn01 {
  visibility: hidden;
  transform: translateY(15px);
  filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out, filter 0.3s ease-out;
}
.resMain01 .fnFadeIn01.is-inview {
  visibility: visible;
  transform: translateY(0);
  filter: blur(0);
  opacity: 1;
  pointer-events: auto;
}

/* ==

　21. キーフレームアニメーション

=============================================================================== */
@keyframes res-kf-scaleUpBack {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes res-kf-lineLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(50%);
  }
}
@keyframes res-kf-imgLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes res-kf-imgLoop--reverse {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}