@charset "utf-8";
/* ot page
 * ========================================================================== */
/* common style */
.ot 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: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 1900 / 1080;
  background: #2F3034;
}
#mainvisual::before {
  position: absolute;
  inset: 0;
  background: url('../img/mainvisual.webp') center / cover no-repeat;
  opacity: 0.8;
  transform: translateY(5%);
  filter: blur(8px);
  will-change: transform, filter, opacity;
  content: '';
}
#mainvisual._on::before {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition:
    transform 2.5s ease-out 0.2s,
    filter 2.2s ease-out 1s,
    opacity 2.2s ease-out 0.2s;
}
#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-black);
  text-shadow: white 1px 1px 10px, white -1px 1px 10px, white 1px -1px 10px, white -1px -1px 10px;
}
/* @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::before {
    background: url('../img/mainvisual-smp.webp') center / cover no-repeat;
  }
  #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;
  }
  #mainvisual .mainvisualCopy .caption {
    color: var(--color-white);
    text-shadow: none;
  }
}
@media screen and (max-width: 320px) {
}

/* lead */
#lead {
  padding: 150px 0 0;
  background: url(../img/bg1.png) no-repeat top center / cover;
}
#lead .leadInner {
  margin: auto;
  width: 90%;
  max-width: 1240px;
  text-align: center;
}
#lead .leadCopy {
  position: relative;
  z-index: 3;
}
#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;
  z-index: 2;
}
#lead .photoInner {
  margin-top: -28%;
  padding-bottom: 12%;
}
.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-white);
  transition: opacity 1s ease 1s;
}
.photoInner .fadeImg._on .caption {
  opacity: 1;
}
.photoInner .fadeImg01 {
  margin-left: 73.5%;
  width: 26.5%;
  aspect-ratio: 504 / 367;
}
.photoInner .fadeImg02 {
  margin-top: 4%;
  width: 36.6%;
  aspect-ratio: 696 / 495;
}
.photoInner .fadeImg03 {
  margin: -12% 0 0 50.9%;
  width: 49.1%;
  aspect-ratio: 933 / 612;
}
.photoInner .fadeImg05 {
  margin: -8% 0 0 16.6%;
  width: 20%;
  aspect-ratio: 380 / 257;
}
/* @media
 * ========================================================================== */
@media screen and (max-width: 1300px) {
}
@media screen and (max-width: 619px) {
  #lead {
    padding: 80px 0 20px;
    background: url(../img/bg1_sp.png) no-repeat top center / cover;
  }
  #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;
    letter-spacing: 1px;
    line-height: 2.2;
  }
  #lead .photoInner {
    margin-top: -20px;
  }
  .photoInner .fadeImg01 {
    margin-left: 50%;
    width: 50%;
  }
  .photoInner .fadeImg02 {
    margin: -15% 0 0 0;
    width: 43%;
  }
  .photoInner .fadeImg03 {
    margin: 12% 0 0 20%;
    width: 80%;
  }
  .photoInner .fadeImg05 {
    margin: 8% 0 0 12%;
    width: 40%;
  }
  .photoInner .fadeImg .caption {
    bottom: 0;
    right: 5px;
    text-shadow: black 1px 1px 10px, black -1px 1px 10px, black 1px -1px 10px, black -1px -1px 10px
  }
}
@media screen and (max-width: 320px) {
}

