@charset "utf-8";
/* premium page
 * ========================================================================== */
/* common style */
.premium header .menu-trigger .line {
  background-color: #000;
}
section {
  margin: 0 auto;
  width: 100%;
  position: relative;
}
.bg {
  background: linear-gradient(117.47deg, #dee5ec 0.41%, #fffbf7 35.76%);
}
.js-trigger.fade {
  opacity: 0;
}
.js-trigger._on.fade {
  opacity: 1;
  transition: opacity 2s;
}
#caption {
  background: var(--color-white);
}
#caption .sectionItem {
  padding: 60px 20px;
  margin: auto;
}
#bnr_bz,
#copyright {
  position: relative;
}
#corpotation_link {
  position: relative;
  background: var(--color-white);
}
footer {
  position: relative;
  z-index: 10;
}
@media screen and (max-width: 619px) {
  #caption {
    margin: 0;
  }
}
/* mainvisual */
#mainvisual {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
#mainvisual .mainvisualInner {
  background: #000;
  clip-path: inset(0 0 0 0);
}
#mainvisual .mainvisualCopy picture > div {
  opacity: 1;
  height: 100%;
  transform: scale(1);
}
#mainvisual._on .mainvisualCopy picture > div {
  opacity: 0.7;
  transform: scale(1.1);
  transition:
    opacity 4s ease-out 4s,
    transform 6s ease-out;
}
#mainvisual h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  color: var(--color-white);
  text-align: center;
  text-shadow:
    rgba(0, 0, 0, 0.6) 1px 1px 10px,
    rgba(0, 0, 0, 0.6) -1px 1px 10px,
    rgba(0, 0, 0, 0.6) 1px -1px 10px,
    rgba(0, 0, 0, 0.6) -1px -1px 10px;
  font-size: 90px;
  font-weight: 100;
  letter-spacing: 8px;
  line-height: 1;
  opacity: 0;
}
#mainvisual._on h2 {
  opacity: 1;
  transition: opacity 4s 2s;
}
#mainvisual .mainvisualCopy .caption {
  position: absolute;
  right: 10px;
  bottom: 5px;
  color: var(--color-white);
}
/* @media
 * ========================================================================== */
@media screen and (max-width: 1024px) {
  #mainvisual h2 {
    font-size: 60px;
  }
}
@media screen and (max-width: 619px) {
  #mainvisual {
    aspect-ratio: inherit;
    height: 100vh;
  }
  #mainvisual._on .mainvisualCopy picture {
    opacity: 0.9;
  }
  #mainvisual .mainvisualCopy picture > div {
    transform: translateY(5%);
  }
  #mainvisual._on .mainvisualCopy picture > div {
    transform: translateY(-3%);
    transition: transform 4s ease-out;
  }
  #mainvisual h2 {
    top: 32%;
    font-size: 40px;
    letter-spacing: 0;
    line-height: 1.3;
  }
  #mainvisual._on h2 {
    transition: opacity 4s 1s;
  }
}
@media screen and (max-width: 320px) {
}
/* catch */
#catch {
  padding: 100vh 0 50vh;
  --blur: 0px;
  --veil: 0;
  --blurOpacity: 0;
}
#catch::before {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.001);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  opacity: var(--blurOpacity);
  content: '';
  transition: opacity 0.2s linear;
}
#catch::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(37, 33, 31, 0) 0%, #25211f 100%);
  opacity: var(--veil);
  transition: opacity 0.2s linear;
  content: '';
}
#catch .catchInner {
  position: relative;
  margin: auto;
  width: 90%;
  max-width: 1240px;
  text-align: center;
  color: var(--color-white);
  z-index: 2;
}
#catch h3 {
  padding-bottom: 50px;
  font-size: 46px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 5px;
}
#catch p {
  font-size: 20px;
  line-height: 2.4;
  letter-spacing: 1px;
}
/* @media
 * ========================================================================== */
