@charset "UTF-8";
/*main color*/
/*accent*/
/*mono*/
/*navfoot*/
/*addcolor*/
/*font-family*/
/*font-weight notosans*/
/*media query break point*/
/*sp*/
/*tablet*/
/*se*/
/*追加*/
/*topConcept*/
/*brandHaco*/
/*brandHaco*/
/*grid settings*/
/* media query */
body {
  overflow-x: hidden;
}

#multiskipfloor main {
  padding-top: 60px;
}
@media only screen and (max-width: 768px) {
  #multiskipfloor main {
    padding-top: 0;
  }
}
#multiskipfloor .u-container {
  max-width: 1200px;
}

.p-cont-bg {
  background-color: #fff;
}

.p-mv {
  position: relative;
}
.p-mv__slider {
  width: 100%;
  aspect-ratio: 683/281;
  position: relative;
}
@media only screen and (max-width: 1080px) {
  .p-mv__slider {
    aspect-ratio: 1.7/1;
  }
}
@media only screen and (max-width: 768px) {
  .p-mv__slider {
    aspect-ratio: 320/312;
  }
}
.p-mv__slider::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}
.p-mv__slide {
  width: inherit;
  position: absolute;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.p-mv__img {
  height: 100%;
  opacity: 0;
  width: inherit;
  aspect-ratio: 683/201;
  transform: scale(1); /* ズームリセット */
  width: 100%;
}
@media only screen and (max-width: 1080px) {
  .p-mv__img {
    aspect-ratio: 1.7/1;
  }
}
@media only screen and (max-width: 768px) {
  .p-mv__img {
    aspect-ratio: 1/1;
  }
}
.p-mv__img picture {
  width: inherit;
  height: inherit;
}
.p-mv__img img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  width: inherit;
  height: auto;
  height: 100%;
}
@media only screen and (max-width: 1080px) {
  .p-mv__img img {
    height: 100%;
  }
}
.p-mv__cap {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  font-size: 10px;
  font-size: 1rem;
}
@media (max-width: 768px) {
  .p-mv__cap {
    font-size: 10px;
  }
}
@media (max-width: 768px) {
  .p-mv__cap {
    font-size: 1rem;
  }
}
.p-mv__main {
  position: absolute;
  bottom: 4rem;
  left: calc((100% - 1200px) / 2);
  color: #fff;
}
@media only screen and (max-width: 1320px) {
  .p-mv__main {
    left: 5%;
  }
}
.p-mv__ttl {
  font-size: 60px;
  font-size: 6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: flex-start;
  line-height: 1;
}
@media (max-width: 768px) {
  .p-mv__ttl {
    font-size: 40px;
  }
}
@media (max-width: 768px) {
  .p-mv__ttl {
    font-size: 4rem;
  }
}
@media only screen and (max-width: 768px) {
  .p-mv__ttl {
    font-size: min(10vw, 4rem);
  }
}
.p-mv__letters {
  margin-left: -2.5rem;
  display: flex;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 0, 0, 0.3);
}
.p-mv__letters span {
  display: block;
}
.p-mv__txt {
  font-family: "noto-sans-cjk-jp", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 20px;
  font-size: 2rem;
  font-weight: 500;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
  .p-mv__txt {
    font-size: 16px;
  }
}
@media (max-width: 768px) {
  .p-mv__txt {
    font-size: 1.6rem;
  }
}
.p-mv__scrolltxt {
  writing-mode: vertical-lr;
  padding-bottom: 3rem;
  padding-left: 3rem;
  color: #fff;
}
@media only screen and (max-width: 768px) {
  .p-mv__scrolltxt {
    padding-left: 2rem;
  }
}
.p-mv__scroll {
  position: absolute;
  right: calc((100% - 1200px) / 2);
  bottom: 4rem;
}
@media only screen and (max-width: 1320px) {
  .p-mv__scroll {
    right: 5%;
  }
}
@media only screen and (max-width: 768px) {
  .p-mv__scroll {
    bottom: 2rem;
  }
}

