@charset "UTF-8";

/* ページコンテナ
----------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .area .breadcrumb2{
    margin-top: 0;
    padding-top:calc(80 * var(--sp-w));
  }
}

.rakurakuContainer {
  padding-block: 112px 134px;
  background-color: var(--cc-gray-50);
  color: var(--cc-black-sm);
}

@media (max-width: 1023px) {
  .rakurakuContainer {
    padding-block: 0 calc(64 * var(--sp-w));
  }
}

.rakurakuContainer+.breadcrumb2 {
  margin-top: 0;
}

.rakurakuContainer .l2-h1A>span {
  font-size: 48px;
}

@media (max-width: 1023px) {
  .rakurakuContainer .l2-h1A>span {
    font-size: calc(28 * var(--sp-w));
    line-height: 1;
  }
}

.l2-headerA__inner {
  padding-top: 64px;
}

@media (max-width: 1023px) {
  .l2-headerA__inner {
    padding-top: 0;
    padding-block: calc(28 * var(--sp-w)) calc(24 * var(--sp-w));
  }
}

.summaryContainer {
  margin: auto;
  display: flex;
  gap: 3.27%;
  margin-top: 16px;
}
@media (min-width: 1024px) and (max-width: 1280px) {
  .rakurakuContainer .summaryContainer {
    width: calc(100% - 120px);
  }
  .rakurakuContainer .summaryContainer .js-text-anim01__text {
    justify-content: flex-start;
    width: auto;
    padding-right: .5em;
  }
}
@media (max-width: 1023px) {
  .summaryContainer {
    display: block;
    margin-top: 0;
  }
}

@media (max-width: 1023px) {
  .summaryContainer .p2-spPi16 {
    padding-inline: 0;
  }
}
.summaryPhoto {
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 400ms ease-in-out 400ms,
              transform 400ms ease-in-out 400ms;
  width: 66%;
  border-radius: 8px;
  flex: 0 0 auto;
}
@media (max-width: 1023px) {
  .summaryPhoto {
    width: 100%;
    border-radius: calc(6 * var(--sp-w));
  }
}

.summaryTextPart {
  margin-top: auto;
}
@media (min-width: 1024px) and (max-width: 1280px) {
  .rakurakuContainer .summaryTextPart {
    width: 30.7%;
  }
}
@media (max-width: 1023px) {
  .summaryTextPart {
    margin-top: calc(24 * var(--sp-w));
  }
}

.summaryTextPart h2 {
  font-size: 32px;
  font-family: var(--ff-zen);
  line-height: 1.3125;
}

@media (max-width: 1023px) {
  .summaryTextPart h2 {
    font-size: calc(20 * var(--sp-w));
    line-height: 1.4;
  }
}

.summaryText {
  font-family: var(--ff-noto-sans);
  padding: 24px 0 6px 0;
}

@media (max-width: 1023px) {
  .summaryText {
    padding-top: calc(16 * var(--sp-w));
    padding-bottom: 0;
    font-size: calc(16 * var(--sp-w));
  }
}

.summaryContainer .js-text-anim01__text {
  width: 264px;
  padding-right: 41px;
}

@media (max-width: 1023px) {
  .summaryContainer .js-text-anim01__text {
    width: calc(212 * var(--sp-w));
    padding-right: calc(15 * var(--sp-w));
  }
}

.featureBlock {
  background-color: #FFFFFF;
  margin: 80px auto 0 auto;
  border: 1px solid var(--cc-stroke-wb);
  border-radius: 8px;
}
@media (min-width: 1024px) and (max-width: 1280px) {
  .rakurakuContainer .summaryContainer .featureBlock {
    width: 30.7%;
  }
  .rakurakuContainer .featureBlock {
    width: calc(100% - 120px);
  }
}
@media (max-width: 1023px) {
  .featureBlock {
    margin-top: calc(64 * var(--sp-w));
    width: 91.7%;
    padding: 0;
    border: calc(1 * var(--sp-w)) solid var(--cc-stroke-wb);
    border-radius: calc(4 * var(--sp-w));
  }

  .topBlock.featureBlock {
    margin-top: calc(40 * var(--sp-w));
  }
}

.blockContainer {
  width: 1016px;
  margin: auto;
  padding: 40px 0 48px 0;
}
@media (min-width: 1024px) and (max-width: 1280px) {
  .rakurakuContainer .blockContainer {
    width: 93.02%;
  }
}
@media (max-width: 1023px) {
  .blockContainer {
    width: 93.02%;
    margin: auto;
    padding: calc(24 * var(--sp-w)) 0 calc(40 * var(--sp-w)) 0;
  }
}
.media{
  background-color:var(--cc-gray-50);
}

.media__left::before {
  width: 54px;
}
@media (min-width: 1024px) and (max-width: 1280px) {
  .media .media__inner {
    width: 100%;
    padding-inline: 40px 80px;
  }
}
@media screen and (max-width: 1023px) {
  .media__left::before {
    left: 0;
    width: calc(54 * var(--sp-w));
  }
}
.media .media__left::before{
  width: 56px;
}
@media screen and (max-width: 1023px) {
  .media .media__left::before {
    width: calc(56 * var(--sp-w));
  }
}

.media__right::before{
  left:40px;
}

@media screen and (max-width: 1023px) {
  .media__right::before {
    width: calc(56 * var(--sp-w));
  }
}

.featureBlock>.media__left {
  border: none;
}

.blockHeading p {
  font-size: 18px;
  font-family: var(--ff-zen);
  color: var(--cc-red-700);
  padding-bottom: 8px;
}

@media (max-width: 1023px) {
  .blockHeading p {
    font-size: calc(14 * var(--sp-w));
    padding-bottom: 0;
  }
}

.blockHeading h2 {
  font-size: 40px;
  font-family: var(--ff-zen);
  color: #000000;
  padding-bottom: 24px;
}

@media (max-width: 1023px) {
  .blockHeading h2 {
    font-size: calc(24 * var(--sp-w));
    padding-bottom: 0;
  }
}

.blockPhoto {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.36%;
}

@media (max-width: 1023px) {
  .blockPhoto {
    padding-top: calc(12 * var(--sp-w));
    display: block;
  }
}

.countNumber {
  font-size: 18px;
  font-family: "Marcellus", serif;
  color: var(--cc-red-600);
  line-height: 1.5;
}

@media (max-width: 1023px) {
  .countNumber {
    font-size: calc(16 * var(--sp-w));
    order: 1;
    padding: calc(1 * var(--sp-w)) 0;
  }
}

.countNumber span {
  font-size: 24px;
  margin-left: 4px;
}

@media (max-width: 1023px) {
  .countNumber span {
    font-size: calc(20 * var(--sp-w));
    margin-left: calc(4 * var(--sp-w));
  }
}

@media (max-width: 1023px) {
  .ountNumber span {
    font-size: calc(20 * var(--sp-w));
  }
}

.blockPhoto h3 {
  font-family: var(--ff-zen);
  font-size: 18px;
  margin-top: 4px;
  margin-bottom: 8px;
  line-height: 1.3125;
}

@media (max-width: 1023px) {
  .blockPhoto h3 {
    font-size: calc(14 * var(--sp-w));
    margin-top: 0;
    margin-bottom: calc(12 * var(--sp-w));
  }
}

.blockVideo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.36%;
}

@media (max-width: 1023px) {
  .blockVideo {
    display: block;
  }
}

.blockVideo h3 {
  font-family: var(--ff-zen);
}

.blockPhoto h3 {
  line-height: normal;
}

.blockPhoto h3 span,
.blockVideo h3 span {
  font-size: 24px;
}
@media (min-width: 1024px) and (max-width: 1280px) {
  .blockPhoto h3 span {
    white-space: nowrap;
  }
  .rakurakuContainer .featureBlock.topBlock .specialSub__item__img {
    max-width: 264px;
  }
}
@media (max-width: 1023px) {

  .blockPhoto h3 span,
  .blockVideo h3 span {
    font-size: calc(18 * var(--sp-w));
    padding-top: calc(4 * var(--sp-w));
  }
}

.blockPhoto .blockPhoto__item {
  opacity: 0;
}

@media (max-width: 1023px) {
  .blockPhoto__item:nth-child(n+2) {
    padding-top: calc(24 * var(--sp-w));
  }
}

@media (max-width: 1023px) {
  .blockVideo .blockPhoto__item:nth-child(n+2) {
    padding-top: calc(8 * var(--sp-w));
  }
}

.featurePhoto {
  border-radius: 4px;
}

@media (max-width: 1023px) {
  .featurePhoto {
    border-radius: calc(6 * var(--sp-w));
  }
}

.stepBlock {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1224px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

@media (max-width: 1023px) {
  .stepBlock {
    padding-top: calc(12 * var(--sp-w));
  }
}

.houseTour__steps {
  display: flex;
  justify-content: space-between;
  gap: 5.51%;
}

@media (max-width: 1023px) {
  .houseTour__steps {
    display: block;
  }
}

.houseTour__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  opacity: 0;
}

.houseTour__stepTitle {
  margin-top: 8px;
  font-family: var(--ff-zen);
  font-size: 20px;
  margin-bottom: 4px;
}

@media (max-width: 1023px) {
  .houseTour__stepTitle {
    order: 2;
    font-size: calc(18 * var(--sp-w));
    margin-top: calc(4 * var(--sp-w));
    margin-bottom: calc(4 * var(--sp-w));
  }
}

@media (max-width: 1023px) {
  .houseTour__stepHeader {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--sp-w));
  }
}

.houseTour__stepText {
  font-family: var(--ff-noto-sans);
  font-size: 16px;
}

@media (max-width: 1023px) {
  .houseTour__stepText {
    order: 3;
    font-size: calc(14 * var(--sp-w));
  }
}

.houseTour__stepImage {
  margin-top: 8px;
}

@media (max-width: 1023px) {
  .houseTour__stepImage {
    order: 4;
    margin-top: calc(12 * var(--sp-w));
  }
}

.houseTour__step {
  position: relative;
}

.houseTour__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -29.65px;
  border-right: 1px solid var(--cc-gray-500);
  border-bottom: 1px solid var(--cc-gray-500);
  width: 14px;
  height: 14px;
  transform: translateY(-50%) rotate(-45deg);
}
.supplement {
  font-size: 14px;
  color: var(--cc-red-700);
  font-family: var(--ff-zen);
  padding-top: 16px;
}
@media (min-width: 1024px) and (max-width: 1280px) {
  .houseTour__step:not(:last-child)::after {
    right: -15%;
  }
}
@media (max-width: 1023px) {
  .supplement {
    font-size: calc(12 * var(--sp-w));
    padding-top: calc(12 * var(--sp-w));
    line-height: 1.2;
  }
}

.mainText {
  font-family: var(--ff-noto-sans);
  margin: 16px 0 8px 0;
}

@media (max-width: 1023px) {
  .mainText {
    font-size: calc(14 * var(--sp-w));
    margin: calc(16 * var(--sp-w)) 0 calc(8 * var(--sp-w)) 0;
  }
}

.asteriskContainer {
  display: flex;
  gap: 4px;
}

@media (max-width: 1023px) {
  .asteriskContainer {
    gap: calc(4 * var(--sp-w));
  }
}

.asterisk {
  font-family: var(--ff-noto-sans);
  font-size: 12px;
  color: var(--cc-gray-700);
}

@media (max-width: 1023px) {
  .asterisk {
    font-size: calc(12 * var(--sp-w));
    line-height: 1.3;
  }
}

.asteriskContainer+.asteriskContainer {
  margin-top: 4px;
}

@media (max-width: 1023px) {
  .asteriskContainer+.asteriskContainer {
    margin-top: 0;
  }
}

.rakuraku .js-open-reasonModal {
  display: flex;
  align-items: flex-start;
  gap: 1.96%;
  margin-top: 40px;
  margin-bottom: 64px;
}

@media (max-width: 1023px) {
  .rakuraku .js-open-reasonModal {
    display: block;
    margin-top: 0;
    margin-bottom: calc(40 * var(--sp-w));
  }
}

@media screen and (min-width: 1024px) {
  a.js-open-reasonModal .videoTitle {
    transition: 0.3s ease-in;
  }
}

@media screen and (min-width: 1024px) {
  a.js-open-reasonModal:hover .videoTitle {
    color: var(--cc-red-700);
  }
}

@media screen and (min-width: 1024px) {
  a.js-open-reasonModal .playButton {
    border-radius: 100%;
    transition: background-color 0.3s ease-in;
  }
}

@media screen and (min-width: 1024px) {
  a.js-open-reasonModal:hover .playButton {
    border-radius: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    border: solid 1 #fff;
  }
}

.specialSub__item__link {
  grid-row: 1/-1;
  grid-column: 1/-1;
  grid-template-rows: subgrid;
  grid-template-columns: subgrid;
  margin-bottom: 24px;
}

@media (max-width: 1023px) {
  .specialSub__item__link {
    display: flex;
    flex-direction: column;
    margin-bottom: calc(16 * var(--sp-w));
  }

  .specialSub__item__link:first-child {
    margin-bottom: calc(0 * var(--sp-w));
  }
}

.moviePadding {
  padding-bottom: 16px;
}

@media (max-width: 1023px) {
  .moviePadding {
    padding-bottom: calc(32 * var(--sp-w));
  }
}

@media (hover:hover) and (pointer:fine) {
  .specialSub__item__link:hover .specialSub__item__img::after {
    opacity: 1;
  }

  .specialSub__item__link:hover .specialSub__item__heading {
    color: var(--cc-red-700);
  }

  .specialSub__item__link:hover::before {
    background-color: var(--cc-red-700);
  }

  .specialSub__item__link:hover::after {
    transform: translateX(50%);
    clip-path: polygon(0% 0, 50% 0, 50% 100%, 0% 100%);
  }
}

@media (max-width: 1023px) {
  .specialSub__item__link .specialSub__item__heading {
    font-size: calc(14 * var(--sp-w));
    margin-top: calc(4 * var(--sp-w));
    line-height: 1.2;
  }
}

.movieContainer {
  position: relative;
}

@media (max-width: 1023px) {
  .movieContainer {
    display: block;
  }
}

.thumbnail {
  border-radius: 8px;
}

@media (max-width: 1023px) {
  .thumbnail {
    border-radius: calc(6 * var(--sp-w));
  }
}

.playButton {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 87.21px;
  transform: translate(-50%, -50%);
}

@media (max-width: 1023px) {
  .playButton {
    width: calc(59.71 * var(--sp-w));
  }
}

.playButton.mainVideo {
  width: 88px;
}

@media (max-width: 1023px) {
  .playButton.mainVideo {
    width: calc(64 * var(--sp-w));
  }
}

@media screen and (min-width: 1024px) {
  a.js-open-reasonModal .playButton {
    border-radius: 100%;
    transition: background-color 0.3s ease-in;
  }
}

@media screen and (min-width: 1024px) {
  a.js-open-reasonModal:hover .playButton {
    border-radius: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    border: solid 1 #fff;
  }
}

.specialSub__item__heading {
  grid-row: 3/4;
  grid-column: 1/3;
  font-family: var(--ff-zen);
  font-weight: 700;
  line-height: 1.6;
  transition-duration: .5s;
  transition-property: color;
}

@media (max-width: 1023px) {
  .specialSub__item__heading span {
    letter-spacing: calc(-0.5 * var(--sp-w));
  }
}

@media (hover:hover) and (pointer:fine) {
  .specialSub__item__link:hover .specialSub__item__img::after {
    opacity: 1;
  }

  .specialSub__item__link:hover .specialSub__item__heading {
    color: var(--cc-red-700);
  }
}

.swiper .js-text-anim01 {
  color: #FFFFFF;
}

.swiper-slide {
  display: block;
  overflow-y: auto;
}

.image {
  position: relative;
}

.image p {
  position: absolute;
  font-size: 24px;
  font-family: var(--ff-zen);
  color: #FFFFFF;
  margin: auto;
  top: 71.68%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 1023px) {
  .image p {
    font-size: calc(16 * var(--sp-w));
    top: 63.25%;
  }
}

.shaMaisonLogo {
  position: absolute;
  width: 69.9%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 1023px) {
  .shaMaisonLogo {
    top: 45.85%;
  }
}

.image img {
  border-radius: 8px;
}

@media (max-width: 1023px) {
  .image img {
    border-radius: calc(4 * var(--sp-w));
  }
}

.shaMaisonSeries {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-radius: 8px;
}

@media (max-width: 1023px) {
  .shaMaisonSeries {
    display: block;
    border-radius: 0%;
  }
}

.shaMaisonSelection {
  position: relative;
}

.shaMaisonSelectionImg {
  border-top-left-radius: 8px;
}

@media (max-width: 1023px) {
  .shaMaisonSelectionImg {
    border-top-left-radius: calc(6 * var(--sp-w));
    border-top-right-radius: calc(6 * var(--sp-w));
  }
}

.shaMaisonPremier {
  position: relative;
}

.shaMaisonPremierImg {
  border-top-right-radius: 8px;
}

@media (max-width: 1023px) {
  .shaMaisonPremierImg {
    border-top-right-radius: 0;
  }
}

.shaMaisonR {
  position: relative;
}

.shaMaisonRImg {
  border-bottom-left-radius: 8px;
}

@media (max-width: 1023px) {
  .shaMaisonRImg {
    border-bottom-left-radius: 0;
  }
}

.shaMaisonZEH {
  position: relative;
}

.shaMaisonZEHImg {
  border-bottom-right-radius: 8px;
}

@media (max-width: 1023px) {
  .shaMaisonZEHImg {
    border-bottom-left-radius: calc(6 * var(--sp-w));
    border-bottom-right-radius: calc(6 * var(--sp-w));
  }
}

.shaMaisonSelection .series__item__button {
  right: 53.125%;
  bottom: 52.5462962963%;
}

.shaMaisonPremier .series__item__button {
  bottom: 52.5462962963%;
}

.shaMaisonR .series__item__button {
  right: 53.125%;
}

.seriesText {
  position: absolute;
  display: inline;
  left: 5.59%;
  bottom: 4.19%;
  width: 76%;
}

@media (max-width: 1023px) {
  .seriesText {
    left: 0;
    top: 74.5%;
    bottom:0;
    margin-left: calc(16 * var(--sp-w));
  }
}

.seriesText p {
  font-size: 14px;
  color: var(--cc-gray-100);
  font-family: var(--ff-zen);
  margin-top: 4px;
  line-height: 1;
}

@media (max-width: 1023px) {
  .seriesText p {
    font-size: calc(12 * var(--sp-w));
    margin-top: calc(4 * var(--sp-w));
  }
}

.seriesText h3 {
  font-size: 20px;
  color: var(--cc-gray-100);
  font-family: var(--ff-zen);
}

@media (max-width: 1023px) {
  .seriesText h3 {
    font-size: calc(20 * var(--sp-w));
  }
}

.media .media__left {
  padding: 80px 0;
  padding-right: 40px;
}

@media (max-width: 1023px) {
  .media .media__left {
    padding: calc(40 * var(--sp-w)) 0;
    width: 87.2%;
    border-right: 0;
    margin: auto;
  }
}

.media .media__right {
  padding-top: 80px;
  padding-left: 40px;
}

@media (max-width: 1023px) {
  .media .media__right {
    padding: calc(40 * var(--sp-w)) 0;
    width: 100%;
    border-right: 0;
    margin: auto;
  }
}

@media (max-width: 1023px) {
  .media__right__adjustment {
    width: 87.2%;
    margin: auto;
  }
}

@media (max-width: 1023px) {
  .media__right::before {
    left: 6.4%;
  }
}

.mediaTitle {
  font-family: var(--ff-zen);
  font-weight: bold;
  color: var(--cc-black-sm);
  margin-bottom: 29px;
  font-size: 24px;
  line-height: 1.6;
}

@media (max-width: 1023px) {
  .mediaTitle {
    margin-bottom: calc(24 * var(--sp-w));
    font-size: calc(18 * var(--sp-w));
  }
}

.mediaTitle span {
  display: inline-block;
  font-size: 40px;
  line-height: 1.2;
  padding-top: 6px;
}

@media (max-width: 1023px) {
  .mediaTitle span {
    font-size: calc(24 * var(--sp-w));
    padding-top: 0;
  }
}

.series__item__logo.color1,
.series__item__logo.color2,
.series__item__logo.color3,
.series__item__logo.color4 {
  padding: 8px;
  height: auto;
  border-top-left-radius: 0;
}

@media (max-width: 1023px) {
  .series__item__logo.color1,
  .series__item__logo.color2,
  .series__item__logo.color3,
  .series__item__logo.color4 {
    padding: calc(8 * var(--sp-w));
  }
}

.series__item__logo.color1 {
  width: 53.15%;
  border-top-left-radius: 8px;
}

@media (max-width: 1023px) {
  .series__item__logo.color1 {
    width: 46.48%;
    border-top-left-radius: calc(6 * var(--sp-w));
  }
}

.series__item__logo.color2 {
  width: 49.73%;
}

@media (max-width: 1023px) {
  .series__item__logo.color2 {
    width: 43.43%;
  }
}

.series__item__logo.color3 {
  width: 37.56%;
}

@media (max-width: 1023px) {
  .series__item__logo.color3 {
    width: 32.85%;
  }
}

.series__item__logo.color4 {
  width: 44.22%;
}

@media (max-width: 1023px) {
  .series__item__logo.color4 {
    width: 38.67%;
  }
}

.series__item__logo.color1 img,
.series__item__logo.color2 img,
.series__item__logo.color3 img,
.series__item__logo.color4 img {
  height: auto;
}

.shaMaisonSeries a {
  display: flex;
}

.media__left__item a {
  position: relative;
}

.whatIsShaMaison img {
  border-radius: 8px;
}

@media (max-width: 1023px) {
  .whatIsShaMaison img {
    border-radius: calc(4 * var(--sp-w));
  }
}

.whatIsShaMaison::before,
.whatIsShaMaison::after,
.shaMaisonSeries a::before,
.shaMaisonSeries a::after {
  content: "";
  margin-block: auto;
  height: 48px;
  width: 68px;
  transition-duration: .5s;
  z-index: 2;
}

@media (max-width: 1023px) {

  .whatIsShaMaison::before,
  .whatIsShaMaison::after,
  .shaMaisonSeries a::before,
  .shaMaisonSeries a::after {
    height: calc(48 * var(--sp-w));
    width: calc(68 * var(--sp-w));
  }
}

.whatIsShaMaison::before,
.whatIsShaMaison::after {
  top: 82.4%;
  right: 2.42%;
}

@media (max-width: 1023px) {
  .whatIsShaMaison::before,
  .whatIsShaMaison::after {
    top: auto;
    bottom:calc(8 * var(--sp-w));
    right: calc(21.21 * var(--sp-w));
  }
}

.shaMaisonSeries a::before,
.shaMaisonSeries a::after {
  bottom:5.33%;
  right: 5.49%;
}

@media (max-width: 1023px) {

  .shaMaisonSeries a::before,
  .shaMaisonSeries a::after {
    top: auto;
    bottom:calc(10 * var(--sp-w));
    right: calc(13.21 * var(--sp-w));
  }
}

.whatIsShaMaison::before,
.shaMaisonSeries a::before {
  background-color: #282524;
  transition-property: background-color;
  border-radius: 4px;
  position: absolute;
  width: 34px;
  z-index: 1;
}

@media (max-width: 1023px) {

  .whatIsShaMaison::before,
  .shaMaisonSeries a::before {
    border-radius: calc(4 * var(--sp-w));
    width: calc(34 * var(--sp-w));
  }
}

.whatIsShaMaison::before {
  right: 1.6%;
}

@media (max-width: 1023px) {
  .whatIsShaMaison::before {
    right: calc(16 * var(--sp-w));
  }
}

.shaMaisonSeries a::before {
  right: 3.67%;
}

@media (max-width: 1023px) {
  .shaMaisonSeries a::before {
    right: calc(8 * var(--sp-w));
  }
}

.whatIsShaMaison::after,
.shaMaisonSeries a::after {
  display: block;
  margin-left: -100%;
  width: 48px;
  background-color: #fff;
  mask-image:
    url(/assets/img/icon_arrow_white.svg),
    url(/assets/img/icon_arrow_white.svg);
  mask-repeat: no-repeat;
  mask-position:
    calc(25% - 2px) center,
    calc(75% + 2px) center;
  mask-size: 8px;
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
  transition-property: transform, clip-path;
  position: absolute;
}

@media (max-width: 1023px) {

  .whatIsShaMaison::after,
  .shaMaisonSeries a::after {
    width: calc(48 * var(--sp-w));
    mask-size: calc(8 * var(--sp-w));
  }
}

@media (hover:hover) and (pointer:fine) {

  .whatIsShaMaison:hover .specialMain__item__img::after,
  .shaMaisonSeries a:hover .specialMain__item__img::after {
    opacity: 1;
  }

  .whatIsShaMaison:hover a:hover .specialMain__item__heading,
  .shaMaisonSeries a:hover .specialMain__item__heading {
    color: var(--cc-red-700);
  }

  .whatIsShaMaison:hover::after,
  .shaMaisonSeries a:hover::after {
    transform: translateX(50%);
    clip-path: polygon(0% 0, 50% 0, 50% 100%, 0% 100%);
  }
}

.series__item__button::before {
  display: block;
  margin-block: auto;
  margin-left: -100%;
  width: 200%;
  height: 100%;
  position: static;
  background: none;
  background-color: #fff;
  mask-image: url(/assets/img/icon_arrow_white.svg), url(/assets/img/icon_arrow_white.svg);
  mask-repeat: no-repeat;
  mask-position: calc(25% - 2px) center, calc(75% + 2px) center;
  mask-size: 8px;
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
  transition-property: transform, clip-path;
  transition-duration: .5s;
}

@media (hover:hover) and (pointer:fine) {
  .shaMaisonSeries a:hover .series__item__button::before {
    transform: translateX(50%);
    clip-path: polygon(0% 0, 50% 0, 50% 100%, 0% 100%);
  }
}

.videoContainer .js-open-reasonModal {
  display: flex;
  align-items: flex-start;
  gap: 1.96%;
  margin-top: 40px;
  margin-bottom: 64px;
}

@media (max-width: 1023px) {
  .videoContainer .js-open-reasonModal {
    display: block;
    margin-top: 0;
    margin-bottom: calc(40 * var(--sp-w));
  }
}

.reasonModal__inner {
  max-width: 1016px;
  margin: auto;
  padding: 144px 0;
}

@media (max-width: 1023px) {
  .reasonModal__inner {
    padding-top: calc(80 * var(--sp-w));
    padding-bottom: calc(16 * var(--sp-w));
    height: 100%;
  }
}

@media screen and (min-width: 1024px) {
  .reasonModal__right__text {
    width: 495px;
  }
}

@media screen and (min-width: 1024px) {
  a.js-open-reasonModal .videoTitle {
    transition: 0.3s ease-in;
  }
}

@media screen and (min-width: 1024px) {
  a.js-open-reasonModal:hover .videoTitle {
    color: var(--cc-red-700);
  }
}

@media screen and (min-width: 1024px) {
  a.js-open-reasonModal .playButton {
    border-radius: 100%;
    transition: background-color 0.3s ease-in;
  }
}

@media screen and (min-width: 1024px) {
  a.js-open-reasonModal:hover .playButton {
    border-radius: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    border: solid 1 #fff;
  }
}

@media (min-width: 1024px) {
  .reasonModal__MenuWrapper {
    max-width: 1016px;
    margin: auto;
    position: relative;
  }

  .reasonModal__MenuActions {
    right: 0;
    top: 48px;
    width: 116px;
  }

  .reasonModal__MenuBtn {
    width: 116px;
    height: 64px;
  }

  .reasonModal__MenuBtn::before {
    width: 116px;
  }

  .reasonModal__MenuBtn::after {
    height: 64px;
  }

  .reasonModal__MenuBtn .reasonModal__MenuBtnText {
    font-size: 18px;
    bottom: 16px;
  }

  .reasonModal__MenuBtn .reasonModal__MenuBtnIcon span {
    width: 50px;
    top: 14px;
  }
}

@media (min-width: 1440px) {
  .reasonModal__MenuActions {
    right: -147px;
  }
}

@media (max-width: 1023px) {
  .reasonModal__MenuActions {
    width: calc(72 * var(--sp-w));
    right: calc(16 * var(--sp-w));
    top: calc(16 * var(--sp-w));
  }

  .reasonModal__MenuActions img {
    width: calc(72 * var(--sp-w));
  }
}

.reasonModal__left {
  width: 100%;
}

@media (max-width: 1023px) {
  .movieModal .reasonModal__right__title p::before {
    width: calc(24 * var(--sp-w));
  }
}

.rt-player {
  width: 1016px;
  background-color: grey;
}

.movieModal {
  padding: 0;
  align-items: normal;
  border-radius: 0;
}

.movieModal__content {
  background-color: rgba(20, 20, 20, 0.8);
  backdrop-filter: blur(10px);
  width: 100%;
  overflow-y: scroll;
}

@media (min-width: 1024px) {
  .reasonModal .movieModal__content .swiper {
    height: auto;
  }
}

@media (max-width: 1023px) {
  .reasonModal .movieModal__content .swiper {
    min-height: calc(100vh - calc(32 * var(--sp-w)));
    margin-top: 0;
    margin-bottom: 0;
  }
}

@media (max-width: 1023px) {
  .movieModal .reasonModal__right__title p::before {
    width: calc(24 * var(--sp-w));
  }
}

@media (max-width: 1023px) {
  .houseTour__step:not(:last-child)::after {
    content: "";
    display: block;
    left: 50%;
    top: 94.06%;
    bottom: calc(-23 * var(--sp-w));
    transform: translateX(-50%) rotate(45deg);
    width: calc(8 * var(--sp-w));
    height: calc(8 * var(--sp-w));
    border-right: calc(1 * var(--sp-w)) solid var(--cc-gray-500);
    border-bottom: calc(1 * var(--sp-w)) solid var(--cc-gray-500);
  }

  .houseTour__step:not(:last-child) {
    padding-bottom: calc(33.5 * var(--sp-w));
  }
}
.summaryPhoto.is-show {
  opacity: 1;
  transform: translateY(0);
}

.blockPhoto.is-show .blockPhoto__item {
  animation: opacity 0.18s ease-in forwards;
}

.blockPhoto.is-show .blockPhoto__item:nth-child(1) {
  animation-delay: 0.5s;
}

.blockPhoto.is-show .blockPhoto__item:nth-child(2) {
  animation-delay: 0.6s;
}

.blockPhoto.is-show .blockPhoto__item:nth-child(3) {
  animation-delay: 0.7s;
}

.houseTour__steps.is-show .houseTour__step {
  animation: opacity 0.18s ease-in forwards;
}

.houseTour__steps.is-show .houseTour__step:nth-child(1) {
  animation-delay: 0.5s;
}

.houseTour__steps.is-show .houseTour__step:nth-child(2) {
  animation-delay: 0.6s;
}

.houseTour__steps.is-show .houseTour__step:nth-child(3) {
  animation-delay: 0.7s;
}

.houseTour__steps.is-show .houseTour__step:nth-child(4) {
  animation-delay: 0.8s;
}

@media (max-width: 1023px) {
  .swiper {
    margin: calc(16 * var(--sp-w));
  }
}

.rakurakuMenu {
  display: none;
}

@media (max-width: 1023px) {
  .rakurakuMenu {
    position: fixed;
    bottom: 21.2vw;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 11;
    background: #fff;
    display: block;
  }
}

@media screen and (max-width: 1023px) {
  .spMenu__rakuraku {
    padding: 3.2vw 4.2666666667vw;
  }
}

@media screen and (max-width: 1023px) {
  .spMenu__rakuraku a p {
    font-size: 3.2vw;
    line-height: 1.6;
    color: #fff;
    font-family: var(--ff-noto-sans);
  }
}

@media screen and (max-width: 1023px) {
  .spMenu__rakuraku a {
    display: flex;
    justify-content: center;
    padding: calc(10 * var(--sp-w)) 0;
    background: #880000;
    border-radius: 1.6vw;
    align-items: center;
  }
}

@media screen and (max-width: 1023px) {
  .shaMaisonSeries picture{
    width: calc(327 * var(--sp-w));
  }
}
@media screen and (min-width: 1024px) {
  .area:not(:has(.contents__wrap)) .Fix.rakurakuSideButton{
    display: block;
    height: auto;
    width: auto;
  }
}