/* plan */
#plan {
  padding: 150px 0;
  background: url(../img/plan_bg.jpg) no-repeat top center / cover;
}
#plan .planInner {
  margin: auto;
  width: 90%;
  max-width: 1240px;
}
#plan .planCopy {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 60px;
}
#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;
  padding-left: 5px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 1px;
}
#plan .planDetailContents {
  background: var(--color-white);
  border-radius: 30px;
}
#plan .planCopy .typeArea {
  display: flex;
  gap: 25px;
  padding-top: 15px;
}
#plan .planCopy .typeArea .type {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  padding: 10px;
  width: 96px;
  border: 1px solid #9C9C9C;
}
#plan .planCopy .typeArea .type span {
  display: block;
  margin-bottom: -15px;
  font-size: 62px;
  text-align: center;
  line-height: 1;
}
#plan .planCopy .typeArea .type small {
  display: block;
  font-size: 27px;
  line-height: 1;
}
#plan .planCopy .typeArea .area dl {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-left: 15px;
  border-bottom: 1px solid #9C9C9C;
}
#plan .planCopy .typeArea .area dt {
  display: flex;
  align-items: flex-end;
  padding-bottom: 5px;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
}
#plan .planCopy .typeArea .area p {
  padding-top: 10px;
  text-align: right;
}
#plan .planCopy .typeArea .area span {
  line-height: 1;
}
#plan .planCopy .typeArea .area .__size1 {
  font-size: 52px;
}
#plan .planCopy .typeArea .area .__size2 {
  font-size: 39px;
}
#plan .planCopy .typeArea .area .__size3 {
  padding-right: 10px;
  font-size: 34px;
}
#plan .planCopy .typeArea .area .__size5 {
  font-size: 18px;
}
#plan .planCopy .typeArea .area p > .__size5 {
  letter-spacing: 0;
}
#plan .planCopy .typeArea .area .__size6 {
  padding-left: 5px;
  font-size: 24px;
}
#plan .planCopy .typeArea .area .__size6 .__size5 {
  padding-left: 5px;
}
#plan .planContents {
  background: var(--color-white);
  border-radius: 30px;
}
#plan .planBoxInner {
  position: relative;
}
#plan .font-en {
  font-weight: 300;
}
#plan .planBoxBody {
  position: relative;
  padding: 0 50px;
}
.planBox .planBoxInner {
  display: none;
}
.planBox .planBoxInner.is_active {
  display: block;
}
.tabContents .planBoxInner {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.6s ease,
    visibility 0s linear 0.6s;
}
.tabContents .planBoxInner.is_active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease;
}
#plan .tab {
  padding: 80px 110px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#plan .tab li {
  width: 48%;
}
#plan .tab .c-btn01 {
  width: 100%;
  height: 74px;
}
#plan .tab .is-active .c-btn01 a {
  background: var(--color-gold);
  pointer-events: none;
}
#plan .tab .is-active .c-btn01 .c-btn__txt {
  color: var(--color-white);
}
#plan .tab .is-active .c-btn01 .c-arrow {
  --arrow: var(--btn-arrow);
  left: 20px;
}
#plan .tab .is-active .c-btn01 .c-arrow::before {
  left: 31%;
  width: 40%;
  transform: rotate(90deg);
  opacity: 1;
}
#plan .tab .is-active .c-btn01 .c-arrow::after {
  top: 58%;
  width: 20%;
  transform: rotate(145deg);
  transform-origin: center bottom;
  opacity: 1;
}
#plan .tab .c-btn01 > a {
  padding: 0 50px;
  background: var(--color-white);
  border: 1px solid var(--color-gold);
}
#plan .tab .c-btn01 > a:hover {
  background: var(--color-gold);
}
#plan .tab .c-btn01 > a .c-btn__txt {
  padding-top: 10px;
  text-align: center;
  line-height: 1.1;
  letter-spacing: 3px;
}
#plan .tab .c-btn01 > a:hover .c-btn__txt {
  color: var(--color-white);
}
#plan .tab .c-btn01 .c-btn__txt small {
  display: block;
}
#plan .tab .basic .c-btn01 .c-btn__txt small {
  font-family: sans-serif;
  font-size: 17px;
  letter-spacing: 1px;
}
#plan .tab .select .c-btn01 .c-btn__txt small {
  font-size: 18px;
}
#plan .tab .c-btn01 .c-btn__txt strong {
  font-size: 34px;
}
#plan .tab .c-btn01 > a .c-arrow {
  --arrow: 4px;
  left: 30px;
}
#plan .tab .c-btn01 > a .c-arrow::before,
#plan .tab .c-btn01 > a .c-arrow::after {
  opacity: 0;
}
#plan .tab .c-btn01 > a:hover .c-arrow {
  --arrow: 30px;
  left: 20px;
  background: var(--color-gold);
}
#plan .tab .c-btn01 > a:hover .c-arrow::before,
#plan .tab .c-btn01 > a:hover .c-arrow::after {
  opacity: 1;
}
#plan .tab .c-btn01 > a:hover .c-arrow::before {
  left: 30%;
  width: 40%;
  transform: rotate(90deg);
}
#plan .tab .c-btn01 > a:hover .c-arrow::after {
  top: 58%;
  width: 20%;
  transform: rotate(145deg);
  transform-origin: center bottom;
}
#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 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 70px 80px;
}
#plan #caption {
  padding: 0;
  margin: 0;
	width: calc(100% - 300px);
}
#caption .hanrei:last-of-type {
  margin-right: 20px;
}
#plan .btn-pdf a {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 40px;
  width: 287px;
  height: 50px;
  border-radius: 50px;
  background: var(--color-darkgray);
  color: #fff;
  transition: background 0.2s;
}
#plan .btn-pdf a .__txt {
  padding-top: 2px;
  font-size: 18px;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
  font-weight: 300;
  letter-spacing: 0;
  text-indent: 10px;
}
#plan .btn-pdf a::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  margin: auto;
  width: 19px;
  height: 17px;
  background: url(../../roomplan/img/ico_pdf.png) no-repeat center / contain;
  content: "";
}
#plan .btn-pdf a:hover {
  background: var(--color-lightgray);
}