@media screen and (max-width: 1300px) {
}
@media screen and (max-width: 619px) {
  #catch {
    padding: 80vh 0 40vh;
  }
  #catch::before {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.001);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    opacity: var(--blurOpacity);
    content: '';
    transition: opacity 0.2s linear;
  }
  #catch::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(37, 33, 31, 0) 0%, #25211f 100%);
    opacity: var(--veil);
    transition: opacity 0.2s linear;
    content: '';
  }
  #catch .catchInner {
    position: relative;
    margin: auto;
    width: 90%;
    max-width: 1240px;
    text-align: center;
    color: var(--color-white);
    z-index: 2;
  }
  #catch h3 {
    padding-bottom: 30px;
    font-size: 24px;
    letter-spacing: 3px;
  }
  #catch p {
    font-size: 16px;
    line-height: 2;
  }
}
@media screen and (max-width: 320px) {
}
/* modelroom */
#modelroom {
  position: relative;
  width: 100%;
  height: auto;
  background: var(--color-white);
  aspect-ratio: 1900 / 830;
}
#modelroom .modelroomCopy picture {
  position: absolute;
  inset: 0;
}
#modelroom .modelroomCopy picture img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  clip-path: inset(10% 10% 10% 10%);
  transition:
    clip-path 1s ease,
    filter 1s ease;
}
#modelroom._on .modelroomCopy picture img {
  clip-path: inset(0 0 0 0);
}
#modelroom .caption {
  position: absolute;
  right: 10px;
  bottom: 5px;
  color: var(--color-black);
}
/* @media
 * ========================================================================== */
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 619px) {
  #modelroom {
    aspect-ratio: 750 / 506;
  }
}
@media screen and (max-width: 320px) {
}
/* lead */
#lead {
  padding: 150px 0 0;
  background: #fff;
}
#lead .leadInner {
  margin: auto;
  width: 90%;
  max-width: 1240px;
  text-align: center;
}
#lead .leadCopy {
  position: relative;
}
#lead h3 .font-en {
  display: block;
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 100;
  color: var(--color-gold);
  line-height: 1;
  letter-spacing: 2px;
}
#lead h3 .jp {
  display: block;
  margin-bottom: 50px;
  font-family:
    A1 Mincho,
    YuMincho,
    'Yu Mincho',
    'Hiragino Mincho ProN',
    'serif';
  font-size: 46px;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 4px;
}
#lead .txt {
  padding-bottom: 150px;
  font-family:
    A1 Mincho,
    YuMincho,
    'Yu Mincho',
    'Hiragino Mincho ProN',
    'serif';
  font-size: 20px;
  font-weight: 300;
  line-height: 2.5;
  letter-spacing: 2px;
}
.photoInner {
  position: relative;
  padding-bottom: 12%;
  z-index: 2;
}
.photoInner .fadeImg {
  position: relative;
  overflow: hidden;
}
.photoInner .fadeImg figure {
  display: block;
  width: 100%;
  height: 100%;
}
.photoInner .fadeImg figure img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 30px);
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  clip-path: inset(0 0 0);
  filter: blur(30px);
  transition:
    clip-path 1s ease,
    filter 1s ease,
    opacity 1s ease,
    transform 1s ease 0.2s;
}
.photoInner .fadeImg._on figure img {
  clip-path: inset(0 0 0 0);
  filter: blur(0);
  opacity: 1;
  transform: translate(-50%, 0);
}
.photoInner .fadeImg .caption {
  position: absolute;
  right: 10px;
  bottom: 5px;
  color: var(--color-black);
  transition: opacity 1s ease 1s;
}
.photoInner .fadeImg._on .caption {
  opacity: 1;
}
.photoInner .fadeImg01 {
  margin-left: 51%;
  width: 43.7%;
  aspect-ratio: 840 / 568;
}
.photoInner .fadeImg02 {
  margin: -14% 0 0 63.6%;
  width: 36.4%;
  aspect-ratio: 700 / 461;
}
.photoInner .fadeImg03 {
  margin: 8% 0 0 59.4%;
  width: 40.6%;
  aspect-ratio: 780 / 542;
}
.photoInner .fadeImg04 {
  margin-top: -14%;
  width: 36.4%;
  aspect-ratio: 700 / 736;
}
.photoInner .fadeImg05 {
  margin: -6% 0 0 75.2%;
  width: 24.8%;
  aspect-ratio: 478 / 344;
}
.photoInner .fadeImg02 .caption,
.photoInner .fadeImg04 .caption {
  left: 10px;
  color: var(--color-white);
}
.photoInner .fadeImg03 .caption {
  color: var(--color-white);
}
.photoInner .fadeImg05 .caption {
  color: var(--color-white);
  text-shadow:
    rgba(0, 0, 0, 0.5) 1px 1px 3px,
    rgba(0, 0, 0, 0.5) -1px 1px 3px,
    rgba(0, 0, 0, 0.5) 1px -1px 3px,
    rgba(0, 0, 0, 0.5) -1px -1px 3px;
}
/* @media
 * ========================================================================== */
