@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Amiri+Quran&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap');

/*--------------------------------------------------------------
reset.min.css
リセット関係・clearfixなど

common.css
レイアウト、スタイルを記載したcss

custom.css
公開後のレイアウト、スタイル調整を記載したcss
--------------------------------------------------------------*/
/* ------------------------------------------------------------ */
/* common */
* html body {
  background: url(null) fixed;
}

html {
  font-size: 62.5%;
}

body {
  margin: 0;
  padding: 0;
  background: var(--wh-clr);
  color: var(--wh-clr);
  font-size: 2rem;
  line-height: 5rem;
  font-weight: 400;
  letter-spacing: 0.1rem;
  font-style: normal;
  font-family: "Zen Old Mincho", serif;
  overflow-wrap: break-word;
  text-size-adjust: 100%;
  font-feature-settings: "palt";
}

.sp-none {
  display: none !important;
}

.pc-none {
  display: block !important;
}

@media (min-width: 1024px) {
  .sp-none {
    display: block !important;
  }

  .pc-none {
    display: none !important;
  }
}

/* ------------------------------------------------------------ */
/* font */
.amiri-quran {
  font-family: "Amiri Quran", serif;
  font-weight: 400;
  font-style: normal;
}

.zen-old-mincho {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
}

.eb-garamond {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.bold {
  font-weight: 500;
}

.center {
  text-align: center;
}

.vertical {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  /* 英字や数字も日本語のように正立
	-webkit-text-orientation: upright;
	-ms-text-orientation: upright;
	text-orientation: upright; */
  margin: 0;
  overflow: hidden;
}

.dash {
  display: inline-block;
  width: 38px;
  height: 1px;
  background: var(--wh-clr);
}

.vertical .dash {
  width: 1px;
  height: 38px;
}

span {
  display: inline-block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}

.common_ttl {
  max-width: max-content;
  margin: 0 auto;
}

.common_ttl h2 span {
  display: block;
}

.common_ttl h2 .en {
  font-size: clamp(1.4rem, 1.171rem + 1.14vw, 2.2rem);
  margin-bottom: clamp(0.3rem, 0.1rem + 1vw, 1rem);
}

.common_ttl h2 .jp {
  font-size: clamp(1.7rem, 1.443rem + 1.29vw, 2.6rem);
  line-height: clamp(3rem, 2.714rem + 1.43vw, 4rem);
  letter-spacing: clamp(0.2rem, 0.086rem + 0.57vw, 0.6rem);
}

/* ------------------------------------------------------------ */
/* div */
.is-modal_open {
  overflow: hidden;
}

.wrapper {
  width: 100%;
  height: auto;
}

.inner {
  width: 90%;
  height: auto;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.base {
  width: 100%;
  height: auto;
  position: relative;
}

.flex_cont {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.grid_cont {
  display: grid;
}

/* ------------------------------------------------------------ */
/* img */
img {
  width: 100%;
}

picture {
  display: inline-block;
}

.deco {
  position: absolute;
}

/* ------------------------------------------------------------ */
/* link & btn */
a {
  cursor: pointer;
  line-height: inherit;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
}

a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}

@media (min-width: 751px) {

  /*電話番号リンクをスマホのみ有効にする*/
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}

a.square_btn {
  background: var(--gr-clr);
  color: var(--wh-clr);
  border-radius: 10px;
  display: inline-block;
  font-size: clamp(1.3rem, 1.043rem + 1.29vw, 2.2rem);
  line-height: clamp(1.9rem, 1.014rem + 4.43vw, 5rem);
  letter-spacing: 0.2rem;
  padding: clamp(0.7rem, 0.186rem + 2.57vw, 2.5rem) 0;
  max-width: 60.8rem;
  margin: 0 auto;
  cursor: pointer;
}

a.square_btn:hover {
  background: var(--bk-clr);
}

a.square_btn .btn_arw {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 1px;
  margin-top: 6.4px;
  border-radius: 9999px;
  background-color: var(--wh-clr);
  position: absolute;
  right: 6%;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

a.square_btn .btn_arw::before {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: 0;
  width: 10px;
  height: 1px;
  border-radius: 9999px;
  background-color: var(--wh-clr);
  transform: rotate(45deg);
  transform-origin: calc(100% - 0.5px) 50%;
}

@media (max-width: 599px) {
  a.square_btn .btn_arw {
    right: 10%;
  }
}

/* ------------------------------------------------------------ */
/* background */
.clip_parallax {
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
  overflow: hidden;
  position: relative;
  z-index: 1;
  width: 100%;
}

.clip_parallax .clip_bg {
  width: 100%;
  height: 100vh;
  position: fixed;
  /* background: url(../images/image.webp)center / cover no-repeat; */
  left: 0;
  top: 0;
  right: 0;
  bottom: auto;
  z-index: -1;
}

/* ------------------------------------------------------------ */
/* slider */
.swiper-pagination {
  position: static;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  margin: 11.3rem auto 0;
}

.swiper-pagination-bullet {
  background: #C0C0C0;
  width: 55px;
  height: 1.2px;
  border-radius: 0;
  margin: 0 !important;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background: var(--bk-clr);
}

.swiper-notification {
  display: inline;
}

@media (max-width: 767px) {

  .swiper-pagination,
  .oh_gallery .swiper-pagination {
    margin-top: 3rem;
  }

  .swiper-horizontal>.swiper-pagination-bullets,
  .swiper-pagination-bullets.swiper-pagination-horizontal,
  .swiper-pagination-custom,
  .swiper-pagination-fraction {
    width: 63%;
  }
}

/* hero slider */
.hero .gallery_cont {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.hero .gallery_cont .swiper-wrapper {
  position: fixed;
  z-index: -1;
}

.hero .gallery_cont .swiper-slide {
  height: 100vh;
}

.hero .gallery_cont img {
  -webkit-transition: 7s 1s ease-out;
  transition: 7s 1s ease-out;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero .gallery_cont .swiper-slide[class*=-active] img {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

/* model house slider */
.mh_gallery .swiper-slide {
  height: 100%;
  width: 100%;
  aspect-ratio: 131 / 90;
  overflow: hidden;
}

.mh_gallery .swiper-slide img,
.mh_gallery .swiper-slide a {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.mh_gallery {
  overflow: hidden;
}

.mh_gallery .img_thumb {
  overflow: hidden;
}

.mh_gallery .img_thumb img {
  transition: 0.3s;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mh_gallery .img_thumb:hover img {
  transform: scale(1.1);
}

.mh_gallery a {
  display: block;
  cursor: pointer;
}

.mh_gallery .swiper-wrapper {
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
}

.mh_gallery .swiper-slide-active .img_thumb:after {
  opacity: 0;
}

@media only screen and (min-width: 1025px) {
  .mh_gallery a:hover {
    opacity: 1;
  }
}

@media (min-width: 768px) {

  .mh_gallery .swiper-slide-prev .img_thumb:after,
  .mh_gallery .swiper-slide-next .img_thumb:after {
    opacity: 0;
  }
}

/* owner's house slider */
.oh_gallery .swiper-pagination {
  margin-top: 5.5rem;
}

.gallery_cont .modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
  pointer-events: none;
  opacity: 0;
  z-index: 10001;
  background-color: rgba(255, 255, 255, 0.9);
}

.gallery_cont .modal .img_thumb {
  aspect-ratio: 497 / 341;
  max-height: 682px;
  height: 100%;
  width: 100%;
}

.gallery_cont .modal .img_thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* モーダルがactiveの時 */
.gallery_cont .modal.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* モーダル背景のオーバーレイ部分 */
.gallery_cont .modal_overlay {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* モーダルのコンテンツ */
.gallery_cont .modal_content {
  position: relative;
  width: 100%;
  color: var(--gr-clr);
  height: 788px;
}

.gallery_cont .modal_inner {
  max-width: 1080px;
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* 閉じるボタン */
.gallery_cont .modal_close-btn {
  position: absolute;
  right: 2rem;
  top: 2rem;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 9999;
}

.gallery_cont .modal_close-btn:hover {
  opacity: 0.8;
}

/* 閉じるボタンのX */
.gallery_cont .line_close {
  display: inline-block;
  vertical-align: middle;
  color: var(--bk-clr);
  line-height: 1;
  width: 100%;
  height: 1px;
  background: currentColor;
  position: relative;
  transform: rotate(45deg);
}

.gallery_cont .line_close::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);
}

.gallery_cont .modal .swiper-button-next,
.gallery_cont .modal .swiper-button-prev {
  background: url(../img/icon_gallery_arw_bk.svg)center / cover no-repeat;
  color: transparent;
  top: -6rem;
  bottom: 0;
  margin: auto;
}

.gallery_cont .modal .swiper-button-next {
  right: 39px;
}

.gallery_cont .modal .swiper-button-prev {
  left: 39px;
  transform: scale(-1, 1);
}

.gallery_cont .txt {
  text-align: left;
  margin-top: 3rem;
  width: 100%;
  font-size: clamp(1.4rem, 1.314rem + 0.43vw, 1.7rem);
  line-height: normal;
  letter-spacing: clamp(0.1rem, 0.043rem + 0.29vw, 0.3rem);
}

.gallery_cont .swiper-pointer-events {
  height: 100%;
}

@media (max-width: 559px) {
  .gallery_cont .modal_content {
    height: auto;
  }

  .gallery_cont .swiper-pointer-events {
    height: auto;
  }

  .gallery_cont .modal .swiper-button-next,
  .gallery_cont .modal .swiper-button-prev {
    top: -10rem;
  }

  .gallery_cont .modal .swiper-button-next {
    right: 0;
  }

  .gallery_cont .modal .swiper-button-prev {
    left: 0;
  }
}

/* quality slider */
.quality .gallery_cont {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.quality .gallery_cont .swiper-wrapper {
  position: fixed;
  z-index: -1;
}

.quality .gallery_cont .swiper-slide {
  height: 100vh;
}

.quality .gallery_cont img {
  -webkit-transition: 7s 1s ease-out;
  transition: 7s 1s ease-out;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------ */
/* animation */
/* フェードイン */
.FadeIn {
  opacity: 0;
  transition-duration: 0.8s;
}

.FadeIn.is-show {
  opacity: 1;
}

/* 上へ */
.InUp {
  opacity: 0;
  transform: translate(0, 60px);
  -webkit-transform: translate(0, 60px);
  transition: 1s;
}

.InUp.is-show {
  opacity: 1;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/* 下へ */
.InDw {
  opacity: 0;
  transform: translate(0, -60px);
  -webkit-transform: translate(0, -60px);
  transition: 1s;
}

.InDw.is-show {
  opacity: 1;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/* 左へ */
.InLft {
  opacity: 0;
  transform: translate(60px, 0);
  -webkit-transform: translate(60px, 0);
  transition: 1s;
}

.InLft.is-show {
  opacity: 1;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/* 右へ */
.InRgt {
  opacity: 0;
  transform: translate(-60px, 0);
  -webkit-transform: translate(-60px, 0);
  transition: 1s;
}

.InRgt.is-show {
  opacity: 1;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/* シール横 */
.StickerX {
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  transition: 1s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}

.StickerX.is-show {
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
}

/* シール縦 */
.StickerY {
  -webkit-clip-path: inset(0 0 100% 0);
  clip-path: inset(0 0 100% 0);
  transition: 1s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}

.StickerY.is-show {
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
}

/* マトリックス */
.Matrix .bg_wrap {
  overflow: hidden;
  opacity: 0;
  display: block;
}

.Matrix .bg_wrap .inn {
  opacity: 0;
  transform: Matrix(1, 0, 0, 1, 0, 100);
  transition-duration: 1s;
  transition-delay: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  display: inline-block;
}

.Matrix.is-show .bg_wrap {
  opacity: 1;
  width: -webkit-max-content;
  width: max-content;
}

.Matrix.is-show .bg_wrap .inn {
  opacity: 1;
  transform: Matrix(1, 0, 0, 1, 0, 0);
  display: inline-block;
}

/* フォーカス */
.FocusIn {
  opacity: 0;
}

.FocusIn.is-show {
  -webkit-animation: FocusIn 0.6s cubic-bezier(0.550, 0.085, 0.680, 0.530) 0.2s both;
  animation: FocusIn 0.6s cubic-bezier(0.550, 0.085, 0.680, 0.530) 0.2s both;
}

@-webkit-keyframes FocusIn {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }

  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}

@keyframes FocusIn {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }

  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}

/* 円を描く */
/* 参考：https://askne.blog/2023/05/14/丸の縁をcssで描画するアニメーションについて/ */
.shape {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  width: 100%;
  height: 100%;
}

.circle-wrapper-sp {
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

.CircleAnimation {
  stroke-dasharray: 656;
  /* 2 * π * r = 2 * π * 104.5 ≈ 656 */
  stroke-dashoffset: 656;
  transform: rotate(90deg);
  transform-origin: 50% 50%;
}

.shape.is-show .CircleAnimation {
  animation: dash 2.5s ease-in-out forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

/* 表示までの時間 */
.in01 {
  animation-delay: 0.5s !important;
  transition-delay: 0.5s !important;
}


/* ------------------------------------------------------------ */
/* hero */
.hero {
  color: var(--wh-clr);
  width: 100%;
  height: 100vh;
  aspect-ratio: 40 / 71;
  overflow: hidden;
}

.hero .inner {
  max-width: 1374px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero .inner .logo {
  width: clamp(10.8rem, 8.886rem + 9.57vw, 17.5rem);
  position: absolute;
  top: clamp(2.5rem, 2.329rem + 0.86vw, 3.1rem);
  left: 3.3rem;
}

.hero .ttl_cont {
  max-width: 924px;
  width: 100%;
  margin: 0 auto;
}

.hero .ttl_cont .ttl h1 {
  font-size: clamp(1.3rem, 0.122rem + 5.31vw, 4.9rem);
  margin-bottom: 5.5rem;
  letter-spacing: clamp(0.1rem, 0.035rem + 0.29vw, 0.3rem);
}

.hero .ttl_cont .ttl .fuki_cont {
  max-width: 704px;
  margin: 0 auto;
}

.hero .ttl_cont .ttl h2 {
  font-size: clamp(2rem, 1.346rem + 2.95vw, 4rem);
  line-height: clamp(3.5rem, 2.191rem + 5.9vw, 7.5rem);
  letter-spacing: clamp(0.3rem, 0.1rem + 1vw, 1rem);
  margin: 0 auto 6rem;
  max-width: 739px;
  width: 100%;
}

.hero .ttl_cont .ttl h2 .fuki {
  width: 22%;
  position: absolute;
  bottom: 0.5rem;
  right: -0.8rem;
}

.hero .ttl_cont .ttl h2 .brush {
  z-index: -1;
}

.hero .ttl_cont .ttl h2 .brush-1 {
  max-width: 261px;
  margin: 0 auto;
  left: -25px;
  right: 0;
  top: 32px;
}

.hero .ttl_cont .ttl h2 .brush-2 {
  max-width: 491px;
  margin: 0 auto;
  left: -19px;
  right: 0;
  bottom: -22px;
}

.hero .ttl_cont .ttl .open {
  font-size: clamp(1.5rem, 1.329rem + 0.86vw, 2.1rem);
  letter-spacing: 0.2rem;
  line-height: normal;
  max-width: max-content;
  padding-bottom: 0.5rem;
  margin: 0 auto;
}

.hero .ttl_cont .ttl .open::before {
  content: "";
  background: url(../img/deco_line_wh.webp)left / 260px repeat-x;
  width: 100%;
  height: 5px;
  position: absolute;
  bottom: -0.3rem;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.hero .ttl_cont .copy {
  font-size: clamp(1.3rem, 1.043rem + 1.29vw, 2.2rem);
  line-height: normal;
  letter-spacing: 0.6rem;
  height: max-content;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto 0;
}

.hero .deco-1 {
  max-width: 8rem;
  right: 2rem;
  top: -2.5rem;
}

.hero .deco-2 {
  max-width: 9rem;
  left: 1.5rem;
  bottom: -4rem;
}

@media (max-width: 559px) {
  .hero .inner {
    width: 100%;
  }

  .hero .inner .logo {
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  .hero .ttl_cont {
    height: 100%;
  }

  .hero .ttl_cont .ttl {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    margin-top: -10%;
  }

  .hero .ttl_cont .ttl h1 {
    margin-bottom: 0;
  }

  .hero .ttl_cont .ttl h2 {
    margin-bottom: 0;
    /* max-width: 294px; */
    width: 90%;
  }

  .hero .ttl_cont .ttl h2 .fuki {
    width: 70px;
    top: -8rem;
    bottom: auto;
    right: -5rem;
  }

  .hero .ttl_cont .ttl h2 .brush-1 {
    max-width: 165px;
    left: -20px;
    top: 24px;
  }

  .hero .ttl_cont .ttl h2 .brush-2 {
    max-width: 325px;
    left: -19px;
    bottom: -12px;
  }

  .hero .ttl_cont .ttl .open {
    position: absolute;
    bottom: 8%;
  }

  .hero .ttl_cont .ttl .fuki_cont {
    max-width: max-content;
  }

  .hero .ttl_cont .copy {
    left: 3%;
  }

  .hero .deco-1 {
    top: auto;
    bottom: -14%;
    right: -6%;
    transform: scale(-1, -1) rotate(-75deg);
    width: 16%;
  }

  .hero .deco-2 {
    top: -15%;
    left: -5%;
    transform: rotate(100deg);
    width: 17%;
  }
}

@media (max-width: 400px) {
  .hero .ttl_cont .ttl h2 .fuki {
    right: -3.5rem;
  }
}

@media (min-width: 1024px) {

  .hero,
  .hero.clip_parallax .clip_bg {
    aspect-ratio: 45 / 32;
  }
}

/* ------------------------------------------------------------ */
/* point */
.point {
  color: var(--gr-clr);
  padding: clamp(8rem, 5.486rem + 12.57vw, 16.8rem) 0 clamp(10.3rem, 8.5rem + 9vw, 16.6rem);
}

.point .clip_bg {
  background: url(../img/point_img_1.webp)center / cover no-repeat;
}

.point .ttl_cont {
  margin-bottom: clamp(4.3rem, 1.414rem + 14.43vw, 14.4rem);
}

.point .ttl_cont h2 {
  font-size: clamp(1.7rem, 1.386rem + 1.57vw, 2.8rem);
  line-height: clamp(3rem, 1.857rem + 5.71vw, 7rem);
  max-width: max-content;
  margin: 0 auto clamp(0.5rem, -0.7rem + 6vw, 4.7rem);
}

.point .ttl_cont p {
  font-size: clamp(1.3rem, 1.1rem + 1vw, 2rem);
  line-height: clamp(2.8rem, 1.886rem + 4.57vw, 6rem);
}

.point .btn_cont {
  max-width: clamp(25rem, 14.771rem + 51.14vw, 60.8rem);
  margin: 0 auto;
}

.point .btn_cont .fuki {
  width: 18.6rem;
  position: absolute;
  top: -12.8rem;
  left: -14rem;
}

.point .point_cont {
  max-width: 70.7rem;
  margin: clamp(6.9rem, 3.1rem + 19vw, 20.2rem) auto 0;
  grid-template-columns: 1fr 1fr;
}

.point .point_cont .common_ttl {
  grid-column: 1 / 2;
}

.point .point_cont .common_ttl h2 .jp {
  font-size: clamp(1.6rem, 1.486rem + 0.57vw, 2rem);
  line-height: clamp(3rem, 2.6rem + 2vw, 4.4rem);
}

.point .point_cont .point_list {
  font-size: clamp(1.3rem, 1.157rem + 0.71vw, 1.8rem);
  line-height: clamp(3rem, 2.343rem + 3.29vw, 5.3rem);
  grid-column: 2 / 3;
}

.point .point_cont .point_list .point_item {
  position: relative;
  padding-left: clamp(1.5rem, 1.214rem + 1.43vw, 2.5rem);
}

.point .point_cont .point_list .point_item::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
}

@media (max-width: 599px) {
  .point .btn_cont .fuki {
    position: initial;
    width: 22.5rem;
    margin-bottom: 1.4rem;
  }

  .point .point_cont {
    display: block;
    width: 90%;
    max-width: max-content;
  }

  .point .point_cont .common_ttl {
    text-align: center;
    margin-bottom: 2.6rem;
  }
}

/* ------------------------------------------------------------ */
/* experience */
.exp {
  overflow: hidden;
  background: var(--wh-clr);
  color: var(--gr-clr);
}

.exp .ttl_cont {
  color: var(--wh-clr);
  padding: 26rem 0;
}

.exp .ttl_cont .common_ttl h2 .en {
  margin-bottom: clamp(0.8rem, -0.114rem + 4.57vw, 4rem);
}

.exp .clip_bg {
  background: url(../img/exp_img_1.webp)center / cover no-repeat;
}

.exp .inner {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

.exp .exp_list {
  padding: clamp(6rem, 1.229rem + 23.86vw, 22.7rem) 0 clamp(8rem, 40vw, 36rem);
}

.exp .exp_list .exp_item .txt_cont h3 {
  max-width: max-content;
}

.exp .exp_list .exp_item .txt_cont h3 span {
  vertical-align: middle;
}

.exp .exp_list .exp_item .txt_cont h3 .num {
  font-size: clamp(3.5rem, 2.786rem + 3.57vw, 6rem);
}

.exp .exp_list .exp_item .txt_cont h3 .jp {
  font-size: clamp(1.6rem, 1.343rem + 1.29vw, 2.5rem);
  letter-spacing: 0.3rem;
}

.exp .exp_list .exp_item .txt_cont p {
  font-size: clamp(1.3rem, 1.1rem + 1vw, 2rem);
  line-height: clamp(3rem, 2.714rem + 1.43vw, 4rem);
  margin: clamp(1.8rem, 1.314rem + 2.43vw, 3.5rem) auto clamp(1.8rem, 1.6rem + 1vw, 2.5rem);
}

.exp .exp_list .exp_item .txt_cont .tag_list {
  justify-content: flex-start;
}

.exp .exp_list .exp_item .txt_cont .tag_list .tag_item {
  position: relative;
  padding: 0 0 1rem clamp(1.2rem, 1.029rem + 0.86vw, 1.8rem);
  margin-right: clamp(1rem, 0.143rem + 4.29vw, 4rem);
  font-size: clamp(1.3rem, 1.214rem + 0.43vw, 1.6rem);
  line-height: normal;
}

.exp .exp_list .exp_item .txt_cont .tag_list .tag_item::before {
  content: "#";
  position: absolute;
  top: 0;
  left: 0;
}

.exp .exp_list .exp_item .txt_cont .tag_list .tag_item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: url(../img/deco_line_gr.webp)left / 260px no-repeat;
}

.exp .exp_list .exp_item .txt_cont .tag_list .tag_item:last-of-type {
  margin-right: 0;
}

.exp .exp_list .exp_item-1 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  column-gap: clamp(3rem, 2rem + 2vw, 6rem);
  row-gap: 15rem;
  align-items: start;
}

.exp .exp_list .exp_item-1 .ph-1 {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: 821px;
  justify-self: start;
}

.exp .exp_list .exp_item-1 .txt_cont {
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
  align-self: end;
  max-width: max-content;
}

.exp .exp_list .exp_item-1 .ph-2 {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  max-width: 673px;
  justify-self: end;
}

.exp .exp_list .exp_item-1 .ph-3 {
  grid-column: 2;
  grid-row: 3;
  display: grid;
  width: 100%;
  max-width: 638px;
  justify-self: start;
  margin-left: -10.5rem;
}

.exp .exp_list .exp_item-1 .ph-3 .ph:first-child {
  width: 47%;
  margin: 0;
}

.exp .exp_list .exp_item-1 .ph-3 .ph:last-child {
  width: 62%;
  margin: -5.8rem 0 0 auto;
}

.exp .deco-1 {
  width: 232px;
  top: 0;
  right: 0;
}

.exp .deco-2 {
  width: 203px;
  left: 0;
  bottom: 14.1rem;
}

.exp .exp_list .exp_item-2 {
  grid-template-columns: 42% 1fr;
  column-gap: clamp(3rem, 2rem + 2vw, 6rem);
  row-gap: 5.8rem;
  align-items: end;
}

.exp .exp_list .exp_item-2 .ph-1 {
  grid-column: 1;
  grid-row: 1;
  max-width: 599px;
  margin-right: -7.1rem;
}

.exp .exp_list .exp_item-2 .ph-2 {
  grid-column: 1;
  grid-row: 2;
  max-width: 394px;
  justify-self: start;
  margin: 0 0 40px 0;
}

.exp .exp_list .exp_item-2 .txt_cont {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  justify-self: center;
  max-width: max-content;
  padding-bottom: 2.5rem;
}

.exp .exp_list .exp_item-3 {
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(3rem, 2rem + 2vw, 6rem);
  row-gap: clamp(3rem, 2rem + 2vw, 6rem);
  align-items: end;
  margin-top: -15rem;
}

.exp .exp_list .exp_item-3 .txt_cont {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  justify-self: center;
  max-width: max-content;
}

.exp .exp_list .exp_item-3 .ph-1 {
  grid-column: 2;
  grid-row: 1;
  max-width: 349px;
  justify-self: start;
  margin: 0 0 0 auto;
}

.exp .exp_list .exp_item-3 .ph-2 {
  grid-column: 2;
  grid-row: 2;
  max-width: 550px;
  justify-self: end;
  margin: 0;
}

.exp .exp_list .exp_item-4 {
  display: block;
  text-align: center;
  margin-top: clamp(8.7rem, 5.7rem + 15vw, 19.2rem);
}

.exp .exp_list .exp_item-4 .ph-1 {
  width: 100%;
  max-width: 1113px;
  margin: 0 auto;
}

@media (max-width: 559px) {
  .exp .ttl_cont {
    padding: 0;
    color: var(--gr-clr);
  }

  .exp .ttl_cont .common_ttl {
    margin: 6.9rem auto 0;
  }

  .exp .exp_list .exp_item {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
  }

  .exp .exp_list .exp_item .txt_cont {
    max-width: 90%;
    margin: 0 auto;
  }

  .exp .exp_list .exp_item-1 {
    margin-bottom: 5.4rem;
  }

  .exp .exp_list .exp_item-1 .ph-1 {
    max-width: 78%;
    margin: 0 0 5.9rem 0;
  }

  .exp .exp_list .exp_item-1 .txt_cont {
    order: 3;
    margin-bottom: 6rem;
  }

  .exp .exp_list .exp_item-1 .ph-2 {
    order: 2;
    width: 68%;
    margin: 0 0 5.2rem auto;
  }

  .exp .exp_list .exp_item-1 .ph-3 {
    order: 3;
    margin: 0 auto;
    max-width: 78%;
  }

  .exp .exp_list .exp_item-1 .ph-3 .ph:last-child {
    margin-top: 1.7rem;
  }

  .exp .exp_list .exp_item-1 .ph-3 .ph:first-child {
    width: 58%;
  }

  .exp .exp_list .exp_item-1 .ph-3 .ph:last-child {
    width: 76%;
  }

  .exp .exp_list .exp_item-2 .txt_cont {
    order: 1;
    padding: 0;
    margin-bottom: 6rem;
  }

  .exp .exp_list .exp_item-2 .ph-1 {
    order: 2;
    margin: 0 5% 5rem auto;
    max-width: 75%;
  }

  .exp .exp_list .exp_item-2 .ph-2 {
    order: 3;
    max-width: 52%;
  }

  .exp .exp_list .exp_item-3 {
    margin: 0;
  }

  .exp .exp_list .exp_item-3 .txt_cont {
    order: 1;
    margin-bottom: 5.2rem;
  }

  .exp .exp_list .exp_item-3 .ph-1 {
    order: 2;
    margin: 0 9% 4.8rem auto;
    max-width: 56%;
  }

  .exp .exp_list .exp_item-3 .ph-2 {
    order: 3;
    margin: 0 auto;
    max-width: 71%;
  }

  .exp .deco-1 {
    width: 100px;
    top: 12.7rem;
    right: -10%;
  }

  .exp .deco-2 {
    width: 90px;
    top: -6rem;
    right: 0;
    left: auto;
    bottom: auto;
  }
}

/* ------------------------------------------------------------ */
/* model house guide */
.mh {
  background: var(--gr-clr);
  color: var(--wh-clr);
  padding: clamp(7.5rem, 3.614rem + 19.43vw, 21.1rem) 0 clamp(10rem, 7.057rem + 14.71vw, 20.3rem);
}

.mh .inner {
  max-width: 983px;
}

.mh .ttl_cont {
  margin-bottom: clamp(5.3rem, 4.157rem + 5.71vw, 9.3rem);
}

.mh .ttl_cont .common_ttl h2 .en {
  margin-bottom: clamp(1.5rem, 1.357rem + 0.71vw, 2rem);
}

.mh .floor_list {
  grid-template-columns: 1fr 1fr;
  gap: 9.7rem;
  margin-bottom: clamp(7rem, 4.829rem + 10.86vw, 14.6rem);
}

.mh .floor_list .floor_item {
  max-width: 434px;
}

.mh .floor_list .floor_item p {
  font-size: 1.4rem;
  line-height: normal;
  margin: 0 0 clamp(1.5rem, 1.071rem + 2.14vw, 3rem) clamp(1.5rem, 1.214rem + 1.43vw, 2.5rem);
}

.mh .floor_list .floor_item p .label {
  border: 1px solid var(--wh-clr);
  padding: 0.4rem clamp(1.4rem, 1.114rem + 1.43vw, 2.4rem);
  margin-right: clamp(1rem, 0.771rem + 1.14vw, 1.8rem);
}

@media (max-width: 559px) {
  .mh .floor_list {
    display: block;
  }

  .mh .floor_list .floor_item:not(:last-of-type) {
    margin-bottom: 3.1rem;
  }
}

/* ------------------------------------------------------------ */
/* outdoor & smart life */
.osl {
  padding: clamp(6rem, 0.657rem + 26.71vw, 24.7rem) 0 clamp(10rem, 3.743rem + 31.29vw, 31.9rem);
}

.osl .clip_bg {
  background: url(../img/osl_img_1.webp?260326)center / cover no-repeat;
}

.osl .inner {
  max-width: 480px;
}

.osl .list_cont h3 {
  font-size: clamp(1.6rem, 1.4rem + 1vw, 2.3rem);
  margin-bottom: clamp(2rem, 1.286rem + 3.57vw, 4.5rem);
}

.osl .list_cont p {
  font-size: clamp(1.4rem, 1.229rem + 0.86vw, 2rem);
  line-height: clamp(2.5rem, 1.929rem + 2.86vw, 4.5rem);
  margin-top: clamp(2rem, 1.429rem + 2.86vw, 4rem);
}

.osl .ttl_cont {
  margin-bottom: 12.2rem;
}

.osl .list_cont .osl_list .list_item {
  border: 1px solid var(--wh-clr);
  border-radius: 5px;
  font-size: clamp(1.5rem, 1.414rem + 0.43vw, 1.8rem);
  padding: 0;
}

.osl .list_cont .osl_list .list_item:not(:last-child) {
  margin-bottom: clamp(2rem, 1.8rem + 1vw, 2.7rem);
}

.osl .list_cont .osl_list .list_item .txt {
  max-width: 270px;
  width: 100%;
  margin: 0 auto;
  vertical-align: middle;
}

.osl .list_cont .osl_list .list_item .txt * {
  vertical-align: middle;
}

.osl .list_cont .osl_list .list_item .txt .icon {
  margin-right: 2.7rem;
  position: relative;
  top: -0.7rem;
}

.osl .list_cont.pet_list {
  margin-bottom: clamp(5rem, 1.429rem + 17.86vw, 17.5rem);
}

.osl .list_cont.pet_list .list_item:first-of-type .icon {
  width: clamp(4rem, 3.829rem + 0.86vw, 4.6rem);
}

.osl .list_cont.pet_list .list_item:last-of-type .icon {
  width: clamp(3.1rem, 2.957rem + 0.71vw, 3.6rem);
}

.osl .list_cont.energie_list .list_item:first-of-type .icon {
  width: clamp(4.7rem, 4.5rem + 1vw, 5.4rem);
}

.osl .list_cont.energie_list .list_item:last-of-type .icon {
  width: clamp(3.9rem, 3.757rem + 0.71vw, 4.4rem);
}

@media (max-width: 559px) {
  .osl .clip_bg {
    background: url(../img/sp_osl_img_1.webp?260326)center / cover no-repeat;
  }

  .osl .ttl_cont {
    margin-bottom: 23.5rem;
  }

  .osl .list_cont .osl_list .list_item .txt {
    max-width: 230px;
  }
}

/* ------------------------------------------------------------ */
/* stay */
.stay .wrap {
  grid-template-columns: 1fr 1fr;
}

.stay .wrap .inner {
  max-width: 429px;
}

.stay .txt_cont {
  background: var(--gr-clr);
  grid-column: 1 / 2;
  padding: clamp(7.8rem, 3.343rem + 22.29vw, 23.4rem) 0 clamp(9.8rem, 6.571rem + 16.14vw, 21.1rem);
}

.stay .txt_cont .ttl_cont {
  margin-bottom: 7rem;
}

.stay .txt_cont .ttl_cont .common_ttl {
  margin: 0;
}

.stay .txt_cont .list_cont p {
  font-size: clamp(1.4rem, 1.229rem + 0.86vw, 2rem);
  line-height: clamp(2.5rem, 1.843rem + 3.29vw, 4.8rem);
}

.stay .txt_cont .list_cont .stay_list {
  grid-template-columns: repeat(2, 1fr);
  gap: 2.1rem;
  margin: clamp(2.5rem, 1.986rem + 2.57vw, 4.3rem) 0 clamp(2.5rem, 2.3rem + 1vw, 3.2rem);
}

.stay .txt_cont .list_cont .stay_list .stay_item {
  width: 100%;
  border: 1px solid var(--wh-clr);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stay .txt_cont p.att {
  color: var(--ylw-clr);
  font-size: clamp(1.3rem, 1.214rem + 0.43vw, 1.6rem);
  line-height: clamp(2.8rem, 2.314rem + 2.43vw, 4.5rem);
  margin-top: clamp(4.5rem, 4.357rem + 0.71vw, 5rem);
}

.stay .txt_cont .att .bdr {
  line-height: normal;
  border-bottom: 1px solid var(--ylw-clr);
  margin-bottom: 2rem;
  max-width: max-content;
  display: block;
}

.stay .ph_cont {
  grid-column: 2 / 3;
}

.stay .ph_cont .clip_bg {
  background: url(../img/stay_img_1.webp?260326)center right / 50% no-repeat var(--gr-clr);
}

@media (max-width: 559px) {
  .stay .wrap {
    display: block;
  }

  .stay .clip_bg {
    background: url(../img/sp_stay_img_1.webp?260326)center / cover no-repeat;
  }

  .stay .txt_cont {
    background: transparent;
    text-align: center;
  }

  .stay .txt_cont .ttl_cont {
    margin-bottom: 19.8rem;
  }

  .stay .txt_cont .ttl_cont .common_ttl {
    margin: 0 auto;
  }

  .stay .txt_cont .list_cont .stay_list {
    display: block;
    max-width: 63%;
    margin: 2.5rem auto;
  }

  .stay .txt_cont .list_cont .stay_list .stay_item:not(:last-of-type) {
    margin-bottom: 1rem;
  }

  .stay .txt_cont .att .bdr {
    margin: 0 auto 1.5rem;
  }
}

/* ------------------------------------------------------------ */
/* concept */
.concept {
  padding: clamp(13.5rem, 7.643rem + 29.29vw, 34rem) 0 clamp(17rem, 10.714rem + 31.43vw, 39rem);
  color: var(--gr-clr);
}

.concept .clip_bg {
  background: url(../img/concept_img_1.webp)center / cover no-repeat;
}

.concept .ttl_cont .common_ttl {
  margin-bottom: clamp(4rem, 3.2rem + 4vw, 6.8rem);
}

.concept .ttl_cont p {
  font-size: clamp(1.4rem, 1.229rem + 0.86vw, 2rem);
  line-height: clamp(3.5rem, 2.929rem + 2.86vw, 5.5rem);
}

/* ------------------------------------------------------------ */
/* quality */
.quality {
  padding: clamp(8.5rem, -0.643rem + 45.71vw, 40.5rem) 0 clamp(12.6rem, 9.086rem + 17.57vw, 24.9rem);
  overflow: hidden;
}

.quality .ttl_cont .common_ttl {
  margin-bottom: clamp(4rem, 3.2rem + 4vw, 6.8rem);
}

.quality .ttl_cont p {
  font-size: clamp(1.4rem, 1.229rem + 0.86vw, 2rem);
  line-height: clamp(3.5rem, 2.929rem + 2.86vw, 5.5rem);
}

/* ------------------------------------------------------------ */
/* oh */
.oh {
  background: var(--bw-clr);
  padding: clamp(6.5rem, 2.071rem + 22.14vw, 22rem) 0 clamp(8.7rem, 3.414rem + 26.43vw, 27.2rem);
  overflow: hidden;
}

.oh .inner {
  max-width: 1440px;
}

.oh .ttl_cont {
  margin-bottom: clamp(6.2rem, 2.829rem + 16.86vw, 18rem);
}

.oh .ttl_cont .common_ttl {
  margin-bottom: clamp(4rem, 3.2rem + 4vw, 6.8rem);
}

.oh .ttl_cont .common_ttl .en {
  margin-bottom: clamp(0.3rem, -0.329rem + 3.14vw, 2.5rem);
}

.oh .ttl_cont .common_ttl h2 .jp {
  font-size: clamp(1.6rem, 1.429rem + 0.86vw, 2.2rem);
  line-height: clamp(3.3rem, 2.586rem + 3.57vw, 5.8rem);
}

.oh .oh_list .oh_item {
  grid-template-columns: 43% 57%;
}

.oh .oh_list .oh_item:last-of-type {
  grid-template-columns: 57% 43%;
}

.oh .oh_list .oh_item:not(:last-of-type) {
  margin-bottom: clamp(14rem, 9.829rem + 20.86vw, 28.6rem);
}

.oh .oh_list .oh_item * {
  align-self: center;
}

.oh .oh_list .txt_cont {
  grid-template-columns: auto 1fr;
  grid-column: 1 / 2;
  grid-row: 1;
  justify-self: center;
  gap: 10%;
  padding: 0 5%;
}

.oh .oh_list .oh_item:last-of-type .txt_cont {
  grid-template-columns: 1fr auto;
  grid-column: 2 / 3;
}

.oh .oh_list .txt_cont .ttl {
  grid-column: 1 / 2;
  letter-spacing: 0.5rem;
  height: max-content;
  align-self: self-start;
  grid-row: 1;
  font-size: clamp(1.6rem, 1.429rem + 0.86vw, 2.2rem);
}

.oh .oh_list .txt_cont .ttl h3 {
  height: max-content;

}

.oh .oh_list .oh_item:last-of-type .txt_cont .ttl {
  grid-column: 2 / 3;
}

.oh .oh_list .txt_cont .txt {
  grid-column: 2 / 3;
  justify-self: flex-start;
  grid-row: 1;
  max-width: 390px;
  justify-self: center;
}

.oh .oh_list .oh_item:last-of-type .txt_cont .txt {
  grid-column: 1 / 2;
}

.oh .oh_list .txt_cont .txt h4 .en {
  font-size: clamp(1.2rem, 1.143rem + 0.29vw, 1.4rem);
  line-height: normal;
  margin-bottom: clamp(1rem, 0.657rem + 1.71vw, 2.2rem);
}

.oh .oh_list .txt_cont .txt h4 .jp {
  font-size: clamp(1.4rem, 1.314rem + 0.43vw, 1.7rem);
  line-height: clamp(2.5rem, 2.214rem + 1.43vw, 3.5rem);
  margin-bottom: clamp(1rem, 0.657rem + 1.71vw, 2.2rem);
}

.oh .oh_list .txt_cont .txt span {
  display: block;
}

.oh .oh_list .txt_cont p {
  font-size: clamp(1.3rem, 1.186rem + 0.57vw, 1.7rem);
  line-height: clamp(2.7rem, 2.471rem + 1.14vw, 3.5rem);
}

.oh .oh_list .gallery_cont {
  grid-column: 2 / 3;
  max-width: 816px;
  aspect-ratio: 204 / 125;
  grid-row: 1;
}

.oh .oh_list .oh_item:last-of-type .gallery_cont {
  grid-column: 1 / 2;
}

.oh .oh_list .gallery_cont .oh_gallery,
.oh .oh_list .gallery_cont .oh_gallery .swiper-slide {
  width: 100%;
}

.oh .oh_list .deco {
  z-index: 2;
}

.oh .deco-1 {
  width: 232px;
  top: -15rem;
  right: 0;
}

.oh .deco-2 {
  width: 203px;
  top: -22rem;
  left: 0;
}

_::-webkit-full-page-media,
_:future,
:root .oh .oh_list .oh_item:first-of-type .txt_cont .ttl h3 {
  margin-right: 3rem;
}

@media (max-width: 599px) {
  .oh .oh_list .oh_item {
    display: block;
  }

  .oh .oh_list .txt_cont,
  .oh .oh_list .oh_item:last-of-type .txt_cont {
    padding: 0 5%;
    margin-bottom: 3rem;
  }

  .oh .oh_list .txt_cont .txt {
    align-self: flex-start;
    max-width: 100%;
  }

  .oh .oh_list .oh_item:last-of-type .txt_cont .ttl {
    grid-column: 1 / 2;
  }

  .oh .oh_list .oh_item:last-of-type .txt_cont .txt {
    grid-column: 2 / 3;
  }

  .oh .deco-1 {
    width: 100px;
    top: 0;
    right: -5%;
  }

  .oh .deco-2 {
    width: 90px;
    top: -5.7rem;
    right: -4%;
    left: auto;
  }

  _::-webkit-full-page-media,
  _:future,
  :root .oh .oh_list .oh_item:last-of-type .txt_cont .ttl h3 {
    margin-right: 3rem;
  }
}

/* ------------------------------------------------------------ */
/* access */
.access {
  background: var(--bw-clr);
  padding: clamp(8.5rem, 2.214rem + 31.43vw, 30.5rem) 0;
}

.access .inner {
  max-width: 744px;
}

.access .rsv_cont {
  margin-bottom: clamp(4.2rem, 1.857rem + 11.71vw, 12.4rem);
}

.access .rsv_cont .ttl_cont {
  max-width: max-content;
  margin: 0 auto clamp(4.3rem, 3.443rem + 4.29vw, 7.3rem);
  padding-bottom: 1rem;
}

.access .rsv_cont .ttl_cont::before {
  content: "";
  background: url(../img/deco_line_wh.webp) left / 260px repeat-x;
  width: 100%;
  height: 5px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.access .list_cont .rsv_list {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: clamp(2.8rem, 2.6rem + 1vw, 3.5rem);
  gap: 3.1rem;
}

.access .list_cont .rsv_list .rsv_item {
  width: 100%;
  height: 100%;
  border: 1px solid var(--wh-clr);
  border-radius: 9999px;
  aspect-ratio: 1 / 1;
  flex-wrap: wrap;
  align-content: center;
  font-size: clamp(1.2rem, 1.029rem + 0.86vw, 1.8rem);
  line-height: clamp(2rem, 1.486rem + 2.57vw, 3.8rem);
}

.access .list_cont .rsv_list .rsv_item:first-of-type .icon {
  max-width: clamp(3rem, 2.629rem + 1.86vw, 4.3rem);
}

.access .list_cont .rsv_list .rsv_item:nth-of-type(2) .icon {
  max-width: clamp(3.5rem, 3.1rem + 2vw, 4.9rem);
}

.access .list_cont .rsv_list .rsv_item:last-of-type .icon {
  max-width: clamp(5rem, 4.343rem + 3.29vw, 7.3rem);
}

.access .list_cont .rsv_list .rsv_item span {
  display: block;
  width: 100%;
  margin-top: clamp(1.1rem, 1.014rem + 0.43vw, 1.4rem);
}

.access .list_cont p {
  font-size: clamp(1.4rem, 1.229rem + 0.86vw, 2rem);
}

.access .map_cont .map {
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  row-gap: 6rem;
}

.access .map_cont .map .ttl_cont {
  grid-template-columns: repeat(2, 1fr);
  grid-column: 1 / 2;
}

.access .map_cont .map .ttl_cont .common_ttl {
  margin: 0;
}

.access .map_cont .map .ttl_cont .common_ttl h2 .jp {
  font-size: clamp(1.6rem, 1.486rem + 0.57vw, 2rem);
  margin: clamp(1.6rem, 1.114rem + 2.43vw, 3.3rem) 0 clamp(0.3rem, -0.186rem + 2.43vw, 2rem);
}

.access .map_cont .map .ttl_cont p {
  font-size: clamp(1.4rem, 1.314rem + 0.43vw, 1.7rem);
  line-height: clamp(2.5rem, 2.214rem + 1.43vw, 3.5rem);
  margin-bottom: 3.5rem;
}

.access .map_cont .map .ttl_cont a {
  font-size: clamp(1.3rem, 1.214rem + 0.43vw, 1.6rem);
  line-height: normal;
  border-bottom: 1px solid var(--wh-clr);
  max-width: max-content;
}

.access .map_cont iframe {
  grid-column: 2 / 3;
  width: 100%;
  aspect-ratio: 392 / 269;
}

.access .map_cont .ph {
  width: 100%;
  margin-top: 8.9rem;
}

.access .deco-1 {
  max-width: 68px;
  top: -3rem;
  left: 10rem;
}

.access .deco-2 {
  max-width: 86px;
  right: -4rem;
  bottom: 0;
}

.access .deco-3 {
  max-width: 74px;
  top: -4rem;
  left: -7rem;
}

.access .deco-4 {
  max-width: 67px;
  right: -6rem;
  bottom: -7rem;
}

@media (max-width: 599px) {
  .access .list_cont .rsv_list {
    grid-template-columns: repeat(2, 200px);
    justify-content: center;
    gap: 0;
  }

  .access .list_cont .rsv_list .rsv_item {
    max-width: 155px;
  }

  .access .list_cont .rsv_list .rsv_item:first-of-type {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .access .list_cont .rsv_list .rsv_item:nth-of-type(2) {
    justify-self: flex-end;
    margin-right: 1.5rem;
  }

  .access .list_cont .rsv_list .rsv_item:last-of-type {
    justify-self: flex-start;
    margin-left: 1.5rem;
  }

  .access .map_cont {
    display: grid;
    grid-template-areas:
      "ttl-en"
      "ph"
      "ttl-jp"
      "ttl-p"
      "iframe"
      "ttl-a";
  }

  .access .map_cont .map .ttl_cont,
  .access .map_cont .map .ttl_cont .common_ttl,
  .access .map_cont .map .ttl_cont .common_ttl h2,
  .access .map_cont .map {
    display: contents;
    /*.ttl_cont の中身が 親のgridに直接参加*/
  }

  .access .map_cont .map .ttl_cont .common_ttl h2 .en {
    grid-area: ttl-en;
    text-align: center;
  }

  .access .map_cont .map .ttl_cont .common_ttl h2 .jp {
    grid-area: ttl-jp;
  }

  .access .map_cont .map .ttl_cont p {
    grid-area: ttl-p;
  }

  .access .map_cont .map .ttl_cont a {
    grid-area: ttl-a;
    margin-top: 1.9rem;
  }

  .access .map_cont .ph {
    grid-area: ph;
    margin-top: 2.5rem;
  }

  .access .map_cont iframe {
    grid-area: iframe;
    aspect-ratio: 16 / 11;
  }

  .access .deco-1 {
    max-width: 37px;
    top: -4rem;
    left: 1rem;
  }

  .access .deco-2 {
    max-width: 65px;
    right: 0;
    bottom: -5rem;
  }

  .access .deco-3 {
    max-width: 84px;
    top: -2rem;
    left: 0;
    transform: rotate(25deg);
  }

  .access .deco-4 {
    max-width: 45px;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
  }
}

/* ------------------------------------------------------------ */
/* induction */
.induction {
  padding: clamp(42.9rem, 35.471rem + 37.14vw, 68.9rem) 0 clamp(4rem, 0.086rem + 19.57vw, 17.7rem);
}

.induction .clip_bg {
  background: url(../img/induction_img_1.webp?260326)center / cover no-repeat;
}

.induction .inner {
  max-width: 1080px;
}

.induction .ttl_cont .common_ttl {
  margin: 0;
}

.induction .ttl_cont .common_ttl h2 .jp {
  font-size: clamp(1.6rem, 1.257rem + 1.71vw, 2.8rem);
  margin-bottom: clamp(1.5rem, 1.271rem + 1.14vw, 2.3rem);
}

.induction .ttl_cont p {
  font-size: clamp(1.4rem, 1.229rem + 0.86vw, 2rem);
  line-height: clamp(3rem, 2.429rem + 2.86vw, 5rem);
}

@media (max-width: 559px) {
  .induction .clip_bg {
    background: url(../img/sp_induction_img_1.webp?260326)center / cover no-repeat;
  }

  .induction .inner {
    width: 85%;
  }
}

/* ------------------------------------------------------------ */
/* calendar */
.ui-datepicker * {
  line-height: normal;
}

.ui-widget-header {
  background: var(--bk-clr) !important;
  color: var(--wh-clr) !important;
  display: flex;
  text-align: center;
  justify-content: center;
  position: relative;
  padding: 1rem 0.5rem;
  font-size: 1.5rem;
}

.ui-icon-circle-triangle-w,
.ui-icon-circle-triangle-e {
  display: none !important;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
  border: none !important;
  background: none !important;
}

.ui-widget.ui-widget-content {
  z-index: 100 !important;
  border: 1px solid var(--bk-clr) !important;
  background: var(--wh-clr);
  color: var(--bk-clr);
  font-size: clamp(1.3rem, 1.243rem + 0.29vw, 1.5rem);
  width: auto;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.ui-datepicker-calendar th {
  padding: 1rem !important;
}

.ui-datepicker td span,
.ui-datepicker td a {
  padding: 1rem !important;
  display: inline-block;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active {
  color: var(--wh-clr) !important;
  border: 1px solid var(--bk-clr) !important;
  background: var(--bk-clr) !important;
}

.ui-datepicker-prev,
.ui-datepicker-prev:hover,
.ui-datepicker-next,
.ui-datepicker-next:hover {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 16px;
  height: 16px;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 16px !important;
}

.ui-datepicker-prev,
.ui-datepicker-prev:hover {
  left: 0.5rem;
}

.ui-datepicker-next,
.ui-datepicker-next:hover {
  right: 0.5rem;
}

.ui-datepicker-prev {
  background-image: url("../img/icon_calendar_pref_off.svg") !important;
}

.ui-datepicker-prev:hover {
  background-image: url("../img/icon_calendar_pref_on.svg") !important;
}

.ui-datepicker-next {
  background-image: url("../img/icon_calendar_next_off.svg") !important;
}

.ui-datepicker-next:hover {
  background-image: url("../img/icon_calendar_next_on.svg") !important;
}

.ui-state-disabled {
  opacity: 0.4;
}

@media screen and (min-width: 680px) {
  .ui-widget.ui-widget-content {
    font-size: 1.5rem;
  }
}

/* ------------------------------------------------------------ */
/* contact */
/* PC first */
.contact {
  background: var(--be-clr);
  color: var(--bk-clr);
  padding: clamp(6rem, 0.343rem + 28.29vw, 25.8rem) 0 clamp(9.5rem, 5.414rem + 20.43vw, 23.8rem);
}

.contact .inner {
  max-width: 957px;
  width: 90%;
  margin: 0 auto;
}

.contact .contact_cont {
  align-items: flex-start;
}

.contact .contact_cont .lft_cont {
  max-width: 270px;
  width: 45%;
  position: sticky;
  top: 5%;
  margin-bottom: 9rem;
}

.contact .contact_cont .lft_cont .ttl_cont h2 {
  width: 100%;
  margin: 0;
  font-size: clamp(1.4rem, 1.171rem + 1.14vw, 2.2rem);
  line-height: normal;
}

.contact .contact_cont .lft_cont .ttl_cont h3 {
  font-size: clamp(1.7rem, 1.557rem + 0.71vw, 2.2rem);
  line-height: normal;
  margin: clamp(0.3rem, -0.757rem + 5.29vw, 4rem) 0 3rem;
}

.contact .contact_cont .lft_cont .ttl_cont p {
  font-size: clamp(1.4rem, 1.371rem + 0.14vw, 1.5rem);
  line-height: clamp(2.8rem, 2.657rem + 0.71vw, 3.3rem);
  margin-bottom: clamp(1.6rem, 0.829rem + 3.86vw, 4.3rem);
  letter-spacing: 0;
}

.contact .contact_cont .lft_cont .txt_area .tel {
  border: solid 1px var(--bk-clr);
  border-right: none;
  border-left: none;
  padding: clamp(1.2rem, 0.971rem + 1.14vw, 2rem) 0;
  justify-content: flex-start;
  align-items: center;
}

.contact .contact_cont .lft_cont .txt_area .tel .txt {
  font-size: 1.3rem;
  line-height: 2.1rem;
  flex: 1;
  max-width: max-content;
  margin-right: 5%;
}

.contact .contact_cont .lft_cont .txt_area .tel .num {
  font-size: 2.6rem;
  line-height: 2.5rem;
  padding-bottom: 1rem;
}

.contact .contact_cont .rgt_cont {
  max-width: 566px;
  width: 55%;
  margin: 0 0 0 auto;
  flex: 1;
}

.contact .contact_cont .rgt_cont .ttl_cont {
  text-align: left;
  margin-bottom: clamp(2.5rem, 2.243rem + 1.29vw, 3.4rem);
}

.contact .contact_cont .rgt_cont .ttl_cont h4 {
  font-size: 1.5rem;
  line-height: normal;
  margin-bottom: 1.5rem;
  letter-spacing: 0.3rem;
}

.contact .contact_cont .rgt_cont .ttl_cont p {
  font-size: 1.1rem;
  line-height: normal;
}

.contact .contact_list:not(:last-of-type) {
  margin-bottom: clamp(4.5rem, 3.5rem + 5vw, 8rem);
}

.contact .round-check-btn input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  width: 21px;
  height: 21px;
  border: 1px solid var(--bk-clr);
  vertical-align: top;
  border-radius: 100px;
}

.contact .round-check-btn input[type="checkbox"]:checked:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 9px;
  height: 9px;
  background: var(--bk-clr);
  border-radius: 100px;
  margin: auto;
}

.contact .round-check-btn dd label {
  letter-spacing: 0.15rem;
  font-size: clamp(1.4rem, 1.371rem + 0.14vw, 1.5rem);
}

.contact .round-check-btn dd label span {
  display: inline-block;
  margin-left: clamp(0.7rem, 0.414rem + 1.43vw, 1.7rem);
}

.contact .round-check-btn .contact_list_att {
  margin: 1.3rem 0 0 clamp(3.7rem, 3.414rem + 1.43vw, 4.7rem);
}

.contact .contact_list_ttl {
  margin-bottom: clamp(2.8rem, 2.743rem + 0.29vw, 3rem);
}

.contact .contact_list-01 .contact_list_ttl {
  margin-bottom: 0;
}

.contact .contact_list_ttl h3 {
  width: 100%;
  display: block;
  border-bottom: solid 1px var(--bk-clr);
  font-size: clamp(1.4rem, 1.371rem + 0.14vw, 1.5rem);
  line-height: normal;
  letter-spacing: 0.3rem;
  padding-bottom: 0.8rem;
}

.contact .contact_list_ttl .small {
  font-size: 1.1rem;
  padding-top: 0.8rem;
  display: block;
  margin-bottom: -3rem;
}

.contact .contact_list_att {
  font-size: clamp(1.3rem, 1.243rem + 0.29vw, 1.5rem);
  line-height: 2.5rem;
  text-align: justify;
}

.contact label+.contact_list {
  padding: clamp(3.5rem, 3.014rem + 2.43vw, 5.2rem) 0 clamp(1rem, 0.714rem + 1.43vw, 2rem);
}

/* .contact form, dl, dt, dd */
.contact form * {
  box-sizing: border-box;
}

.contact form {
  width: 100%;
}

.contact form dl {
  width: 100%;
  margin: 0 auto clamp(1.8rem, 1.6rem + 1vw, 2.5rem);
}

.contact form dl:after,
.contact form dl dt:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.contact form dl dt {
  width: 100%;
  font-size: clamp(1.3rem, 1.271rem + 0.14vw, 1.4rem);
  letter-spacing: 0.2rem;
}

.contact form dl dd {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

.contact form dl dd.calendar::before {
  content: "";
  background: url("../img/icon_calendar_bk.svg") center / cover no-repeat;
  width: clamp(1.2rem, 1.086rem + 0.57vw, 1.6rem);
  height: clamp(1.3rem, 1.157rem + 0.71vw, 1.8rem);
  position: absolute;
  z-index: -1;
  right: 3%;
  top: 1.5rem;
  margin: auto 0;
}

.contact form dl dd.time::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  color: var(--bk-clr);
  line-height: 1;
  width: 0.9rem;
  height: 0.9rem;
  border: 1px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(135deg);
  position: absolute;
  z-index: -1;
  right: 3.5%;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

.contact form dl dt i {
  float: left;
  position: relative;
  top: -2px;
}

/* span.required, span.optional */
.contact form dl dt span.required,
.contact form dl dt span.optional {
  display: inline-block;
  font-size: 85%;
  color: var(--wh-clr);
  padding: 0.4rem 1rem;
}

.contact form dl dt span.required {
  display: none;
}

.contact form dl dt span.optional {
  display: none;
}

/* error message */
.contact form dl dd span.error_blank,
.contact form dl dd span.error_format,
.contact form dl dd span.error_match {
  display: block;
  color: #ff0000;
  margin-top: 5px !important;
  font-size: 1.4rem;
  width: 100%;
}

/* loading */
.contact div.loading-layer {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
}

.contact span.loading {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-top: 5px solid rgba(255, 255, 255, 0.2);
  border-right: 5px solid rgba(255, 255, 255, 0.2);
  border-bottom: 5px solid rgba(255, 255, 255, 0.2);
  border-left: 5px solid var(--wh-clr);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load-circle 1.0s linear infinite;
  animation: load-circle 1.0s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -3rem;
  margin-left: -3rem;
}

@-webkit-keyframes load-circle {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes load-circle {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* input, select, textarea */
.contact form input[type="text"],
.contact form input[type="email"],
.contact form input[type="tel"] {
  width: 100%;
  padding: 1.3rem 3%;
  border: 1px solid var(--bk-clr);
  background: transparent;
  -webkit-appearance: none;
  font-size: clamp(1.3rem, 1.243rem + 0.29vw, 1.5rem);
  font-family: inherit;
  line-height: normal;
}

.contact form input[type="text"]:focus,
.contact form input[type="email"]:focus,
.contact form input[type="tel"]:focus,
.contact form textarea:focus {
  box-shadow: 0px 0px 5px #55ccff;
  border: 1px solid #55ccff;
  background: var(--wh-clr);
}

.contact form ul li input[type="radio"],
.contact form ul li input[type="checkbox"] {
  margin: 0 1rem 0 0;
}

.contact form select {
  padding: 1.3rem 3%;
  border: 1px solid var(--bk-clr);
  font-size: clamp(1.3rem, 1.243rem + 0.29vw, 1.5rem);
  font-family: inherit;
  line-height: normal;
  color: #000 !important;
}

.contact form textarea {
  display: block;
  width: 100%;
  height: 175px;
  padding: 1.3rem 3%;
  resize: vertical;
  border: 1px solid var(--bk-clr);
  background: transparent;
  -webkit-appearance: none;
  font-size: clamp(1.3rem, 1.243rem + 0.29vw, 1.5rem);
  font-family: inherit;
  line-height: normal;
}

/* ul, li */
.contact form ul {
  list-style-type: none;
  width: 100%;
}

.contact form ul li {
  width: 100%;
}

/* カスタマイズ */
.contact form ul li:not(:first-of-type) span {
  margin-top: clamp(1rem, 0.714rem + 1.43vw, 2rem);
}

.contact form ul li label input {
  display: none;
}

.contact form ul li label span {
  color: var(--wh-clr);
  font-size: clamp(1.3rem, 1.243rem + 0.29vw, 1.5rem);
  line-height: normal;
  letter-spacing: 0.3rem;
  border: 1px solid var(--bw-clr);
  background: var(--bw-clr);
  padding: 1.3rem 3%;
  text-align: center;
  display: block;
}

.contact form ul li label input:checked+span {
  color: var(--wh-clr);
  background: var(--bk-clr);
  border: 1px solid var(--bk-clr);
}

/* input design */
.contact form input[name="postal"] {
  width: calc(100% - 194px);
  margin-right: 2%;
}

.contact form input[name="mail_address"],
.contact form input[name="mail_address_confirm"] {
  width: 100%;
}

.contact form input[name="postal"]+div.auto {
  display: inline-block;
  padding: 1.3rem 3%;
  border: 1px solid var(--bk-clr);
  background: var(--bk-clr);
  font-size: clamp(1.3rem, 1.243rem + 0.29vw, 1.5rem);
  line-height: normal;
  color: var(--wh-clr);
  text-decoration: none;
  flex: 1;
  text-align: center;
  cursor: pointer;
  width: 194px;
}

.contact form input[name="postal"]+div.auto:hover {
  background: var(--bk-clr);
  border: 1px solid var(--bk-clr);
}

/* button */
.contact form p#form_submit {
  padding: 3.5rem 0 0;
  text-align: center;
}

.contact form input[type="button"] {
  padding: 1.3rem 6rem;
  border: 1px solid var(--bk-clr);
  background: var(--bk-clr);
  font-size: clamp(1.3rem, 1.243rem + 0.29vw, 1.5rem);
  color: var(--wh-clr);
  font-family: inherit;
  -webkit-appearance: none;
  margin: 0 auto;
  cursor: pointer;
  transition: 0.5s;
}

.contact form input[type="button"]:hover {
  opacity: 0.6;
}

@media screen and (max-width: 1024px) {
  .contact .contact_cont .lft_cont {
    width: 100%;
    max-width: none;
    position: static;
    top: auto;
    margin-bottom: 9rem;
  }

  .contact .contact_cont .rgt_cont {
    width: 100%;
    max-width: none;
    margin: 0;
    flex: none;
  }

  .contact .contact_cont .rgt_cont .ttl_cont {
    text-align: center;
  }

  .contact .contact_cont .lft_cont .ttl_cont h2,
  .contact .contact_cont .lft_cont .ttl_cont h3 {
    text-align: center;
  }

  .contact .contact_cont .lft_cont .ttl_cont h3 {
    margin-bottom: 4rem;
  }

  .contact form input[name="postal"] {
    width: calc(100% - 95px);
    margin-right: 2%;
  }

  .contact form input[name="postal"]+div.auto {
    width: 95px;
  }
}

/* ------------------------------------------------------------ */
/* 送信完了画面 */
.page_thanks {
  min-height: 100vh;
  background: url(../img/concept_img_1.webp)center / cover no-repeat;
  color: var(--bk-clr);
  clip-path: inset(0 0 0 0);
  padding: clamp(8.8rem, 3.114rem + 28.43vw, 28.7rem) 0 clamp(12.1rem, 5.786rem + 31.57vw, 34.2rem);
  text-align: center;
}

.page_thanks .ttl_cont h2 {
  margin-bottom: clamp(2rem, 1.429rem + 2.86vw, 4rem);
}

.page_thanks .ttl_cont p {
  font-size: clamp(1.4rem, 1.229rem + 0.86vw, 2rem);
  line-height: clamp(3.5rem, 2.929rem + 2.86vw, 5.5rem);
}

.page_thanks a {
  max-width: 40rem;
  margin-top: clamp(2rem, 1.429rem + 2.86vw, 4rem);
}

/* ------------------------------------------------------------ */
/* footer */
footer {
  background: var(--wh-clr);
  color: var(--bk-clr);
  padding: clamp(16.6rem, 11.771rem + 24.14vw, 33.5rem) 0 clamp(1.5rem, 0.843rem + 3.29vw, 3.8rem);
}

footer * {
  width: 100%;
}

footer .inner {
  height: 100%;
  justify-content: center;
  max-width: 650px;
  margin: 0 auto;
  flex-wrap: wrap;
}

footer .logo {
  max-width: clamp(17rem, 13.686rem + 16.57vw, 28.6rem);
  margin-bottom: clamp(2.5rem, 1.214rem + 6.43vw, 7rem);
}

footer h2 {
  font-size: clamp(1.3rem, 1.243rem + 0.29vw, 1.5rem);
  margin-bottom: 1.5rem;
}

footer h3 {
  font-size: clamp(1.2rem, 1.143rem + 0.29vw, 1.4rem);
  line-height: clamp(2.5rem, 2.243rem + 1.29vw, 3.4rem);
  margin-bottom: clamp(1.5rem, 0.929rem + 2.86vw, 3.5rem);
}

footer a {
  font-size: clamp(1.2rem, 1.143rem + 0.29vw, 1.4rem);
  line-height: normal;
  border-bottom: 1px solid var(--bk-clr);
  max-width: max-content;
  margin-bottom: clamp(13.9rem, 8.729rem + 25.86vw, 32rem);
}

footer .copyright {
  font-size: clamp(1rem, 0.943rem + 0.29vw, 1.2rem);
}

/* ------------------------------------------------------------ */
/* fixed */
#fixed {
  display: block;
  margin: 0 auto;
  position: fixed;
  bottom: 2%;
  right: 0;
  z-index: 9997;
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
  transform: translateX(100%);
  width: clamp(8.3rem, 5.443rem + 14.29vw, 18.3rem);
  height: auto;
  aspect-ratio: 184 / 177;
}

#fixed.is-fixed {
  transform: translateX(0);
  right: 2%;
}

#fixed.is-hidden {
  transform: translateX(100%);
  right: 0;
}

#fixed a {
  background: url(../img/fixed_img_1.webp) center / cover no-repeat;
  width: 100%;
  height: 100%;
  transition: 0.5s;
  display: block;
}

#fixed a:hover {
  background: url(../img/fixed_img_2.webp) center / cover no-repeat;
  transition: 0.5s;
}

@media (max-width: 559px) {
  #fixed {
    bottom: 1.5%;
    aspect-ratio: 83 / 84;
  }

  #fixed a,
  #fixed a:hover {
    background: url(../img/sp_fixed_img_1.webp) center / cover no-repeat;
  }
}