/* @media
 * ========================================================================== */
@media screen and (max-width: 1024px) {
  #plan .planCopy {
    flex-wrap: wrap;
    gap: 30px;
  }
  #plan .tab {
    padding: 80px 5% 0;
    gap: 20px;
  }
  #plan .tab .c-btn01 {
    height: 65px;
  }
  #plan .tab .c-btn01 > a {
    padding: 0 40px;
  }
  #plan .tab .c-btn01 > a .c-btn__txt {
    font-size: 16px;
    letter-spacing: 1px;
  }
  #plan .tab .c-btn01 .c-btn__txt strong {
    font-size: 24px;
  }
  #plan .tab .basic .c-btn01 .c-btn__txt small {
    font-size: 14px;
  }
  #plan .tab .select .c-btn01 .c-btn__txt small {
    font-size: 15px;
  }
  #plan .tab .c-btn01 > a .c-arrow {
    left: 20px;
  }
  #plan .tab .is-active .c-btn01 .c-arrow {
    left: 10px;
  }
  #plan .tab .c-btn01 > a:hover .c-arrow {
    left: 10px;
  }
  #plan #caption {
    width: 100%;
    padding: 0;
    margin: 0;
  }
  #plan .btn-pdf {
    width: 100%;
  }
  #plan .btn-pdf a {
		margin: auto;
	  width: 250px;
	  height: 50px;
	}
}
@media screen and (max-width: 619px) {
  #plan {
    padding: 60px 0;
  }
  #plan .planCopy {
    margin-bottom: 30px;
  }
  #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 .typeArea {
    align-items: flex-start;
    gap: 15px;
    padding-top: 0;
  }
  #plan .planCopy .typeArea .type {
    padding: 8px;
    width: 55px;
  }
  #plan .planCopy .typeArea .type span {
    margin-bottom: -10px;
    font-size: 45px;
  }
  #plan .planCopy .typeArea .type small {
    font-size: 18px;
  }
  #plan .planCopy .typeArea .area dl {
    gap: 5px;
    padding-left: 5px;
  }
  #plan .planCopy .typeArea .area dt {
    padding-bottom: 5px;
    font-size: 10px;
  }
  #plan .planCopy .typeArea .area p {
    padding-top: 0;
  }
  #plan .planCopy .typeArea .area .__size1 {
    font-size: 42px;
  }
  #plan .planCopy .typeArea .area .__size2 {
    font-size: 29px;
  }
  #plan .planCopy .typeArea .area .__size3 {
    padding-right: 5px;
    font-size: 24px;
  }
  #plan .planCopy .typeArea .area .__size4 {
    font-size: 12px;
  }
  #plan .planCopy .typeArea .area .__size5 {
    font-size: 14px;
  }
  #plan .planCopy .typeArea .area .__size6 {
    padding-left: 5px;
    font-size: 18px;
  }
  #plan .planCopy .typeArea .area .__size6 .__size5 {
    padding-left: 5px;
  }
  #plan .tab {
    padding: 40px 5% 0;
  }
  #plan .tab li {
    width: 100%;
  }
  #plan .tab .c-btn01 > a .c-btn__txt {
    color: var(--color-gold);
  }
  #plan .tab .c-btn01 > a .c-arrow {
    background: var(--color-gold);
  }
  #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 .captionArea {
    padding: 0 20px 40px;
  }
  #plan .btn-pdf {
    display: none;
  }
}
@media screen and (max-width: 320px) {
}