.obj-scrolldown {
  width: 1px;
  height: 80px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  overflow: hidden;
}
.obj-scrolldown-line {
  width: 100%;
  height: 100%;
  display: block;
  background: linear-gradient(to bottom, rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0) 50%);
  background-position: 0 -80px;
  background-size: 100% 200%;
  animation: scrolldown 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
}
@keyframes scrolldown {
  0% {
    background-position: 0 -80px;
  }
  75% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 80px;
  }
}

.p-cont__bglogo {
  position: absolute;
  left: -3rem;
  top: -5rem;
}
.p-cont__txt {
  position: relative;
  font-size: 20px;
  font-size: 2rem;
  font-weight: 500;
  line-height: 2;
}
@media (max-width: 768px) {
  .p-cont__txt {
    font-size: 17px;
  }
}
@media (max-width: 768px) {
  .p-cont__txt {
    font-size: 1.7rem;
  }
}
.p-cont__img {
  width: 100%;
  height: 100%;
}
.p-cont__img img {
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
  height: 100%;
}
.p-cont__subill {
  width: 16.8rem;
  height: 16.8rem;
  background-color: #fff;
  border: 5px solid #675750;
  border-radius: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: -3rem;
  right: -5.5rem;
}
@media only screen and (max-width: 768px) {
  .p-cont__subill {
    bottom: -9rem;
    right: -1rem;
    width: 43vw;
    height: 43vw;
    max-width: 16rem;
    max-height: 16rem;
  }
}
.p-cont__illcap {
  font-size: 10px;
  font-size: 1rem;
  text-align: center;
  position: absolute;
  bottom: -3rem;
}
@media (max-width: 768px) {
  .p-cont__illcap {
    font-size: 10px;
  }
}
@media (max-width: 768px) {
  .p-cont__illcap {
    font-size: 1rem;
  }
}
.p-cont__ttl {
  font-size: 34px;
  font-size: 3.4rem;
  font-weight: 700;
  color: #675750;
  line-height: 1.4;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
@media (max-width: 768px) {
  .p-cont__ttl {
    font-size: 24px;
  }
}
@media (max-width: 768px) {
  .p-cont__ttl {
    font-size: 2.4rem;
  }
}
.p-cont__ttl span {
  color: #E5CB82;
}
.mod--doma .p-cont__ttl span {
  color: #94BEE6;
}
.p-cont__mainttl {
  position: relative;
  line-height: 1;
}
.p-cont__ttlicon {
  position: absolute;
  left: -4.7rem;
  top: -6rem;
  width: 16rem;
  height: 15rem;
}
.p-cont__ttlicon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.p-cont__letters {
  font-size: 50px;
  font-size: 5rem;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  position: relative;
  color: #675750;
}
@media (max-width: 768px) {
  .p-cont__letters {
    font-size: 40px;
  }
}
@media (max-width: 768px) {
  .p-cont__letters {
    font-size: 4rem;
  }
}
.p-cont__subttl {
  font-size: 18px;
  font-size: 1.8rem;
  position: relative;
  font-weight: 700;
  color: #675750;
}
@media (max-width: 768px) {
  .p-cont__subttl {
    font-size: 16px;
  }
}
@media (max-width: 768px) {
  .p-cont__subttl {
    font-size: 1.6rem;
  }
}
.p-cont__mtxt {
  margin-top: 4rem;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 500;
}
@media (max-width: 768px) {
  .p-cont__mtxt {
    font-size: 16px;
  }
}
@media (max-width: 768px) {
  .p-cont__mtxt {
    font-size: 1.6rem;
  }
}
@media only screen and (max-width: 768px) {
  .p-cont__mtxt {
    margin-top: 2rem;
  }
}
.p-cont__mtxt sup {
  font-size: 10px;
  font-size: 1rem;
  vertical-align: super;
}
@media (max-width: 768px) {
  .p-cont__mtxt sup {
    font-size: 10px;
  }
}
@media (max-width: 768px) {
  .p-cont__mtxt sup {
    font-size: 1rem;
  }
}
.p-cont__subtxt {
  font-size: 16px;
  font-size: 1.6rem;
  text-align: center;
  margin: 1rem auto 3rem;
}
@media (max-width: 768px) {
  .p-cont__subtxt {
    font-size: 14px;
  }
}
@media (max-width: 768px) {
  .p-cont__subtxt {
    font-size: 1.4rem;
  }
}
.p-cont__sup {
  font-size: 12px;
  font-size: 1.2rem;
}
@media (max-width: 768px) {
  .p-cont__sup {
    font-size: 11px;
  }
}
@media (max-width: 768px) {
  .p-cont__sup {
    font-size: 1.1rem;
  }
}

.p-intro {
  margin-bottom: 13rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  grid-template-columns: calc(50% - 5rem) 1fr;
  gap: 5rem;
}
@media only screen and (max-width: 768px) {
  .p-intro {
    grid-template-columns: 1fr;
    gap: 12rem;
    margin-bottom: 6rem;
  }
}
.p-intro-wrap {
  padding: 12rem 0 10rem;
}
@media only screen and (max-width: 768px) {
  .p-intro-wrap {
    padding: 6rem 0;
  }
}
.p-intro__left, .p-intro__right {
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-intro__left {
    order: 2;
  }
}

.p-plist {
  margin: 5rem auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 1.2rem;
}
@media only screen and (max-width: 768px) {
  .p-plist {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}
.p-plist__li {
  height: 100%;
}
.p-plist__ttl {
  font-size: 20px;
  font-size: 2rem;
  font-weight: 500;
  color: #675750;
  text-align: center;
}
@media (max-width: 768px) {
  .p-plist__ttl {
    font-size: 17px;
  }
}
@media (max-width: 768px) {
  .p-plist__ttl {
    font-size: 1.7rem;
  }
}
.p-plist__txt {
  font-size: 16px;
  font-size: 1.6rem;
  margin-top: 2rem;
}
@media (max-width: 768px) {
  .p-plist__txt {
    font-size: 14px;
  }
}
@media (max-width: 768px) {
  .p-plist__txt {
    font-size: 1.4rem;
  }
}
.p-plist__box {
  position: relative;
  background-color: #F9F4E5;
  padding: 4.5rem 3rem 7rem;
  height: calc(100% - 7.5rem);
}
.p-plist__icon {
  position: absolute;
  top: -1.8rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  font-size: 1.6rem;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-weight: 500;
  background-color: #675750;
  color: #fff;
  border-radius: 1000px;
  padding: 0.6rem 3rem;
  line-height: 1;
}
@media (max-width: 768px) {
  .p-plist__icon {
    font-size: 14px;
  }
}
@media (max-width: 768px) {
  .p-plist__icon {
    font-size: 1.4rem;
  }
}
.p-plist__icon em {
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: 700;
  margin-left: 0.2rem;
}
@media (max-width: 768px) {
  .p-plist__icon em {
    font-size: 20px;
  }
}
@media (max-width: 768px) {
  .p-plist__icon em {
    font-size: 2rem;
  }
}
.p-plist__img {
  margin-top: -5.5rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.p-type {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  margin-bottom: 10rem;
}
@media only screen and (max-width: 768px) {
  .p-type {
    grid-template-columns: 1fr;
    margin-bottom: 7rem;
    gap: 3rem;
  }
}
.p-type-wrap {
  padding: 10rem 0;
}
@media only screen and (max-width: 768px) {
  .p-type-wrap {
    padding: 6rem 0;
  }
}
.p-type--floor {
  max-width: 1000px !important;
}
.p-type--floor .p-type__img {
  margin-right: 10rem;
}
@media only screen and (max-width: 768px) {
  .p-type--floor .p-type__img {
    margin-right: unset;
  }
}
.p-type--doma .p-type__img {
  margin-left: 10rem;
}
@media only screen and (max-width: 768px) {
  .p-type--doma .p-type__img {
    margin-left: unset;
  }
}
@media only screen and (max-width: 768px) {
  .p-type__img {
    width: 100%;
  }
}
.p-type--doma .p-type__inf {
  padding-left: calc((100vw - 1000px) / 2);
}
@media only screen and (max-width: 1080px) {
  .p-type--doma .p-type__inf {
    padding-left: 5%;
    order: 2;
  }
}

.p-ill {
  margin-top: 5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  grid-template-columns: 30% 1fr;
  gap: 3.8rem;
}
@media only screen and (max-width: 768px) {
  .p-ill {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 3rem;
  }
}
.p-ill__skip {
  position: relative;
}
.p-ill__housettl {
  position: absolute;
  z-index: 2;
  font-size: 20px;
  font-size: 2rem;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-weight: 700;
  border: 2px solid #675750;
  padding: 0.6rem 1rem;
  width: -moz-fit-content;
  width: fit-content;
  line-height: 1;
}
@media (max-width: 768px) {
  .p-ill__housettl {
    font-size: 17px;
  }
}
@media (max-width: 768px) {
  .p-ill__housettl {
    font-size: 1.7rem;
  }
}
.p-ill__housettl.mod--ly {
  background-color: #F9F4E5;
}
.p-ill__housettl.mod--dy {
  background-color: #DBD4BF;
}
.p-ill__housettl.mod--lb {
  background-color: #EAF2F6;
}
.p-ill__housettl.mod--db {
  background-color: #C5D4DB;
}

.p-skip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
}
@media only screen and (max-width: 768px) {
  .p-skip {
    display: flex;
    flex-direction: column;
  }
}
.p-skip__inf {
  position: relative;
}
.p-skip__img {
  aspect-ratio: 800/544;
  width: 100%;
  height: 100%;
}
.p-skip__img picture {
  width: 100%;
  height: 100%;
}
.p-skip__img img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 768px) {
  .p-ill__skip .p-skip__img {
    order: 2;
  }
}
.p-skip__txtbg {
  aspect-ratio: 800/544;
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 768px) {
  .p-skip__txtbg {
    aspect-ratio: 800/540;
  }
}
.p-skip__txtbg picture {
  width: 100%;
  height: 100%;
}
.p-skip__txtbg img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
.p-skip__txtwrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  padding: 1.5rem;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 5px;
}
.p-skip__ttl {
  font-size: 20px;
  font-size: 2rem;
  font-weight: 500;
}
@media (max-width: 768px) {
  .p-skip__ttl {
    font-size: 17px;
  }
}
@media (max-width: 768px) {
  .p-skip__ttl {
    font-size: 1.7rem;
  }
}
.p-skip__txt {
  font-size: 14px;
  font-size: 1.4rem;
}
@media (max-width: 768px) {
  .p-skip__txt {
    font-size: 12px;
  }
}
@media (max-width: 768px) {
  .p-skip__txt {
    font-size: 1.2rem;
  }
}