@media screen and (max-width: 1300px) {
}
@media screen and (max-width: 619px) {
  #lead {
    padding: 80px 0 20px;
  }
  #lead .leadCopy {
    position: relative;
  }
  #lead h3 .font-en {
    margin-bottom: 15px;
    font-size: 20px;
    letter-spacing: 1px;
  }
  #lead h3 .jp {
    margin-bottom: 30px;
    font-size: 24px;
    letter-spacing: 1px;
  }
  #lead .txt {
    padding-bottom: 50px;
    font-size: 14px;
    line-height: 2.2;
  }
  .photoInner .fadeImg01 {
    margin-left: 20%;
    width: 75%;
  }
  .photoInner .fadeImg02 {
    margin: 15% 0 0 30%;
    width: 70%;
  }
  .photoInner .fadeImg03 {
    margin: 15% 0 0 20%;
    width: 75%;
  }
  .photoInner .fadeImg04 {
    margin: 15% 0 0 0;
    width: 60%;
  }
  .photoInner .fadeImg05 {
    margin: 15% 0 0 25%;
    width: 70%;
  }
}
@media screen and (max-width: 320px) {
}

/* plan */
#plan {
  padding: 150px 0;
  background: var(--color-black);
}
#plan .planInner {
  margin: auto;
  width: 90%;
  max-width: 1240px;
}
#plan .planCopy {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 80px;
  color: var(--color-white);
}
#plan .planCopy h3 {
  width: 500px;
}
#plan .planCopy h3 .font-en {
  display: block;
  font-size: 100px;
  font-weight: 100;
  color: #9b8e51;
  line-height: 1;
  letter-spacing: 3px;
}
#plan .planCopy h3 .jp {
  display: block;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 1px;
}
#plan .planCopy .txt {
  width: calc(100% - 550px);
  text-align: right;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 3px;
}
#plan .planDetailContents {
  background: var(--color-white);
  border-radius: 30px;
}
#plan .planBoxInner {
  position: relative;
}
#plan .pager {
  position: absolute;
  width: 50px;
  height: 50px;
  z-index: 10;
}
#plan .pager:hover {
  background: var(--color-lightgold);
}
#plan .pager.slick-prev.c-arrow::after {
  left: 25%;
  transform: rotate(-45deg);
  transform-origin: left bottom;
}

