@charset "utf-8";

/* common
 * ========================================================================== */
 :root {
  --commonBlackDark: #333;
  --commonBlackThin: #333;
	 
	 --media_sp: 750;
  --media_tb: 1024;
  --media_pc: 1680;
}

 .tb,
 .sp {
		display: none;
 }
 .pc {
		display: block;
 }
 @media screen and (max-width: 1024px) {
		.pc,
		.sp {
				display: none;
		}
		.tb {
				display: block;
		}
 }
 @media screen and (max-width: 619px) {
		.pc,
		.tb {
			display: none;
		}
		.sp {
			display: block;
		}
 }

.contents p,.contents span,h2,h3,h4,h5 {
	font-family: "Noto Sans JP", sans-serif;
	font-family: YakuHanMP, "Noto Serif JP", "Times New Roman", Times, A1 Mincho, YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
body {
	opacity: 1;
	transition: 1s opacity;
}
body.fadeout {
	opacity: 0;
	transition: 1s opacity;
	pointer-events: none;
}
body.fadein {
	opacity: 0;
	transition: 1s opacity;
	pointer-events: none;
}
figure {
  position: relative;
  font-family: var(--a1);
}

.img_cap {
  position: absolute;
  bottom: 0;
  right: 5px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: #ffffff;
}

@media screen and (max-width: 1024px) {
  .img_cap {
    font-size: 10px;
  }
}

@media screen and (max-width: 619px) {
    .img_cap {
    bottom: 0;
    right: calc(( 5 / var(--media_sp)) * 100vw );
    font-size: calc(( 20 / var(--media_sp)) * 100vw );
  }
}

.section_imgblk-wrap .imgwrap {
	overflow: hidden;
}


/* animation
 * ========================================================================== */
 .basicFade,
 .delayFade {
	opacity: 0;
	transition: all 0.8s;
} 
.basicFade.morph,
.delayFade.morph {
	opacity: 1;
	transition: all 0.8s;
	transition-timing-function: ease-out;
}

.pinsFade {
	opacity: 0;
	transition: all 0.8s;
} 
.pinsFade.morph {
	opacity: 1;
	transition: all 0.8s;
	transition-timing-function: ease-out;
}
 
.blurFade {
	opacity: 0;
	transition: all 0.8s;
} 
.blurFade.morph {
	opacity: 1;
	transition: all 1.5s;
filter: blur(100px);
	animation: blurAnimation 2s ease-out forwards;
}

@keyframes blurAnimation{
	100% { filter: blur(0px); }
}

.contentsWrap {
	position: relative;
  width: 100%;
  padding: 0;
  overflow: hidden;
	background-color: #ede3da;
}
.contents_title{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 2;
}



.contentsBlk {
	overflow: hidden;
}
.contentsBlk p {
	font-family: "Noto Sans JP", sans-serif;
}




/* Pin Block */
.pinSection {
	position: relative;
	z-index: 1;
}
.js-pinBlock {
	height: 100vh;
	height: 100lvh;
	position: absolute;
	z-index: 1;
	width: 100%;
}
.relativeWrap {
	height: 100vh;
	height: 100lvh;
	position: relative;
}
.pinSection .caption {
	position: absolute;
	right: 4px;
	bottom: 4px;
	line-height: 1.2;
	font-size: 12px;
	color: #fff;
	font-family: "Noto Sans JP", sans-serif;
}

.pinInner {
	height: 100vh;
	height: 100lvh;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 0;
	/*! opacity: 0; */
	transition: opacity 0.8s;
}
.pinInner.scene02 {
	opacity: 0;
}
.scene02Start .pinInner.scene01 {
	opacity: 0;
	transition: opacity 0.8s;
}
.scene02Start .pinInner.scene02 {
	opacity: 1;
	transition: opacity 0.8s;
}
.pinInner.scene01 h2 {
	position: relative;
	width: 100%;
	height: 100%;
/* 	background-color: rgba(50,99,50,0.6); */
	display: grid;
	place-content: center;
}
.pinInner.scene01 h2 img {
	position: relative;
	top: 17px;
}
.bgWrap {
	position: relative;
	width: 100%;
	height: 100%;
}
.bgWrap img {
	max-width: initial;
	height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.pinInner.scene02 .colorMask {
	background-color: rgba(0,0,0,0.6);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.pinInner.scene02 .leadcopy {
	width: 100%;
	height: 100%;
	display: grid;
	place-content: center;
}
.pinInner.scene02 .leadcopy p {
	color: #fff;
	text-align: center;
	font-size: 19px;
	line-height: calc(57/19);
	letter-spacing: 0.08em;
	position: relative;
	top: 19px;
}
@media screen and (max-width: 1024px) {
	.pinInner.scene01 h2 img {
		top: 0;
		width: calc(( 186 / var(--media_tb)) * 100vw);
	}
	.pinInner.scene02 .leadcopy p {
		top: calc(( 9 / var(--media_tb)) * 100vw);
		font-size: calc(( 16 / var(--media_tb)) * 100vw);
		line-height: calc(48/16);
/*      font-size: 16px; */
	}
	.pinSection .caption {
		font-size: calc(( 12 / var(--media_tb)) * 100vw);
		right: calc(( 4 / var(--media_tb)) * 100vw);
		bottom: calc(( 4 / var(--media_tb)) * 100vw);
	}

}
@media screen and (max-width: 619px) {
	.pinInner.scene01 h2 img {
		top: 0;
		width: calc(( 345 / var(--media_sp)) * 100vw);
	}
	.pinInner.scene02 .leadcopy p {
		top: calc(( -2 / var(--media_tb)) * 100vw);
		font-size: calc(( 12 * 2 / var(--media_sp)) * 100vw);
	}
	.pinSection .caption {
    font-size: calc(( 10 * 2 / var(--media_sp)) * 100vw);
    right: calc(( 4 / var(--media_sp)) * 100vw);
    bottom: calc(( 4 / var(--media_sp)) * 100vw);
  }
}


.roomMovieWrap {
	height: calc(( 950 / var(--media_pc)) * 100vw );
	width: 100%;
	position: relative;
	overflow: hidden;

	/*! background-color: red; */
	z-index: 2;
}
.parallaxWrap {
	height: 100%;
}
.roomMovieWrap .relativeWrap .movieWrap {
	/*! scale: 1.2; */
}
.roomMovieWrap .movieWrap {
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.roomMovieWrap .relativeWrap {
	height: 100%;
}
.roomMovieWrap.non-animation .relativeWrap .movieWrap {
  scale: 1.35;
}
.simpleParallax {
	height: 100%;
}
.roomMovieWrap .btnWrap {
	position: absolute;
	right: 40px;
	bottom: 40px;
	width: 160px;
	height: 160px;
  border-radius: 100vw;
}
.roomMovieWrap .btnWrap a {
	width: 100%;
	height: 100%;
	cursor: pointer;
	display: block;
}
.roomMovieWrap .btnWrap a,
.roomMovieWrap .btnWrap a img {
	border-radius: 5000px;
clip-path: inset(0 round 0px);
}
@media screen and (max-width: 1024px) {
	.roomMovieWrap {
		height: calc(( 577 / var(--media_tb)) * 100vw );
	}
	.roomMovieWrap .btnWrap {
		position: absolute;
		right: calc(( 24 / var(--media_tb)) * 100vw );
		bottom: calc(( 24 / var(--media_tb)) * 100vw );
		width: calc(( 130 / var(--media_tb)) * 100vw );
		height: calc(( 130 / var(--media_tb)) * 100vw );
	}
}
@media screen and (max-width: 619px) {
	.roomMovieWrap {
		height: 178.03vw;
	}
	.roomMovieWrap .btnWrap {
		position: absolute;
		right: 50%;
		transform: translateX(50%);
		bottom: calc(( 80 / var(--media_sp)) * 100vw );
		width: calc(( 200 / var(--media_sp)) * 100vw );
		height: calc(( 200 / var(--media_sp)) * 100vw );
	}
}

.scroll_guide_absolute {
	position: fixed;
	bottom: 12px;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: fit-content;
	display: grid;
	place-content: baseline center;
}
.scroll_guide_absolute.hide {
	display: none;
}
.scroll_guide_absolute .scroll_guide{
  display: block;
  vertical-align: middle;
  color: #fff;
  line-height: 1;
  position: relative;
  width: 22.313px;
  height: 22.313px;
  transform: translateY(-50%) rotate(135deg);
  /*! position: absolute; */
  right: 17px;
  bottom: 50%;
  /*! top: 50%; */
}
.scroll_guide_absolute .scroll_guide::before,
.scroll_guide_absolute .scroll_guide::after{
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 0.1em;
}
.scroll_guide_absolute .scroll_guide::before{
  top: 0;
  left: 0;
  right: 0;
  height: 0.1em;
}
.scroll_guide_absolute .scroll_guide::after{
  top: 0;
  right: 0;
  bottom: 0;
  width: 0.1em;
}
@media screen and (max-width: 1024px) {
	.scroll_guide_absolute {
		bottom: 21.2%;
	}
	.scroll_guide_absolute .scroll_guide{
		width: calc(( 14 / var(--media_tb)) * 100vw);
		height: calc(( 14 / var(--media_tb)) * 100vw);
		right: 50%;
		bottom: 50%;
	}
}
@media screen and (max-width: 619px) {
	.scroll_guide_absolute {
		bottom: 5.3%;
	}
	.scroll_guide_absolute .scroll_guide{
		width: calc(( 37 / var(--media_sp)) * 100vw);
		height: calc(( 37 / var(--media_sp)) * 100vw);
		right: initial;
		bottom: -4vw;
	}
}

.imaginaryPinHeight {
	height: 200vh;
	height: 200lvh;
}

.planCountSec {
	width: 100%;
	height: 100vh;
	height: 100lvh;
	position: relative;
	z-index: 2;
}
.planCountSec .bgWrap {
	width: 100%;
	height: 100%;
}
.planCountSec .bgWrap img {
	object-fit: cover;
  object-position: center;
}
.planCountSec .textWrap {
	position: absolute;
	top: 0;
  width: 100%;
	height: 100%;
}
.planCountSec .textInnerWrap {
	height: fit-content;
	width: fit-content;
	position: absolute;
	top: 26.5%;
	left: 18.5%;
	transform: translate(-50%, -50%);
}
.planCountSec .textInnerWrap .counterWrap {
	position: relative;
	left: -68px;
}
.planCountSec .textInnerWrap p,
.planCountSec .textInnerWrap span {
	color: #fff;
	/*! letter-spacing: 0.08em; */
}
.planCountSec .caption {
	position: absolute;
	position: absolute;
	font-size: 12px;
	right: 4px;
	bottom: 4px;
	color: #fff;
	line-height: 1.2;
	font-family: "Noto Sans JP", sans-serif;
}
.planCountSec .textInnerWrap .counterWrap span {
	line-height: 1;
	font-family: "Barlow Semi Condensed", sans-serif;
	font-weight: 100;
	font-style: normal;
}
.planCountSec .textInnerWrap .counterWrap span.top {
	font-size: 213px;
	margin-right: 10px;
	width: 228.833px;
	display: inline-block;
	text-align: right;
}
.planCountSec .textInnerWrap .counterWrap span.bottom {
	font-size: 85.2px;
}
.planCountSec .textInnerWrap .bodyCopy  {
	position: relative;
	margin-top: 22px;
}
.planCountSec .textInnerWrap .bodyCopy p {
	font-size: 16px;
	line-height: 2;
	letter-spacing: 0.08em;
}
@media screen and (max-width: 1024px) {
	.planCountSec {
		height: 62.5vw;
	}
	.planCountSec .caption {
		font-size: calc(( 12 / var(--media_tb)) * 100vw);
    right: calc(( 4 / var(--media_tb)) * 100vw);
    bottom: calc(( 4 / var(--media_tb)) * 100vw);
  } 
}
@media screen and (max-width: 619px) {
	.planCountSec {
		height: 100vh;
		height: 100lvh;
		position: relative;
	}
	.planCountSec .caption {
    font-size: calc(( 10 * 2 / var(--media_sp)) * 100vw);
    right: calc(( 4 / var(--media_sp)) * 100vw);
    bottom: calc(( 4 / var(--media_sp)) * 100vw);
  } 
}
@media screen and (max-width: 1024px) {
	.planCountSec .textInnerWrap {
		top: 19.2%;
		left: 20.3%;
		transform: translate(-50%, -50%);
	}
	.planCountSec .textInnerWrap .counterWrap {
		position: relative;
		left: calc(( -45 / var(--media_tb)) * 100vw);
	}
	.planCountSec .textInnerWrap p,
	.planCountSec .textInnerWrap span {
		color: #fff;
	}
	.planCountSec .textInnerWrap .counterWrap span.adjustLetterSpace {
    margin-right: 1vw;
	}
	.planCountSec .textInnerWrap .counterWrap span.top {
		font-size: calc(( 130 / var(--media_tb)) * 100vw);
		margin-right: 1vw;
		width: calc(( 141 / var(--media_tb)) * 100vw);
	}
	.planCountSec .textInnerWrap .counterWrap span.bottom {
		font-size: calc(( 52 / var(--media_tb)) * 100vw);
	}
	.planCountSec .textInnerWrap .bodyCopy  {
		margin-top: calc(( 10 / var(--media_tb)) * 100vw);
	}
	.planCountSec .textInnerWrap .bodyCopy p {
		font-size: calc(( 15 / var(--media_tb)) * 100vw);
	}
}
@media screen and (max-width: 619px) {
	.planCountSec .textInnerWrap {
		top: 30.8%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
	}
	.planCountSec .textInnerWrap .counterWrap {
		position: relative;
		left: calc(( -49 / var(--media_tb)) * 100vw);
		text-align: center;
	}
	.planCountSec .textInnerWrap p,
	.planCountSec .textInnerWrap span {
		color: #fff;
	}
	.planCountSec .textInnerWrap .counterWrap span.adjustLetterSpace {
    margin-right: 1vw;
	}
	.planCountSec .textInnerWrap .counterWrap span.top {
		font-size: calc((106.63 * 2 / var(--media_sp)) * 100vw);
		margin-right: 1vw;
		width: calc(( 217 / var(--media_sp)) * 100vw);
		text-align: right;
		display: inline-block;
	}
	.planCountSec .textInnerWrap .counterWrap span.bottom {
		font-size: calc(( 106.63 * 0.4 * 2 / var(--media_sp)) * 100vw);
	}
	.planCountSec .textInnerWrap .bodyCopy  {
		margin-top: calc(( 10 / var(--media_sp)) * 100vw);
	}
	.planCountSec .textInnerWrap .bodyCopy p {
		text-align: center;
		line-height: calc(20/12);
		font-size: calc(( 12 * 2 / var(--media_sp)) * 100vw);
	}
}

.fourFeatures {
	background-image: url(../img/premium-collection/shinla-suite/suite_feature_bg_pc.webp);
	background-size: 100%;
	background-position: top;
	padding-bottom: 161px;
	padding-top: 107px;
	z-index: 2;
	position: relative;
}
.fourFeatures h3 {
	font-family: "Noto Serif JP", "Times New Roman", Times, A1 Mincho, YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight: 400;
	font-size: 32px;
	text-align: center;
	color: #333333;
	color: var(--commonBlackDark);
	margin-bottom: 64px;
}
.fourFeatures .gridWrap {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 0 40px;
	box-sizing: content-box;
	gap: 40px;
}
.fourFeatures .gridWrap .featureContent {
	display: block;
}
.fourFeatures .imgWrap {
	position: relative;
}
.fourFeatures .imgWrap .caption {
	position: absolute;
	font-size: 12px;
	right: 4px;
  bottom: 4px;
	color: #fff;
	line-height: 1.2;
	font-family: "Noto Sans JP", sans-serif;
}
.fourFeatures .gridWrap .featureContent .textWrap {
	background: #342922;
  background: linear-gradient(90deg, rgba(52, 41, 34, 1) 0%, rgba(91, 73, 62, 1) 50%, rgba(0, 0, 0, 1) 100%);
	max-height: 153px;
	height: 9.338vw;
	display: grid;
	place-content: center;
	min-height: 127px;
}
.fourFeatures .gridWrap .featureContent .textWrap p,
.fourFeatures .gridWrap .featureContent .textWrap span {
	color: #fff;
	font-size:	18px;
	line-height: calc(40/18);
	text-align: center;
	line-height: calc(40/22);
	letter-spacing: 0.08em;
}
.fourFeatures .gridWrap .featureContent .textWrap br{
	font-size: 0;
	line-height: 0;
}
.fourFeatures .gridWrap .featureContent .textWrap strong {
	color: #cdbd79;
	font-size: 30px;
	/*! font-family: "Noto Sans JP", sans-serif; */
	line-height: 1.2;
	font-family: YakuHanMP, "Noto Serif JP", "Times New Roman", Times, A1 Mincho, YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight: 300;
}
.fourFeatures .gridWrap .featureContent .textWrap .annotation {
	font-size: 12px;
}
@media screen and (max-width: 1024px) {
	.fourFeatures {
		background-image: url(../img/premium-collection/shinla-suite/suite_feature_bg_tb.webp);
		padding-bottom: calc(( 80 / var(--media_tb)) * 100vw);
		padding-top: calc(( 66 / var(--media_tb)) * 100vw);
	}
	.fourFeatures h3 {
		font-size: calc(( 24 / var(--media_tb)) * 100vw);
		margin-bottom: calc(( 38 / var(--media_tb)) * 100vw);
	}
	.fourFeatures .gridWrap {
		max-width: initial;
		padding: 0 calc(( 40 / var(--media_tb)) * 100vw);
		gap: calc(( 30 / var(--media_tb)) * 100vw);
	}
	.fourFeatures .imgWrap .caption {
		font-size: calc(( 12 / var(--media_tb)) * 100vw);
		right: calc(( 4 / var(--media_tb)) * 100vw);
		bottom: calc(( 4 / var(--media_tb)) * 100vw);
	}
	.fourFeatures .gridWrap .featureContent .textWrap {
		max-height: initial;
		height: 12.338vw;
		min-height: initial;
	}
	.fourFeatures .gridWrap .featureContent .textWrap p,
	.fourFeatures .gridWrap .featureContent .textWrap span {
		color: #fff;
		font-size:	calc(( 15 / var(--media_tb)) * 100vw);
		line-height: calc(40/22);
	}
	.fourFeatures .gridWrap .featureContent .textWrap strong {
		font-size: calc(( 25 / var(--media_tb)) * 100vw);
	}
	.fourFeatures .gridWrap .featureContent .textWrap .annotation {
		font-size: calc(( 12 / var(--media_tb)) * 100vw);
	}
}
@media screen and (max-width: 619px) {
	.fourFeatures {
		background-image: url(../img/premium-collection/shinla-suite/suite_feature_bg_sp.webp);
		padding-bottom: calc(( 80 / var(--media_sp)) * 100vw);
		padding-top: calc(( 70 / var(--media_sp)) * 100vw);
	}
	.fourFeatures h3 {
		font-size: calc(( 16 * 2 / var(--media_sp)) * 100vw);
		line-height: calc(26/16);
		margin-bottom: calc(( 41 / var(--media_sp)) * 100vw);
	}
	.fourFeatures .gridWrap {
		max-width: initial;
		padding: 0 calc(( 40 / var(--media_sp)) * 100vw);
		display: block;
	}
	.fourFeatures .gridWrap > * + * {
		margin-top: calc(( 21 / var(--media_sp)) * 100vw);
	}
	.fourFeatures .imgWrap .caption {
		font-size: calc(( 10 * 2 / var(--media_sp)) * 100vw);
		right: calc(( 4 / var(--media_sp)) * 100vw);
		bottom: calc(( 4 / var(--media_sp)) * 100vw);
	}
	.fourFeatures .gridWrap .featureContent .textWrap {
		max-height: initial;
		height: auto;
		padding: 2vw 0;
	}
	.fourFeatures .gridWrap .featureContent .textWrap p,
	.fourFeatures .gridWrap .featureContent .textWrap span {
		color: #fff;
		font-size:	calc(( 12 * 2 / var(--media_sp)) * 100vw);
		line-height: calc(24/12);
	}
	.fourFeatures .gridWrap .featureContent .textWrap strong {
		font-size: calc(( 18 * 2 / var(--media_sp)) * 100vw);
		line-height: calc(24/18);
	}
	.fourFeatures .gridWrap .featureContent .textWrap .annotation {
		font-size: calc(( 10 * 2/ var(--media_sp)) * 100vw);
	}
}


.planWrap {
	padding-top: 122px;
	padding-bottom: 194px;
}
.planWrap h3 {
	width: fit-content;
	display: block;
	margin: 0 auto 100px;
}
@media screen and (max-width: 1024px) {
	.planWrap {
		padding-top: calc(( 85 / var(--media_tb)) * 100vw);
		padding-bottom: calc(( 68 / var(--media_tb)) * 100vw);
	}
	.planWrap h3 {
		width: calc(( 85 / var(--media_tb)) * 100vw);
		margin: 0 auto calc(( 16 / var(--media_tb)) * 100vw);
	}
}
@media screen and (max-width: 619px) {
	.planWrap {
		padding-top: calc(( 85 / var(--media_sp)) * 100vw);
		padding-bottom: calc(( 173 / var(--media_sp)) * 100vw);
	}
	.planWrap h3 {
		width: calc(( 106 / var(--media_sp)) * 100vw);
		margin: 0 auto calc(( 16 / var(--media_sp)) * 100vw);
	}
}

.planFigSlideWrap.slideWrap {
	width: 100%;
}
.planFigSlideWrap .slide {
	margin: 0px auto;
}
.planFigSlideWrap .slide picture{
	/*! max-width: 1280px; */
	margin: 0 auto;
	display: block;
	width: 76.190vw;
}
.planFigSlideWrap .slide picture img {
	width: 76.190vw;
}
@media screen and (max-width: 1024px) {
	.planFigSlideWrap .slide {
		max-width: initial;
		margin: 0px auto;
		width: 100%;
	}
	.planFigSlideWrap .slide picture {
		width: 100%;
    display: block;
		margin: 0 auto;
	}
	.planFigSlideWrap .slide picture img {
    width: 82%;
    margin: 0 auto;
    display: block;
	}
}
@media screen and (max-width: 619px) {
/* 	.planFigSlideWrap .slide {
		max-width: initial;
		margin: 0px auto;
		width: 100%;
	}
	.planFigSlideWrap .slide picture {
		width: 100%;
    display: block;
		margin: 0 auto;
	} */
	.planFigSlideWrap .slide picture img {
    width: 100%;
/*     margin: 0 auto;
    display: block; */
	}
}

.planFigsWrap {
	position: relative;
}
.swiper-button-next::after, .swiper-button-prev::after {
  font-family: none;
	display: none;
  font-size: initial;
}
.arrow-btn {
transform: translate(0%, -50%);
	top: 43.6%;
	bottom: initial;
	left: initial;
	right: initial;
  margin-top: initial;
	width: 50px;
	height: 50px;
	padding-bottom: initial;
}
.arrow-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/top/plan_arrow.svg") no-repeat center;
	background-size: auto;
  background-size: contain;
  width: 50px;
  height: 50px;
  margin: 0;
  cursor: pointer;
  overflow: visible;
}
.swiper-button-next.arrow-btn {
	right: 9%;
}
.swiper-button-prev.arrow-btn {
	transform: rotate(180deg) translate(0%, 50%);
	left: 7%;
}
.simulationContent .arrow-btn {
	top: 50%;
}
.simulationContent .swiper-button-next.arrow-btn {
	right: 2.5%;
}
.simulationContent .swiper-button-prev.arrow-btn {
	left: 2.5%;
}
@media screen and (max-width: 1024px) {
	.arrow-btn::before {
		width: calc(( 33 / var(--media_tb)) * 100vw);
		height: calc(( 33 / var(--media_tb)) * 100vw);
	}
	.planFigsWrap {
		position: relative;
		padding-top: calc(( 59 / var(--media_tb)) * 100vw);
	}
	.arrow-btn {
		top: 46.9%;
		width: calc(( 33 / var(--media_tb)) * 100vw);
		height: calc(( 33 / var(--media_tb)) * 100vw);
  }
	.swiper-button-next.arrow-btn {
		right: 4.1%;
	}
	.swiper-button-prev.arrow-btn {
		right: 4.1%;
		right: initial;
		left: 4.1%;
	}
	.simulationContent .swiper-button-next.arrow-btn {
		right: 2.5%;
	}
	.simulationContent .swiper-button-prev.arrow-btn {
		left: 2.5%;
	}
}
@media screen and (max-width: 619px) {
	.planFigsWrap {
		padding-top: calc(( 52 / var(--media_sp)) * 100vw);
		/*! padding-top: 0; */
	}
	.arrow-btn {
	  top: initial;
	  bottom: -16.3vw;
		width: calc(( 50 / var(--media_sp)) * 100vw);
    height: calc(( 50 / var(--media_sp)) * 100vw);
	}
	.arrow-btn::before {
		width: calc(( 50 / var(--media_sp)) * 100vw);
		height: calc(( 50 / var(--media_sp)) * 100vw);
	}
	.swiper-button-next.arrow-btn {
		right: 40.5%;
	}
	.swiper-button-prev.arrow-btn {
		left: 40.5%;
	}
	.simulationContent .arrow-btn {
		width: calc(( 30 / var(--media_sp)) * 100vw);
		height: calc(( 30 / var(--media_sp)) * 100vw);
	}
	.simulationContent .arrow-btn:before {
		width: calc(( 30 / var(--media_sp)) * 100vw);
		height: calc(( 30 / var(--media_sp)) * 100vw);
	}
	.simulationContent .swiper-button-next.arrow-btn {
		right: 3.5%;
	}
	.simulationContent .swiper-button-prev.arrow-btn {
		left: 3.5%;
	}
}

.reformWrap .intro {
	padding-bottom: 101px;
	padding-top: 99px;
	background-image: url(../img/premium-collection/shinla-suite/reform_order_bg_pc.webp);
	background-size: cover;
	background-position: top;
}
.reformWrap .intro h3 {
	margin-bottom: 48px;
}
.reformWrap .intro img {
	margin: 0 auto;
	display: block;
}
.reformWrap .intro .leadCopy {
	font-size: 27px;
	line-height: calc(44/27);
	text-align: center;
	margin-bottom: 10px;
}
.reformWrap .intro .leadCopy  span {
	font-size: 16px;
	vertical-align: 0.2em;
	margin: 0 -0.4em;
}
.reformWrap .intro .leadCopy ,
.reformWrap .intro .leadCopy  span {
	font-family: "Noto Serif JP", "Times New Roman", Times, A1 Mincho, YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	color: var(--commonBlackThin);
	color: #fff;
}
.reformWrap .intro .bodyCopy {
	font-size: 16px;
	line-height: 2;
	text-align: center;
  color: var(--commonBlackThin);
	letter-spacing: 0.08em;
	font-family: "Noto Sans JP", sans-serif;
	color: #fff;
}
.reformWrap .intro .bodyCopy .annotation {
	font-size: 12px;
	display: block;
	margin-top: 5px;
	letter-spacing: 0;
	font-family: "Noto Sans JP", sans-serif;
}
@media screen and (max-width: 1024px) {
	.reformWrap .intro {
		padding-bottom:calc(( 57 / var(--media_tb)) * 100vw);
		padding-top: calc(( 57 / var(--media_tb)) * 100vw);
		background-image: url(../img/premium-collection/shinla-suite/reform_order_tb_pc.webp);
	}
	.reformWrap .intro h3 {
		margin-bottom:  calc(( 27 / var(--media_tb)) * 100vw);
	}
	.reformWrap .intro img {
		width:  calc(( 260 / var(--media_tb)) * 100vw);
	}
	.reformWrap .intro .leadCopy {
		font-size:  calc(( 24 / var(--media_tb)) * 100vw);
		line-height: calc(31.5/24);
		margin-bottom:  calc(( 15 / var(--media_tb)) * 100vw);
	}
	.reformWrap .intro .leadCopy  span {
		font-size: calc(( 14 / var(--media_tb)) * 100vw);
	}
	.reformWrap .intro .leadCopy ,
	.reformWrap .intro .leadCopy  span {
		font-family: "Noto Serif JP", "Times New Roman", Times, A1 Mincho, YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
		/* color: var(--commonBlackThin); */
	}
	.reformWrap .intro .bodyCopy {
		font-size: calc(( 15/ var(--media_tb)) * 100vw);
	}
	.reformWrap .intro .bodyCopy .annotation {
		font-size: calc(( 12/ var(--media_tb)) * 100vw);
		margin-top: 0.0vw;
	}
}
@media screen and (max-width: 619px) {
	.reformWrap .intro {
		padding-bottom:calc(( 81 / var(--media_sp)) * 100vw);
		padding-top: calc(( 79 / var(--media_sp)) * 100vw);
		background-image: url(../img/premium-collection/shinla-suite/reform_order_sp_pc.webp);
	}
	.reformWrap .intro h3 {
		margin-bottom:  calc(( 39 / var(--media_sp)) * 100vw);
	}
	.reformWrap .intro img {
		width:  calc(( 319 / var(--media_sp)) * 100vw);
	}
	.reformWrap .intro .leadCopy {
		font-size:  calc(( 16*2 / var(--media_sp)) * 100vw);
		line-height: calc(26/16);
		margin-bottom:  calc(( 27 / var(--media_sp)) * 100vw);
	}
	.reformWrap .intro .leadCopy  span {
		font-size:  calc(( 16*2 / var(--media_sp)) * 100vw);
		line-height: calc(26/16);
		vertical-align: initial;
	}
	.reformWrap .intro .leadCopy ,
	.reformWrap .intro .leadCopy  span {
		font-family: "Noto Serif JP", "Times New Roman", Times, A1 Mincho, YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
		/* color: var(--commonBlackThin); */
	}
	.reformWrap .intro .bodyCopy {
		font-size:  calc(( 12*2 / var(--media_sp)) * 100vw);
		line-height: calc(20/12);
	}
		.reformWrap .intro .bodyCopy .annotation {
		font-size: calc(( 10 * 2/ var(--media_sp)) * 100vw);
		margin-top: 0.1vw;
		line-height: 2;
		
	}
}


.examples,
.reformSimulation {
	background-color: #f4ede7;
}
.reformWrap .label {
  background-color: #9d9160;
	text-align: center;
	padding: 28px 0;
}
.reformWrap .label p {
	font-size: 24px;
	line-height: 1;
	color: #fff;
	letter-spacing: 0.08em;
	font-family: "Noto Sans JP", sans-serif;
}
.examples h4 {
	text-align: center;
	padding-top: 125px;
	padding-bottom: 28px;
}
.examples > .copy {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 40px;
	box-sizing: content-box;
}
.examples > .copy p{
	border-top: 1px solid #9d9160;
	width: 100%;
	display: block;
	font-size: 27px;
	font-family: "Noto Serif JP", "Times New Roman", Times, A1 Mincho, YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
  text-align: center;
	color: var(--commonBlackDark);
	padding-top: 13px;
	letter-spacing: -0.04em;
}
.examples > .copy p span {
	font-family: "Noto Serif JP", "Times New Roman", Times, A1 Mincho, YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
.reformPlanSlideWrap {
  margin-top: 71px;	
  padding-bottom: 59px;
}
@media screen and (max-width: 1024px) {
	 .reformWrap .label {
		 padding: calc(( 18/ var(--media_tb)) * 100vw) 0;
	}
	.reformWrap .label p {
		font-size: calc(( 19 / var(--media_tb)) * 100vw);
	}
	.examples h4 {
		text-align: center;
		padding-top: calc(( 78 / var(--media_tb)) * 100vw);
		padding-bottom: calc(( 20 / var(--media_tb)) * 100vw);
		width: calc(( 237 / var(--media_tb)) * 100vw);
		margin: 0 auto;
	}
	.examples > .copy {
		max-width: calc(( 857 / var(--media_tb)) * 100vw);
		margin: 0 auto;
		padding: 0 calc(( 40 / var(--media_tb)) * 100vw);
		box-sizing: content-box;
	}
	.examples > .copy p{
		font-size: calc(( 21 / var(--media_tb)) * 100vw);
		padding-top: calc(( 4 / var(--media_tb)) * 100vw);
	}
	.reformPlanSlideWrap {
		margin-top: calc(( 63 / var(--media_tb)) * 100vw);	
		padding-bottom: calc(( 119 / var(--media_tb)) * 100vw);
	}
}
@media screen and (max-width: 619px) {
	.reformWrap .label {
		 padding: calc(( 26 / var(--media_sp)) * 100vw) 0;
	}
	.reformWrap .label p {
		font-size: calc(( 14*2 / var(--media_sp)) * 100vw);
	}
	.examples h4 {
		text-align: center;
		padding-top: calc(( 84 / var(--media_sp)) * 100vw);
		padding-bottom: calc(( 29 / var(--media_sp)) * 100vw);
		width: calc(( 293 / var(--media_sp)) * 100vw);
		margin: 0 auto;
	}
	.examples > .copy {
		max-width: calc(( 857 / var(--media_sp)) * 100vw);
		margin: 0 auto;
		padding: 0 calc(( 40 / var(--media_sp)) * 100vw);
		box-sizing: content-box;
	}
	.examples > .copy p{
		font-size: calc(( 14*2 / var(--media_sp)) * 100vw);
		padding-top: calc(( 15 / var(--media_sp)) * 100vw);
		line-height: calc(24/14);
	}
	.reformPlanSlideWrap {
		margin-top: calc(( 59 / var(--media_sp)) * 100vw);	
		padding-bottom: calc(( 100 / var(--media_sp)) * 100vw);
	}
}

.reformSimulation {
	padding-bottom: 160px;
}
.reformSimulation h4 {
	margin: 0 auto 80px;
	width: fit-content;
}
.simulationContents > * + * {
	margin-top: 160px;
}

.simulationContent .innerContentWrap {
	padding: 0 40px;
	max-width: 1280px;
	margin: 0 auto;
	box-sizing: content-box;
}
.simulationContent .imgWrap {
/* 	width: 100%; */
	max-width: 1280px;
	margin: 0 auto;
  position: relative;
}
.simulationContent .imgWrap .caption {
	position: absolute;
	right: 4px;
	bottom: 4px;
	line-height: 1.2;
	font-size: 12px;
	color: #fff;
	font-family: "Noto Sans JP", sans-serif;
}
.simulationContent .slideContent {
	max-width: 1280px;
	margin: 0 auto;
	box-sizing: content-box;
	display: block;
	width: 76.19047619047619vw;
}
.simulationContent .innerContentWrap {
	display: flex;
	justify-content: space-between;
	margin-top: 74px;
}
.simulationContent .innerContentWrap .textWrap {
	width: 460px;
}
.simulationContent .innerContentWrap .textWrap .leadCopy {
	font-size: 24px;
	line-height: calc(42/24);
  color: var(--commonBlackThin);
	margin-top: -4px;
	margin-bottom: 21px;
	letter-spacing: 0.08em;
}
.simulationContent .innerContentWrap .textWrap .bodyCopy {
	font-size: 16px;
	line-height: calc(32/16);
  color: var(--commonBlackThin);
	letter-spacing: 0.08em;
	font-family: "Noto Sans JP", sans-serif;
}
.simulationContent .innerContentWrap .textWrap .costSimlation {
	margin-top: 35px;
}
@media screen and (max-width: 1024px) {
	.reformSimulation {
		padding-bottom: calc(( 117 / var(--media_tb)) * 100vw);
	}
	.simulationContent .imgWrap .caption {
		font-size: calc(( 12 / var(--media_tb)) * 100vw);
    right: calc(( 4 / var(--media_tb)) * 100vw);
    bottom: calc(( 4 / var(--media_tb)) * 100vw);
	}
	.reformSimulation h4 {
		margin: 0 auto calc(( 50 / var(--media_tb)) * 100vw);;
		width: calc(( 357 / var(--media_tb)) * 100vw);
	}
	.simulationContents > * + * {
		margin-top: calc(( 117 / var(--media_tb)) * 100vw)
	}
	.simulationContent .imgWrap,
	.simulationContent .innerContentWrap {
		max-width: calc(( 944 / var(--media_tb)) * 100vw);
		/*! padding: 0 calc(( 40 / var(--media_tb)) * 100vw); */;
		margin: 0 auto;
		box-sizing: content-box;
	}
	.simulationContent .innerContentWrap {
		margin-top: calc(( 39 / var(--media_tb)) * 100vw);
	}
	.simulationContent .innerContentWrap .textWrap {
		width: calc(( 400 / var(--media_tb)) * 100vw);
	}
	.simulationContent .innerContentWrap .textWrap .leadCopy {
		font-size: calc(( 21 / var(--media_tb)) * 100vw);
		line-height: calc(33/21);
		margin-top: calc(( -1 / var(--media_tb)) * 100vw);
		margin-bottom: calc(( 11 / var(--media_tb)) * 100vw);
	}
	.simulationContent .innerContentWrap .textWrap .bodyCopy {
		font-size: calc(( 15 / var(--media_tb)) * 100vw);
		line-height: calc(28/15);
		color: var(--commonBlackThin);
		letter-spacing: 0;
	}
	.simulationContent .innerContentWrap .textWrap .costSimlation {
		margin-top: calc(( 27 / var(--media_tb)) * 100vw);
	}
	.simulationContent.livingDining .innerContentWrap picture img {
		width: calc(( 225 / var(--media_tb)) * 100vw);
	}
	.simulationContent.livingDiningAndParivateRoom .innerContentWrap picture img {
		width: calc(( 323 / var(--media_tb)) * 100vw);
	}
}
@media screen and (max-width: 619px) {
	.reformSimulation {
		padding-bottom: calc(( 80 / var(--media_sp)) * 100vw);
	}
	.simulationContent .imgWrap .caption {
    font-size: calc(( 10 * 2 / var(--media_sp)) * 100vw);
    right: calc(( 4 / var(--media_sp)) * 100vw);
    bottom: calc(( 4 / var(--media_sp)) * 100vw);
	}
	.reformSimulation h4 {
		margin: 0 auto calc(( 80 / var(--media_sp)) * 100vw);;
		width: calc(( 440 / var(--media_sp)) * 100vw);
	}
	.simulationContents > * + * {
		margin-top: calc(( 80 / var(--media_sp)) * 100vw);
	}
	.simulationContent .imgWrap,
	.simulationContent .innerContentWrap {
		max-width: calc(( 670 / var(--media_sp)) * 100vw);
		/*! padding: 0 calc(( 40 / var(--media_sp)) * 100vw); */;
		margin: 0 auto;
		box-sizing: content-box;
	}
	.simulationContent .innerContentWrap {
		margin-top: calc(( 39 / var(--media_sp)) * 100vw);
		display: block;
	}
	.simulationContent .innerContentWrap .textWrap {
		width: auto;
		margin-top: 4vw;
	}
	.simulationContent .innerContentWrap .textWrap .leadCopy {
		font-size: calc(( 16*2 / var(--media_sp)) * 100vw);
		line-height: calc(32/16);
		margin-top: calc(( -1 / var(--media_sp)) * 100vw);
		margin-bottom: calc(( 11 / var(--media_sp)) * 100vw);
	}
	.simulationContent .innerContentWrap .textWrap .bodyCopy {
		font-size: calc(( 12*2 / var(--media_sp)) * 100vw);
		line-height: calc(24/12);
	}
	.simulationContent .innerContentWrap .textWrap .costSimlation {
		margin-top: calc(( 32 / var(--media_sp)) * 100vw);
	}
	.simulationContent.livingDining .innerContentWrap picture img {
		width: calc(( 276 / var(--media_sp)) * 100vw);
	}
	.simulationContent.livingDiningAndParivateRoom .innerContentWrap picture img {
		width: calc(( 393 / var(--media_sp)) * 100vw);
	}
}

.costSimlation .button_wrap button {
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
	
	font-size: 16px;
	color: #fff;
	text-align: center;
	width: 100%;
	background-color: #5b493e;
	
	height: 60px;
/* 	display: block; */
	position: relative;
}
.costSimlation .button_wrap button span {
	font-family: "Noto Sans JP", sans-serif;
}
.costSimlation .button_wrap button .arrow {
  display: block;
  vertical-align: middle;
  color: #fff;
  line-height: 1;
  position: relative;
  width: 11.313px;
  height: 11.313px;
  transform: translateY(-50%) rotate(135deg);
  position: absolute;
  right: 32px;
  bottom: 50%;
  top: 50%;
}
.costSimlation .button_wrap button.active .arrow {
	  transform: translateY(-10%) rotate(315deg);
}
.costSimlation .button_wrap button .arrow::before,
.costSimlation .button_wrap button .arrow::after{
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 0.1em;
}
.costSimlation .button_wrap button .arrow::before{
  top: 0;
  left: 0;
  right: 0;
  height: 0.1em;
}
.costSimlation .button_wrap button .arrow::after{
  top: 0;
  right: 0;
  bottom: 0;
  width: 0.1em;
}
@media screen and (max-width: 1024px) {
	.costSimlation .button_wrap button {
		background-color: transparent;
		border: none;
		cursor: pointer;
		outline: none;
		padding: 0;
		appearance: none;
		font-size: calc(( 15 / var(--media_tb)) * 100vw);
		background-color: #5b493e;
		height: calc(( 51 / var(--media_tb)) * 100vw);
	}
	.costSimlation .button_wrap button .arrow {
		width: calc(( 8 / var(--media_tb)) * 100vw);
		height: calc(( 8 / var(--media_tb)) * 100vw);
		right: calc(( 23 / var(--media_tb)) * 100vw);
		bottom: 50%;
		top: 50%;
	}
}
@media screen and (max-width: 619px) {
	.costSimlation .button_wrap button {
		font-size: calc(( 14*2 / var(--media_sp)) * 100vw);
		background-color: #5b493e;
		height: calc((100 / var(--media_sp)) * 100vw);
		letter-spacing: 0.08em;
	}
	.costSimlation .button_wrap button .arrow {
		width: calc(( 22 / var(--media_sp)) * 100vw);
		height: calc(( 22 / var(--media_sp)) * 100vw);
		right: calc(( 35 / var(--media_sp)) * 100vw);
		bottom: 50%;
		top: 42%;
	}
}


.costSimlationContent {
	background-color: #ece4d9;
	max-height: 0;
	transition: max-height 0.6s;
	overflow: hidden;
}
.costSimlationContent tbody,
.costSimlationContent p.annotation {
	padding: 0px 30px ;
}
.costSimlationContent tbody {
	padding-top: 21px;
}
.costSimlationContent p.annotation {
	padding-bottom: 26px;
}
.costSimlationContent table,
.costSimlationContent tbody {
	width: 100%;
}
.costSimlationContent tbody  {
	display: block;
}
.costSimlationContent tr {
	width: 100%;
	display: grid;
  grid-template-columns: 3fr 1.1fr;
}
.costSimlationContent tr.total {
	border-top: 1px solid #cccccc;
	margin-top: 15px;
	padding-top: 15px;
	border-bottom: 1px solid #cccccc;
	padding-bottom: 15px;
}
.costSimlationContent td {
	font-size: 16px;
	font-family: "Noto Sans JP", sans-serif;
	text-align: left;
	color: var(--commonBlackThin);
	letter-spacing: 0.08em;
}
.costSimlationContent p.annotation {
	font-size: 12px;
	line-height: 1.5;
	padding-top: 15px;
	font-family: "Noto Sans JP", sans-serif;
}
@media screen and (max-width: 1024px) {
	.costSimlationContent tbody,
	.costSimlationContent p.annotation {
		padding: 0px calc(( 17 / var(--media_tb)) * 100vw);
	}
	.costSimlationContent tbody {
		padding-top: calc(( 12 / var(--media_tb)) * 100vw);
	}
	.costSimlationContent p.annotation {
		padding-bottom: calc(( 13 / var(--media_tb)) * 100vw);
	}
	.costSimlationContent tbody  {
		display: block;
	}
	.costSimlationContent tr {
		grid-template-columns: 3fr 1.1fr;
	}
	.costSimlationContent tr.total {
		border-top: 1px solid #cccccc;
		margin-top: calc(( 15 / var(--media_tb)) * 100vw);
		padding-top: calc(( 12 / var(--media_tb)) * 100vw);
		padding-bottom: calc(( 12 / var(--media_tb)) * 100vw);
	}
	.costSimlationContent td {
		font-size: calc(( 15 / var(--media_tb)) * 100vw);
		line-height: calc(25/15);
	}
	.costSimlationContent p.annotation {
		font-size: calc(( 12 / var(--media_tb)) * 100vw);
		padding-top: calc(( 12 / var(--media_tb)) * 100vw);
	}
}
@media screen and (max-width: 619px) {
	.costSimlationContent tbody,
	.costSimlationContent p.annotation {
		padding: 0px calc(( 34/ var(--media_sp)) * 100vw);
	}
	.costSimlationContent tbody {
		padding-top: calc(( 15 / var(--media_sp)) * 100vw) ;
	}
	.costSimlationContent p.annotation {
		padding-bottom: calc(( 22 / var(--media_sp)) * 100vw);
	}
	.costSimlationContent tbody  {
		display: block;
	}
	.costSimlationContent tr {
		grid-template-columns: 3.0fr 1.1fr;
	}
	.costSimlationContent tr.total {
		border-top: 1px solid #cccccc;
		margin-top: calc(( 22 / var(--media_sp)) * 100vw);
		padding-top: calc(( 24 / var(--media_sp)) * 100vw);
		/*! border-top: 1px solid #5b493e; */
		padding-bottom: calc(( 24 / var(--media_sp)) * 100vw);
	}
	.costSimlationContent td {
		font-size: calc(( 12*2 / var(--media_sp)) * 100vw);
		line-height: calc(24/12);
	}
	.costSimlationContent p.annotation {
		font-size: calc(( 10 * 2 / var(--media_sp)) * 100vw);
		padding-top: calc(( 24 / var(--media_sp)) * 100vw);
	}
}

.benefitsAndView {
	background-image: url(../img/premium-collection/shinla-suite/benefits_and_view_bg_pc.webp);
  background-size: 100% 905px;
  background-position: top center;
}
.benefitsBnrWrap {
	display: grid;
	max-width: 1280px;
	padding: 160px 40px 0;
	box-sizing: content-box;
	grid-template-columns: 566fr 714fr;
	margin:  0 auto 0;
	height: 245px;
}
.benefitsBnrWrap .title {
	background: #342922;
  background: linear-gradient(90deg, rgba(52, 41, 34, 1) 0%, rgba(91, 73, 62, 1) 50%, rgba(52, 41, 34, 1) 100%);
	display: grid;
	place-content: center;
}
.benefitsBnrWrap .text {
	background-color: #5b493e;
	background-image: url(../img/premium-collection/shinla-suite/benefits_bg_pc.webp);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right;
	display: grid;
	place-content: center left;
}
.benefitsBnrWrap .text p {
  color: #fff;	
  font-size: 15px;
  line-height: 1.9;
	display: block;
	margin-left: 3.6vw;
  letter-spacing: 0.08em;
  font-family: "Noto Sans JP", sans-serif;
}
.benefitsBnrWrap .text .annotation {
	font-size: 12px;
	margin-top: 7px;
}
@media screen and (max-width: 1024px) {
	.benefitsAndView {
		background-image: url(../img/premium-collection/shinla-suite/benefits_and_view_bg_tb.webp);
		background-size: 100% calc(( 905 / var(--media_tb)) * 100vw);
	}
	.benefitsBnrWrap {
		max-width: initial;
		padding: calc(( 121 / var(--media_tb)) * 100vw) calc(( 40 / var(--media_tb)) * 100vw) 0;
		grid-template-columns: 397fr 548fr;
		margin:  0 auto 0;
		height: calc(( 179 / var(--media_tb)) * 100vw);
	}
	.benefitsBnrWrap .title img {
    width: calc(( 326 / var(--media_tb)) * 100vw);
	}
	.benefitsBnrWrap .text {
		background-image: url(../img/premium-collection/shinla-suite/benefits_bg_tb.webp);
	}
	.benefitsBnrWrap .text p {
		color: #fff;	
		font-size: calc(( 15 / var(--media_tb)) * 100vw);
		line-height: calc(27/15);
		margin-left: calc(( 33 / var(--media_tb)) * 100vw);
	}
	.benefitsBnrWrap .text .annotation {
		font-size: calc(( 12 / var(--media_tb)) * 100vw);
		margin-top: calc(( 1 / var(--media_tb)) * 100vw);
	}
}
@media screen and (max-width: 619px) {
	.benefitsBnrWrap .title {
		padding: 5.5vw 0;
	}
	.benefitsAndView {
		background-image: none;
		background-size: 100% calc(( 905 / var(--media_sp)) * 100vw);
	}
	.benefitsBnrWrap {
		max-width: initial;
		padding: 0;
		grid-template-columns: 397fr 548fr;
		margin:  0 auto 0;
		height: auto;
		display: block;
	}
	.benefitsBnrWrap .title img {
    width: calc(( 587 / var(--media_sp)) * 100vw);
	}
	.benefitsBnrWrap .text {
		background-image: url(../img/premium-collection/shinla-suite/benefits_bg_sp.webp);
		place-content: center;
		padding: 4vw 0 4.2vw;
	}
	.benefitsBnrWrap .text p {
		font-size: calc(( 12*2 / var(--media_sp)) * 100vw);
		line-height: calc(20/12);
		margin-left: initial;
		text-align: center;
		padding: 0;
	}
	.benefitsBnrWrap .text .annotation {
		font-size: calc(( 10*2 / var(--media_sp)) * 100vw);
		margin-top: calc(( 1 / var(--media_sp)) * 100vw);
		line-height: calc(16/10);
	}
}

.view .titleWrap {
	width: fit-content;
	margin: 160px auto 48px;
	text-align: center;
}
.view .titleWrap .leadcopy {
	font-size: 27px;
	text-align: center;
	margin-top: 43px;
	font-family: "Noto Serif JP", "Times New Roman", Times, A1 Mincho, YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
.view .titleWrap .leadcopy.copy-night {
	display: none;
}
input[name="tab-radio"] {
  display: none;
}
.vieWrap .tab-wrapper {
	display: flex;
	max-width: 1280px;
  margin: 0 auto 59px;
	padding: 0 40px;
	box-sizing: content-box;
}
.tab-wrapper > .tab {
	position: relative;
	width: 50%;
}
.tab-wrapper .tab-label {
	width: 100%;
	display: grid;
	place-content: center;
	background-color: #fff;
	padding: 24px 0;
}
.tab-wrapper > .tab:has(.selected) .tab-label  {
	background-color: #5b493e;
}
.tab-wrapper > .tab .cls-1 {
	fill: #5b493e;;
}
.tab-wrapper > .tab .selected .cls-1 {
	fill: #fff;
}
.panelPlace {
	position: relative;
}
.touchGuidance {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	display: grid;
  align-items: end;
	pointer-events: none;
}
.touchGuidance p {
	background-color: rgba(15,15,15,0.6);
	color: #fff;
	font-size: 17px;
	letter-spacing: 0.08em;
	padding: 1px 0;
	font-family: "Noto Sans JP", sans-serif;
}
.tab-panel.panel-b {
	display: none;
}
.panelPlace .tab-panel {
  height: 451px;		
}
.panelPlace .tab-panel .caption {
	position: absolute;
	right: 4px;
	bottom: 18px;
	line-height: 1.2;
	font-size: 12px;
	color: #fff;
	font-family: "Noto Sans JP", sans-serif;
}
.panelPlace .tab-panel picture {
	overflow: scroll;
	height: 100%;
	display: block;
	cursor: move;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.panelPlace .tab-panel picture::-webkit-scrollbar { display: none; }
.panelPlace .tab-panel picture img {
	max-width: initial;
	height: 100%;
}
.touchGuidance.hide {
	opacity: 0;
	pointer-events: none;
	transition: opacity 1s;
}
@media screen and (max-width: 1024px) {
	.view .titleWrap {
		margin: calc(( 124 / var(--media_tb)) * 100vw) auto calc(( 38 / var(--media_tb)) * 100vw);
	}
	.view .titleWrap img {
		width: calc(( 358 / var(--media_tb)) * 100vw);
	}
	.view .titleWrap .leadcopy {
		font-size: calc(( 24 / var(--media_tb)) * 100vw);
		margin-top: calc(( 20 / var(--media_tb)) * 100vw);
	}
	.vieWrap .tab-wrapper {
		max-width: initial;
		margin: 0 auto calc(( 32 / var(--media_tb)) * 100vw);;
		padding: initial;
		width: calc(( 780 / var(--media_tb)) * 100vw);
	}
	.panelPlace .tab-panel {
		height: calc(( 408 / var(--media_tb)) * 100vw);		
	}
	.panelPlace .tab-panel .caption {
		font-size: calc(( 12 / var(--media_tb)) * 100vw);
    right: calc(( 4 / var(--media_tb)) * 100vw);
    bottom: calc(( 18 / var(--media_tb)) * 100vw);
	}
	.tab-wrapper .tab-label {
		padding: calc(( 19 / var(--media_tb)) * 100vw) 0;
	}
	.touchGuidance p {
		color: #fff;
		font-size: calc(( 15 / var(--media_tb)) * 100vw);
		letter-spacing: 0.08em;
		padding: calc(( 1 / var(--media_tb)) * 100vw) 0;
	}
	.tab.day svg {
		width: calc(( 38 / var(--media_tb)) * 100vw);
		display: block;
	}
	.tab.night svg {
		width: calc(( 52 / var(--media_tb)) * 100vw);
		display: block;
	}
}
@media screen and (max-width: 619px) {
	.panelPlace .tab-panel {
		height: calc(( 507 / var(--media_sp)) * 100vw);
	}
	.panelPlace .tab-panel picture {
		height: 100%;
		display: block;
	}
	.panelPlace .tab-panel picture img {
		max-width: initial;
		height: 100%;
	}
	.view .titleWrap {
		padding: calc(( 124 / var(--media_sp)) * 100vw) 0 calc(( 52 / var(--media_sp)) * 100vw);
		background-image: url(../img/premium-collection/shinla-suite/benefits_and_view_bg_sp.webp);
		background-size: cover;
		margin: 0;
		width: 100%;
	}
	.view .titleWrap img {
		width: calc(( 439 / var(--media_sp)) * 100vw);
	}
	.view .titleWrap .leadcopy {
		font-size: calc(( 16*2 / var(--media_sp)) * 100vw);
		line-height: calc(22/16);
		margin-top: calc(( 42 / var(--media_sp)) * 100vw);
	}
	.vieWrap .tab-wrapper {
		max-width: initial;
		margin: 0 auto;;
		padding: initial;
		width: 100%;
	}
	.tab-wrapper .tab-label {
		padding: calc(( 24 / var(--media_sp)) * 100vw) 0;
	}
	.panelPlace .tab-panel .caption {
    font-size: calc(( 10 * 2 / var(--media_sp)) * 100vw);
    right: calc(( 4 / var(--media_sp)) * 100vw);
    bottom: calc(( 28 / var(--media_sp)) * 100vw);
	}
	.touchGuidance p {
		color: #fff;
		font-size: calc(( 12*2 / var(--media_sp)) * 100vw);
		padding: calc(( 1 / var(--media_sp)) * 100vw) 0;
	}
	.tab.day svg {
		width: calc(( 51 / var(--media_sp)) * 100vw);
	}
	.tab.night svg {
		width: calc(( 72 / var(--media_sp)) * 100vw);
	}
	
	.touchGuidance {
		display: grid;
	}
	.touchGuidance.hide {
		opacity: 0;
		pointer-events: none;
	}
}

.premiumCollectionLinks {
	background-color: #202020;
}
.premiumCollectionLinks .flexWrap {
	display: flex;
	gap: 10px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 121px 40px;
	box-sizing: content-box;
}
.premiumCollectionLinks .flexWrap .bnrWrap a {
	position: relative;
}
.premiumCollectionLinks .flexWrap .bnrWrap a .title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
@media screen and (max-width: 1024px) {
	.premiumCollectionLinks .flexWrap {
		gap: calc(( 24 / var(--media_tb)) * 100vw);
		max-width: initial;
		padding: calc(( 40 / var(--media_tb)) * 100vw) calc(( 40 / var(--media_tb)) * 100vw);
	}
	.premiumCollectionLinks .flexWrap .bnrWrap a .title {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
}
@media screen and (max-width: 619px) {
	.premiumCollectionLinks .flexWrap {
		display: block;
		max-width: initial;
		padding: calc(( 40 / var(--media_sp)) * 100vw) calc(( 40 / var(--media_sp)) * 100vw);
	}
	.premiumCollectionLinks .flexWrap > * + * {
		margin-top: calc(( 40 / var(--media_sp)) * 100vw);
	}
	.premiumCollectionLinks .suiteLink .title img {
    width: calc(( 221 / var(--media_sp)) * 100vw) 
	}
	.premiumCollectionLinks .premiumLink .title img {
    width: calc(( 242 / var(--media_sp)) * 100vw) 
	}
}

.remodal {
	padding: 0;
  width: 100%;
	max-width:  1080px !important;
	height: auto;
	aspect-ratio: 1080 / 608;
	max-height: 608px !important;
	margin: 0 auto;
	background-color: rgba(0,0,0,0);
}
.remodal .remodalYtWrap {
	width: 100%;
	height: 100%;
}
.remodal-overlay {
  background: rgba(0, 0, 0, 0.8);
}
.remodal-close {
  position: absolute;
  top: -105px;
  left: initial;
	right: 0;
  display: block;
  overflow: visible;
  width: 65px;
  height: 65px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s;
  text-decoration: none;
  color: #ffffff;
  border: 0;
  outline: 0;
  background: transparent;
}
.remodal-close::before {
  content: no-close-quote;
}
.remodal-close .cross {
	position: relative;
	width: 65px;
	height: 65px;
}
.remodal-close .cross::before, .remodal-close .cross::after { /* 共通設定 */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px; /* 棒の幅（太さ） */
  height: 65px; /* 棒の高さ */
  background: #fff;
}
.remodal-close:hover {
	opacity: 0.7;
}
.remodal-close .cross::before {
  transform: translate(-50%,-50%) rotate(45deg);
}
.remodal-close .cross::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}
@media screen and (max-width: 1024px) {
	.remodal {
		width: calc(( 800 / var(--media_tb)) * 100vw);
	}
	.remodal-close {
		top: calc(( -105 / var(--media_tb)) * 100vw);
	}
	button.remodal-close,
	.remodal-close .cross {
		width: calc(( 65 / var(--media_tb)) * 100vw);
		height: calc(( 65 / var(--media_tb)) * 100vw);

	}
	.remodal-close .cross::before, .remodal-close .cross::after {
		display: inline-block;
		height: calc(( 65 / var(--media_tb)) * 100vw);
		top: 0vw;
	}
}
@media screen and (max-width: 619px) {
	.remodal {
		width: 100%;
	}
	.remodal-close {
		top: calc(( -105 / var(--media_sp)) * 100vw);
	}
	button.remodal-close,
	.remodal-close .cross {
		width: calc(( 65 / var(--media_sp)) * 100vw);
		height: calc(( 65 / var(--media_sp)) * 100vw);

	}
	.remodal-close .cross::before, .remodal-close .cross::after {
		display: inline-block;
		height: calc(( 65 / var(--media_sp)) * 100vw);
		top: 0vw;
	}
}