.p-gal-wrap {
  padding: 10rem 0;
}
@media only screen and (max-width: 768px) {
  .p-gal-wrap {
    padding: 6rem 0;
  }
}

.p-home {
  padding: 10rem 0 0;
}
@media only screen and (max-width: 768px) {
  .p-home {
    padding: 6rem 0;
  }
}

#flooringSkip.slider,
#flooringDen.slider,
#domaSkip.slider,
#domaDen.slider {
  padding: 0;
  overflow: initial;
}
#flooringSkip .slider-wrapper,
#flooringDen .slider-wrapper,
#domaSkip .slider-wrapper,
#domaDen .slider-wrapper {
  overflow: hidden;
}
#flooringSkip .slides,
#flooringDen .slides,
#domaSkip .slides,
#domaDen .slides {
  left: -100%;
}
#flooringSkip .inner,
#flooringDen .inner,
#domaSkip .inner,
#domaDen .inner {
  width: 100%;
}
#flooringSkip .control,
#flooringDen .control,
#domaSkip .control,
#domaDen .control {
  width: 2.5rem;
  background: transparent;
  box-shadow: unset;
}
#flooringSkip .slider-prev,
#flooringDen .slider-prev,
#domaSkip .slider-prev,
#domaDen .slider-prev {
  left: -2.5rem;
  background-image: url("../../../../assets/img/lp/multiskipfloor/icon-arw.png");
  background-position: right;
}
@media only screen and (max-width: 768px) {
  #flooringSkip .slider-prev,
  #flooringDen .slider-prev,
  #domaSkip .slider-prev,
  #domaDen .slider-prev {
    left: -0.7rem;
  }
}
#flooringSkip .slider-next,
#flooringDen .slider-next,
#domaSkip .slider-next,
#domaDen .slider-next {
  right: -2.5rem;
  background-image: url("../../../../assets/img/lp/multiskipfloor/icon-arw-n.png");
}
@media only screen and (max-width: 768px) {
  #flooringSkip .slider-next,
  #flooringDen .slider-next,
  #domaSkip .slider-next,
  #domaDen .slider-next {
    right: -0.7rem;
  }
}
#flooringSkip .slider-control,
#flooringDen .slider-control,
#domaSkip .slider-control,
#domaDen .slider-control {
  display: none;
}
#flooringSkip .slider-dotcont,
#flooringDen .slider-dotcont,
#domaSkip .slider-dotcont,
#domaDen .slider-dotcont {
  position: absolute;
  bottom: 0;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
}
#flooringSkip .slider-dots,
#flooringDen .slider-dots,
#domaSkip .slider-dots,
#domaDen .slider-dots {
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #675750;
  border-radius: 1000px;
  padding-inline: 1rem;
}
#flooringSkip .slider-dots span,
#flooringDen .slider-dots span,
#domaSkip .slider-dots span,
#domaDen .slider-dots span {
  width: 0.5rem;
  height: 0.5rem;
}