#plan .font-en {
  font-weight: 300;
}
#plan .__tag {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px 30px;
  font-size: 18px;
  color: #fff;
  background-color: var(--slide-color);
}
#plan .planBoxHead {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding: 80px 70px 20px;
}
#plan .planBoxHead .__line1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--darkgray, #7c7e80);
  width: 100%;
}
#plan .planBoxHead .__line1 .__type {
  line-height: 1;
}
#plan .planBoxHead .__line1 .__type1 {
  font-size: 69px;
}
#plan .planBoxHead .__line1 .__type1 small {
  font-size: 32px;
}
#plan .planBoxHead .__line1 .__type2 {
  padding-left: 30px;
  font-size: 27px;
}
#plan .planBoxHead .__line1 .__type2 em {
  font-size: 51px;
}
#plan .planBoxHead .__line1 dl {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-gap: 10px;
}
#plan .planBoxHead .__line1 dt {
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
}
#plan .planBoxHead .__line1 dd {
  line-height: 0.9;
}
#plan .planBoxHead .__line1 .__size1 {
  font-size: 52px;
  font-weight: 300;
}
#plan .planBoxHead .__line1 .__size2 {
  font-size: 39px;
  font-weight: 300;
}
#plan .planBoxHead .__line1 .__size3 {
  padding-right: 5px;
  font-size: 34px;
  font-weight: 300;
}
#plan .planBoxHead .__line1 .__size3 sup {
  font-size: 26px;
}
#plan .planBoxHead .__line2 {
  padding-top: 15px;
  line-height: 1.2;
}
#plan .planBoxHead .__line2 .__size1 {
  font-size: 12px;
}
#plan .planBoxHead .__line2 .__size2 {
  font-size: 18px;
}
#plan .planBoxHead .__line2 .__size3 {
  padding-right: 5px;
  font-size: 24px;
}
#plan .planBoxHead .__line2 .__size3 sup {
  font-size: 14px;
}
#plan .planBoxHead .__line2 .__size4 {
  padding-left: 5px;
  font-size: 18px;
}
#plan .planBoxBody {
  position: relative;
  padding: 0 50px;
}
#plan .blur {
  filter: blur(6px);
}
#plan .entry-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 80%;
  height: 100%;
  font-size: 20px;
  z-index: 1;
}
#plan .entry-box .c-btn02 {
  --btn-arrow: 36px;
  width: 400px;
  height: 78px;
  margin-top: 10px;
}
#plan .entry-box .c-btn02 > a {
  position: relative;
  padding: 0 40px;
  border-radius: 50px;
  background: var(--color-gold);
  border: 1px solid var(--color-gold);
  overflow: hidden;
  transition: color 0.3s ease;
}
#plan .entry-box .c-btn02 > a::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50px;
  background: var(--color-white);
  transform: translateX(-100%);
  transition: transform 0.4s ease;
  z-index: 0;
}
#plan .entry-box .c-btn02 > a:hover::before {
  transform: translateX(0);
}
#plan .entry-box .c-btn02 > a .c-btn__txt {
  padding-top: 2px;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 5px;
  text-indent: 5px;
  color: var(--color-white);
  z-index: 2;
}
#plan .entry-box .c-btn02 > a .c-arrow::before,
#plan .entry-box .c-btn02 > a .c-arrow::after {
  background: var(--color-white);
}
#plan .entry-box .c-btn02 > a:hover {
  background-position: right center;
}
#plan .entry-box .c-btn02 > a:hover .c-btn__txt {
  color: var(--color-gold);
}
#plan .entry-box .c-btn02 > a:hover .c-arrow {
  --arrow: 4px;
  left: 30px;
}
#plan .entry-box .c-btn02 > a:hover .c-arrow,
#plan .entry-box .c-btn02 > div:hover .c-arrow,
#plan .entry-box .c-btn-wrap:hover .c-btn02 > div .c-arrow {
  --arrow: 6px;
  left: 50px;
  background: var(--color-gold);
}
#plan .captionArea {
  padding: 0 70px 80px;
}
#plan #caption {
  padding: 0;
  margin: 0;
}
#caption .hanrei:last-of-type {
  margin-right: 20px;
}
/* @media
 * ========================================================================== */