/* interior */
#interior {
  padding: 150px 0;
  background: url(../img/bg2.png) no-repeat top center / cover;
}
#interior .interiorInner {
  margin: auto;
  width: 90%;
  max-width: 1240px;
}
#interior .interiorInner.ptn2 {
  display: flex;
  justify-content: flex-end;
  padding-top: 100px;
}
#interior .interiorCopy {
  margin-bottom: 80px;
}
#interior .interiorCopy h3 .font-en {
  display: block;
  font-size: 90px;
  font-weight: 100;
  color: #9B8E51;
  line-height: 1.3;
  letter-spacing: 3px;
}
#interior .interiorCopy h3 .jp {
  display: block;
  padding: 20px 0 30px;
  font-family:
    A1 Mincho,
    YuMincho,
    'Yu Mincho',
    'Hiragino Mincho ProN',
    'serif';
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 1px;
}
#interior .interiorCopy .txt {
  font-family:
    A1 Mincho,
    YuMincho,
    'Yu Mincho',
    'Hiragino Mincho ProN',
    'serif';
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 1px;
}
#interior .ttl {
  font-size: 24px;
  font-weight: 300;
  color: #9B8E51;
  line-height: 1;
  letter-spacing: 3px;
}
#interior .photoInner .ttl {
  margin-bottom: 40px;
}
#interior .photoInner .fadeImg04 {
  width: 82.6%;
  aspect-ratio: 1570 / 800;
}
#interior .photoInner .fadeImg05 {
  margin: 0 0 100px 17.8%;
  width: 82.2%;
  aspect-ratio: 1562 / 800;
}
#interior .pointWrap {
  margin-top: 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#interior .pointWrap.ptn3 {
  margin-bottom: 100px;
}
#interior .pointWrap .txtArea {
  width: 46%;
}
#interior .pointWrap .ttl {
  margin-bottom: 20px;
}
#interior .pointWrap .txt {
  font-family:
    A1 Mincho,
    YuMincho,
    'Yu Mincho',
    'Hiragino Mincho ProN',
    'serif';
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 1px;
}
#interior .pointWrap .tableArea {
  padding: 50px 40px;
  border-radius: 20px;
  width: 44%;
}
#interior .pointWrap .tableArea dl {
  display: flex;
  flex-wrap: wrap;
  line-height: 1;
}
#interior .pointWrap .tableArea dt {
  padding: 15px 0;
  border-bottom: 1px solid #867A44;
  width: 37.6%;
}
#interior .pointWrap .tableArea dd {
  padding: 15px 5px;
  border-bottom: 1px solid rgba(134, 122, 68, 0.2);
  text-align: right;
  width: 62.4%;
}
/* @media
 * ========================================================================== */
 @media screen and (max-width: 1024px) {

 }
 @media screen and (max-width: 619px) {
   #interior {
     padding: 60px 0;
   }
   #interior .interiorInner.ptn2 {
    padding-top: 40px;
  }
   #interior .interiorCopy {
     margin-bottom: 30px;
   }
   #interior .interiorCopy h3 {
     width: 100%;
   }
   #interior .interiorCopy h3 .font-en {
     font-size: 38px;
     letter-spacing: 2px;
     line-height: 1.2;
   }
   #interior .interiorCopy h3 .jp {
     margin-top: 10px;
     font-size: 15px;
   }
   #interior .interiorCopy .txt {
    font-size: 14px;
  }
  #interior .ttl {
    font-size: 18px;
    letter-spacing: 2px;
  }
  #interior .photoInner .ttl {
    margin-bottom: 10px;
  }
  #interior .photoInner .fadeImg04 {
    width: 95%;
  }
  #interior .photoInner .fadeImg05 {
    margin: 0 0 50px 5%;
    width: 95%;
  }
  #interior .pointWrap {
    margin-top: 50px;
  }
  #interior .pointWrap.ptn3 {
    margin-bottom: 50px;
  }
  #interior .pointWrap .txtArea {
    width: 100%;
  }
  #interior .pointWrap .ttl {
    margin-bottom: 10px;
  }
  #interior .pointWrap .txt {
    font-size: 14px;
  }
  #interior .pointWrap .tableArea {
    margin-top: 20px;
    padding: 30px 20px;
    border-radius: 10px;
    width: 100%;
  }
  #interior .pointWrap .tableArea dl {
    font-size: 13px;
  }
  #interior .pointWrap .tableArea dt {
    padding: 10px 0;
  }
  #interior .pointWrap .tableArea dd {
    padding: 10px 5px;
  }
 }
 @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 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 .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) {
}


@media print {
	header,
	footer,
	#cv,
  #mainvisual,
  #lead,
  #interior,
  #view,
  #caption,
	#plan .btn-pdf,
	#plan .planList,
	#plan .c-btn02 {
		display: none;
	}
  #plan {
    padding: 50px 0;
  }
  #plan .planCopy {
    margin-bottom: 20px;
  }
  #plan .planCopy h3 .font-en {
    font-size: 60px;
  }
  #plan .tab {
    padding: 50px 5% 0;
  }
  #plan .tab .c-btn01 > a .c-btn__txt {
    white-space: nowrap;
  }
  #plan .planBoxBody {
    padding: 0;
  }
  #plan .captionArea {
    padding: 0 5% 20px;
  }
  #plan #caption {
    display: block;
    width: 100%;
  }
}