#sliderGal.slider {
  padding: 0 3vw;
  background-color: #F7F4F1;
}
@media only screen and (max-width: 768px) {
  #sliderGal.slider {
    padding: 0;
  }
}
#sliderGal .slider-wrapper {
  pointer-events: none;
}
#sliderGal .inner {
  width: 98%;
}
@media only screen and (max-width: 768px) {
  #sliderGal .inner {
    width: 100%;
  }
}
#sliderGal .slides {
  left: -33.3333333333%;
}
@media only screen and (max-width: 768px) {
  #sliderGal .slides {
    left: -100%;
  }
}
#sliderGal .slider-dotcont {
  display: none;
}
#sliderGal .slides.shifting {
  transition: left 7s linear;
}

#msfSlider {
  margin-top: 4rem;
}
#msfSlider .inner {
  width: 95%;
}
@media only screen and (max-width: 768px) {
  #msfSlider .slides {
    left: -100%;
  }
}

.obj-mrg-t5 {
  margin-top: 5rem;
}
@media only screen and (max-width: 768px) {
  .obj-mrg-t5 {
    margin-top: 2rem;
  }
}
.obj-mrg-t7 {
  margin-top: 7rem;
}
@media only screen and (max-width: 768px) {
  .obj-mrg-t7 {
    margin-top: 3.5rem;
  }
}
.obj-mrg-t10 {
  margin-top: 10rem;
}
@media only screen and (max-width: 768px) {
  .obj-mrg-t10 {
    margin-top: 5rem;
  }
}
.obj-mrg-t12 {
  margin-top: 12rem;
}
@media only screen and (max-width: 768px) {
  .obj-mrg-t12 {
    margin-top: 6rem;
  }
}
.obj-mrg-b6 {
  margin-bottom: 6rem;
}
@media only screen and (max-width: 768px) {
  .obj-mrg-b6 {
    margin-bottom: 3rem;
  }
}

.obj-hex {
  display: inline-block;
  height: 2rem;
  aspect-ratio: 0.8660254038;
  -webkit-clip-path: polygon(-50% 50%, 50% 100%, 150% 50%, 50% 0);
          clip-path: polygon(-50% 50%, 50% 100%, 150% 50%, 50% 0);
  background-color: currentColor;
}

.obj-bg-w {
  background-color: #fff;
}

.obj-bg-y {
  background-color: #F9F4E5;
  background: linear-gradient(to top, #DBD4BF 0%, #F9F4E5 50%, #F9F4E5 100%);
}

.obj-bg-b {
  background-color: #F9F4E5;
  background: linear-gradient(to top, #C5D4DB 0%, #EAF2F6 50%, #EAF2F6 100%);
}

.obj-fw-b {
  font-weight: 700;
}

.obj-fw-l {
  font-weight: 300;
}/*# sourceMappingURL=multiskipfloor.css.map */