@media screen and (max-width: 1024px) {
  #plan #caption {
    width: 100%;
    padding: 0;
    margin: 0;
  }
}
@media screen and (max-width: 619px) {
  #plan {
    padding: 60px 0;
  }
  #plan .planCopy {
    margin-bottom: 40px;
  }
  #plan .planCopy h3 {
    width: 100%;
  }
  #plan .planCopy h3 .font-en {
    font-size: 40px;
    letter-spacing: 2px;
    line-height: 1.2;
  }
  #plan .planCopy h3 .jp {
    margin-top: 10px;
    font-size: 15px;
  }
  #plan .planCopy .txt {
    padding-top: 30px;
    width: 100%;
    text-align: left;
    font-size: 16px;
    letter-spacing: 2px;
  }
  #plan .ttlArea {
    padding: 120px 0 30px;
  }
  #plan .ttlArea h2 {
    font-size: 50px;
  }
  #plan .__tag {
    padding: 5px 20px;
    font-size: 16px;
  }
  #plan .planBoxHead {
    padding: 60px 20px 20px;
  }
  #plan .planBoxHead .__line1 {
    justify-content: center;
    padding-bottom: 10px;
  }
  #plan .planBoxHead .__line1 .__type {
    padding-bottom: 20px;
  }
  #plan .planBoxHead .__line1 .__type1 {
    font-size: 38px;
  }
  #plan .planBoxHead .__line1 .__type1 small {
    font-size: 20px;
  }
  #plan .planBoxHead .__line1 .__type2 {
    padding-left: 20px;
    font-size: 16px;
  }
  #plan .planBoxHead .__line1 .__type2 em {
    font-size: 30px;
  }
  #plan .planBoxHead .__line1 dl {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-gap: 10px;
  }
  #plan .planBoxHead .__line1 dt {
    font-size: 12px;
  }
  #plan .planBoxHead .__line1 .__size1 {
    font-size: 36px;
  }
  #plan .planBoxHead .__line1 .__size2 {
    font-size: 30px;
  }
  #plan .planBoxHead .__line1 .__size3 {
    font-size: 24px;
  }
  #plan .planBoxHead .__line1 .__size3 sup {
    font-size: 12px;
  }
  #plan .planBoxHead .__line1 .__size4 {
    font-size: 14px;
  }
  #plan .planBoxHead .__line2 {
    padding-top: 10px;
    line-height: 1.2;
  }
  #plan .planBoxHead .__line2 .__size1 {
    font-size: 11px;
  }
  #plan .planBoxHead .__line2 .__size2 {
    font-size: 14px;
  }
  #plan .planBoxHead .__line2 .__size3 {
    padding-right: 5px;
    font-size: 16px;
  }
  #plan .planBoxHead .__line2 .__size4 {
    font-size: 14px;
  }
  #plan .planBoxHead .__line2 .__size3 sup {
    font-size: 10px;
  }
  #plan .planBoxBody {
    padding: 0 20px;
  }
  #plan .entry-box {
    font-size: 16px;
  }
  #plan .entry-box .c-btn02 {
    --btn-arrow: 25px;
    width: 240px;
    height: 50px;
    margin-top: 5px;
  }
  #plan .entry-box .c-btn02 > a .c-btn__txt {
    font-size: 16px;
  }
  #plan .entry-box .c-btn02 > a:hover .c-arrow {
    left: 30px;
  }
  #plan .entry-box .c-btn02 > a:hover .c-arrow::before,
  #plan .entry-box .c-btn02 > a:hover .c-arrow::after {
    opacity: 0;
  }
  #plan .pager {
    width: 30px;
    height: 30px;
  }
  #plan .pager.slick-prev {
    left: -10px;
  }
  #plan .pager.slick-next {
    right: -10px;
  }

  #plan .captionArea {
    padding: 0 20px 40px;
  }
}
@media screen and (max-width: 320px) {
}

/* view */
#view {
  padding: 150px 0;
  background: #003247;
}
#view .viewInner {
  margin: auto;
  width: 90%;
  max-width: 1240px;
}
#view .viewCopy {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 120px;
  color: var(--color-white);
}
#view .viewCopy h3 {
  width: 500px;
}
#view .viewCopy h3 .font-en {
  display: block;
  font-size: 100px;
  font-weight: 100;
  color: #9b8e51;
  line-height: 1;
  letter-spacing: 3px;
}
#view .viewCopy h3 .jp {
  display: block;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 1px;
}
#view .viewCopy .txt {
  width: calc(100% - 550px);
  text-align: right;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 3px;
}
#view .viewCopy .txt sub {
  vertical-align: 0;
}
#view .tab {
  margin-bottom: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#view .tab li {
  width: 48%;
}
#view .tab .c-btn01 {
  width: 100%;
  height: 60px;
}
#view .tab .is-active .c-btn01 a {
  background: var(--color-gold);
  pointer-events: none;
}
#view .tab .is-active .c-btn01 .c-btn__txt {
  color: var(--color-white);
}
#view .tab .is-active .c-btn01 .c-arrow {
  --arrow: var(--btn-arrow);
  left: 20px;
}
#view .tab .is-active .c-btn01 .c-arrow::before {
  left: 31%;
  width: 40%;
  transform: rotate(90deg);
  opacity: 1;
}
#view .tab .is-active .c-btn01 .c-arrow::after {
  top: 58%;
  width: 20%;
  transform: rotate(145deg);
  transform-origin: center bottom;
  opacity: 1;
}
#view .tab .c-btn01 > a {
  background: var(--color-white);
}
#view .tab .c-btn01 > a:hover {
  background: var(--color-lightgold);
}
#view .tab .c-btn01 > a:hover .c-arrow {
  background: var(--color-lightgold) !important;
}
#view .tab .c-btn01 > a .c-btn__txt {
  text-align: center;
  line-height: 1.1;
}
#view .tab .c-btn01 > a:hover .c-btn__txt {
  color: var(--color-white);
}
#view .tab .c-btn01 > a .c-arrow {
  --arrow: 4px;
  left: 30px;
}
#view .tab .c-btn01 > a .c-arrow::before,
#view .tab .c-btn01 > a .c-arrow::after {
  opacity: 0;
}
#view .tab .c-btn01 > a:hover .c-arrow {
  --arrow: 30px;
  left: 20px;
  background: var(--color-gold);
}
#view .tab .c-btn01 > a:hover .c-arrow::before,
#view .tab .c-btn01 > a:hover .c-arrow::after {
  opacity: 1;
}
#view .tab .c-btn01 > a:hover .c-arrow::before {
  left: 30%;
  width: 40%;
  transform: rotate(90deg);
}
#view .tab .c-btn01 > a:hover .c-arrow::after {
  top: 58%;
  width: 20%;
  transform: rotate(145deg);
  transform-origin: center bottom;
}
.viewWrap {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.viewWrap .viewblk {
  height: 100%;
  display: none;
}
.viewWrap .viewblk.is_active {
  display: block;
}
.viewWrap .viewblk .panorama_wrap {
  position: relative;
  height: 100%;
}
.viewWrap .viewblk .panorama {
  position: relative;
  display: flex;
  flex-direction: row;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  height: 100%;
  white-space: nowrap;
  z-index: 1;
}
.viewWrap .viewblk .panorama img {
  border: none;
  text-decoration: none;
  vertical-align: top;
  font-size: 0;
  max-width: initial;
  width: initial;
  height: 100%;
}
.tabContents .viewblk {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.6s ease,
    visibility 0s linear 0.6s;
}
.tabContents .viewblk.is_active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease;
}
@media (hover: hover) and (pointer: fine) {
  .panorama_wrap.custom-cursor.cursor-live {
    cursor: none;
  }
}

.finger-cursor-global {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 121px;
  height: 121px;
  border-radius: 50%;
  background: rgba(0, 50, 71, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  will-change: transform, opacity;
}
.finger-cursor-global::after {
  position: absolute;
  inset: 0;
  width: 78px;
  height: 33px;
  margin: auto;
  background: url(../../redevelopment/img/finger_arw.png) no-repeat center / contain;
  content: '';
}
.finger-cursor-global img {
  position: relative;
  display: inline-block;
  animation: moveFinger 1.5s infinite ease-in-out;
}

#view .finger {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 10%;
  bottom: 35%;
  width: 121px;
  height: 121px;
  border-radius: 50%;
  background: rgba(0, 50, 71, 0.8);
  z-index: -1;
}
#view .finger::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 78px;
  height: 33px;
  margin: auto;
  background: url(../../redevelopment/img/finger_arw.png) no-repeat center / contain;
  content: '';
}
#view .finger img {
  animation: moveFinger 1.5s infinite ease-in-out;
  display: inline-block;
  position: relative;
}
@keyframes moveFinger {
  0% {
    left: -2px;
  }
  30% {
    left: 2px;
  }
  60% {
    left: -2px;
  }
  100% {
    left: -2px;
  }
}
#view .caption {
  position: absolute;
  right: 15px;
  bottom: 5px;
  color: var(--color-white);
  z-index: 10;
}

/* @media
 * ========================================================================== */
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 619px) {
  #view {
    padding: 60px 0;
  }
  #view .viewCopy {
    margin-bottom: 40px;
  }
  #view .viewCopy h3 {
    width: 100%;
  }
  #view .viewCopy h3 .font-en {
    font-size: 40px;
    letter-spacing: 2px;
    line-height: 1.2;
  }
  #view .viewCopy h3 .jp {
    margin-top: 10px;
    font-size: 15px;
  }
  #view .viewCopy .txt {
    padding-top: 30px;
    width: 100%;
    text-align: left;
    font-size: 16px;
    letter-spacing: 2px;
  }
  #view .tab li {
    width: 46%;
  }
  #view .tab .is-active .c-btn01 .c-arrow {
    left: 15px;
    background: transparent !important;
  }
  #view .tab .c-btn01 > a .c-btn__txt {
    color: var(--color-gold);
  }
  #view .tab .c-btn01 > a .c-arrow {
    background: var(--color-gold);
  }
  .panorama img {
    height: 250px !important;
  }
  #day .panorama {
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x !important;
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    overscroll-behavior-x: contain;
    overflow-anchor: none;
  }
  #day .panorama img {
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
  }
  .viewblk#day,
  .tabContents,
  .viewWrap,
  .panorama_wrap {
    overflow-x: visible !important;
    scroll-snap-type: none !important;
    touch-action: auto !important;
  }
  #view .finger {
    right: 70%;
    bottom: 5%;
    width: 80px;
    height: 80px;
    z-index: 10;
  }
  #view .finger::after {
    width: 60px;
  }
}
@media screen and (max-width: 320px) {
}

/* option */
.opticy-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  background: url(../img/option_bg.webp) no-repeat top center;
}
#option {
  margin-top: -100vh;
  padding: 150px 0 10px;
  background: linear-gradient(180deg, rgba(37, 33, 31, 0.5) 0%, rgba(37, 33, 31, 0.9) 35.52%);
}
#option .optionInner {
  margin: auto;
  width: 90%;
  max-width: 1240px;
}
#option .optionCopy {
  color: var(--color-white);
}
#option .optionCopy h3 .font-en {
  display: block;
  font-size: 100px;
  font-weight: 100;
  color: #9b8e51;
  line-height: 1;
  letter-spacing: 3px;
}
#option .optionCopy h3 .jp {
  display: block;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 1px;
  text-indent: 8px;
}
#option .optionCopy .txt {
  padding: 40px 0 0 8px;
  font-family:
    A1 Mincho,
    YuMincho,
    'Yu Mincho',
    'Hiragino Mincho ProN',
    'serif';
  font-size: 22px;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 3px;
}
#option .optionBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  margin: -30px 0 150px;
  color: var(--color-white);
}
.imgReveal {
  position: relative;
  width: 52%;
  overflow: hidden;
}
.imgReveal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #252322;
  z-index: 1;
  transform: translateX(0);
  transition: transform 2s cubic-bezier(0.4, 0, 0.2, 1);
}
.imgReveal._on::before {
  transform: translateX(100%);
}
#option .caption {
  position: absolute;
  right: 10px;
  bottom: 5px;
  color: var(--color-white);
}
#option .optionBox dl {
  width: 45%;
}
#option .optionBox dt {
  padding: 40px 0 20px;
  color: #c8bd8f;
  font-size: 24px;
  line-height: 1.4;
}
#option .optionBox dd p {
  padding-bottom: 20px;
  font-size: 20px;
  letter-spacing: 2px;
}
#option .optionBox dd .change {
  margin: 0 0 10px;
  padding: 20px 10px;
  border: 1px solid var(--color-gold);
  text-align: center;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 2px;
}
#option .optionBox .txt-note {
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1.7;
}
#option p.caption {
  position: absolute;
  right: 20px;
  bottom: 5px;
  color: var(--color-white);
  z-index: 10;
}
/* @media
 * ========================================================================== */
@media screen and (max-width: 1200px) {
  #option .optionBox {
    margin: 30px 0 100px;
  }
}
@media screen and (max-width: 619px) {
  #option {
    padding: 60px 0 10px;
  }
  #option .optionCopy {
    margin-bottom: 50px;
  }
  #option .optionCopy h3 {
    width: 100%;
  }
  #option .optionCopy h3 .font-en {
    font-size: 40px;
    letter-spacing: 2px;
    line-height: 1.2;
  }
  #option .optionCopy h3 .jp {
    margin-top: 10px;
    font-size: 15px;
    text-indent: 3px;
  }
  #option .optionCopy .txt {
    padding: 30px 0 0 3px;
    width: 100%;
    text-align: left;
    font-size: 16px;
    letter-spacing: 2px;
  }
  #option .optionBox {
    margin: 30px 0 40px;
  }
  .imgReveal {
    width: 100%;
    order: -1;
  }
  #option .optionBox dl {
    width: 100%;
  }
  #option .optionBox dt {
    padding: 30px 0 10px;
    font-size: 18px;
  }
  #option .optionBox dd p {
    font-size: 13px;
  }
  #option .optionBox dd .change {
    margin: 0 0 15px;
    padding: 10px;
    text-align: left;
    font-size: 15px;
  }
  #option .optionBox .txt-note {
    font-size: 10px;
  }
}
@media screen and (max-width: 320px) {
}

/* eq */
#eq {
  padding: 150px 0 10px;
}
#eq .eqInner {
  margin: auto;
  width: 90%;
  max-width: 1240px;
}
#eq .eqCopy {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#eq .eqCopy h3 {
  width: 620px;
}
#eq .eqCopy h3 .font-en {
  display: block;
  font-size: 100px;
  font-weight: 100;
  color: var(--color-gold);
  line-height: 1;
  text-indent: -10px;
  letter-spacing: 3px;
}
#eq .eqCopy h3 .jp {
  display: block;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 1px;
}
#eq .eqCopy .txt {
  padding-top: 50px;
  width: calc(100% - 650px);
  text-align: right;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 3px;
}
#eq .eqlink {
  margin: 100px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#eq .eqlink .c-btn01 {
  width: 290px;
  max-width: 22%;
  height: 60px;
}
#eq .eqlink .c-btn01 > a .c-btn__txt {
  text-align: center;
  line-height: 1.1;
}
#eq .eqlink .c-arrow::before {
  left: 30%;
  width: 40%;
  transform: rotate(90deg);
}
#eq .eqlink .c-arrow::after {
  top: 58%;
  width: 20%;
  transform: rotate(145deg);
  transform-origin: center bottom;
}
#eq .eqWrap {
  display: flex;
  flex-wrap: wrap;
  gap: 50px 70px;
  margin-bottom: 150px;
}
#eq .eqWrap .ttl {
  padding-bottom: 15px;
  width: 100%;
  border-bottom: 1px solid var(--color-gold);
  color: #9b8e51;
  font-size: 42px;
  font-weight: 200;
  line-height: 1;
  letter-spacing: 5px;
}
#eq .eqWrap .main {
  position: relative;
  width: 100%;
}
#eq .eqWrap .eqBox {
  width: calc((100% - 140px) / 3);
}
#eq .eqWrap .eqBox.half {
  width: calc((100% - 70px) / 2 + 22px);
}
#eq .eqWrap .eqBox figure {
  position: relative;
}
#eq .eqWrap img {
  width: 100%;
}
#eq .eqWrap .eqBox dt {
  padding: 30px 0 10px;
  color: var(--color-gold);
  font-size: 24px;
  letter-spacing: 1px;
  line-height: 1.4;
}
#eq .eqWrap .eqBox dd p {
  padding-bottom: 10px;
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: 1px;
}
#eq .eqWrap .eqBox dd p small {
  display: inline-block;
  font-size: 14px;
  line-height: 1.6;
}
#eq .caption {
  position: absolute;
  right: 10px;
  bottom: 5px;
  color: var(--color-white);
}
#eq .caption.bk {
  color: var(--color-black);
}
/* @media
 * ========================================================================== */
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 619px) {
  #eq {
    padding: 60px 0 10px;
  }
  #eq .eqCopy h3 {
    width: 100%;
  }
  #eq .eqCopy h3 .font-en {
    font-size: 40px;
    text-indent: -5px;
    letter-spacing: 2px;
  }
  #eq .eqCopy h3 .jp {
    margin-top: 10px;
    font-size: 15px;
  }
  #eq .eqCopy .txt {
    padding-top: 30px;
    width: 100%;
    text-align: left;
    font-size: 16px;
    letter-spacing: 2px;
  }
  #eq .eqlink {
    margin: 50px 0;
  }
  #eq .eqlink .c-btn01 {
    margin-bottom: 20px;
    width: 47%;
    max-width: 290px;
    height: 50px;
  }
  #eq .eqlink .c-btn01 > a {
    padding-left: 30px;
  }
  #eq .eqlink .c-btn01 > a .c-arrow {
    left: 0;
  }
  #eq .eqlink .c-btn01 > a .c-btn__txt {
    font-size: 12px;
  }
  #eq .eqlink .c-arrow::before {
    left: 32%;
    width: 40%;
    transform: rotate(90deg);
  }
  #eq .eqlink .c-arrow::after {
    top: 58%;
    width: 20%;
    transform: rotate(145deg);
    transform-origin: center bottom;
  }
  #eq .eqWrap {
    gap: 30px 0;
    margin-bottom: 50px;
  }
  #eq .eqWrap .ttl {
    padding-bottom: 10px;
    font-size: 20px;
    letter-spacing: 3px;
  }
  #eq .eqWrap .eqBox,
  #eq .eqWrap .eqBox.half {
    width: 100%;
  }
  #eq .eqWrap .eqBox dt {
    padding: 20px 0 5px;
    font-size: 16px;
  }
  #eq .eqWrap .eqBox dd p {
    font-size: 13px;
  }
  #eq .eqWrap .eqBox dd p small {
    font-size: 10px;
  }
}
@media screen and (max-width: 320px) {
}