@charset "UTF-8";
html, body, main, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, textarea, input {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
main {
  display: block;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
  -ms-interpolation-mode: bicubic;
}
img.cover {
  object-fit: cover;
  object-position: center;
  font-family: "object-fit: cover; object-position: center;";
}
html {
  width: 100%;
  font-size: 50.5%;
  color: #000;
}
@media (max-width: 360px) {
  html {
    font-size: 57.5%;
  }
}
body {
  font-size: 1.6rem;
  font-family: "Helvetica Neue", Arial, sans-serif;
  width: 100%;
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  overflow-y: auto;
  letter-spacing: 0em;
  color: #4E4E4E;
}
@media (max-width: 767px) {
  body {
    font-size: 1.4rem;
  }
}
body.scrollhide {
  overflow-y: hidden;
}
h2, h3, h4, h5, h6 {
  font-weight: 700;
}
a {
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
}
table {
  border-collapse: collapse;
  width: 100%;
}
*:focus {
  outline: none;
}
@media (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}
ul {
  list-style: none;
}
li {
  margin: 0;
  padding: 0;
}
hr {
  border: none;
  margin-top: 0;
}
.pc {
  display: block;
}
.pc--inline {
  display: inline;
}
@media (max-width: 767px) {
  .pc--inline {
    display: none;
  }
}
@media (max-width: 767px) {
  .pc {
    display: none;
  }
}
.sp {
  display: none;
}
@media (max-width: 767px) {
  .sp {
    display: block;
  }
}
.align-left {
  text-align: left;
}
.align-right {
  text-align: right;
}
.align-center {
  text-align: center;
}
p {
  margin: 15px 0 15px;
}
@media (max-width: 767px) {
  p {
    margin: 8px 0 8px;
  }
}
a {
  color: #000;
}
.pic {
  width: 100%;
  height: auto;
}
.bg--gray {
  background: #fcfcfc;
}
h1, h2, h3, h4, h5 {
  letter-spacing: 0em;
}
h2 {
  font-size: 2.4rem;
}
h3 {
  font-size: 2rem;
}
h4 {
  font-size: 1.8rem;
}
@media (max-width: 767px) {
  .fs--sp-s {
    font-size: 0.8em;
  }
}
button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}
html {
  font-size: 60%;
}
@media print {
  html {
    font-size: 52%;
  }
}
body.page-single, body.page, body.how-to-use {
  overflow-y: auto !important;
  background: #FFF;
}
@media print {
  body.page-single, body.page, body.how-to-use {
    overflow-y: visible !important;
    overflow-x: visible !important;
  }
}
body.page-single.iframe::-webkit-scrollbar, body.page.iframe::-webkit-scrollbar, body.how-to-use.iframe::-webkit-scrollbar {
  width: 8px;
  background-color: rgba(0, 0, 0, 0.25);
}
body.page-single.iframe::-webkit-scrollbar-thumb, body.page.iframe::-webkit-scrollbar-thumb, body.how-to-use.iframe::-webkit-scrollbar-thumb {
  background-color: #538FCB;
}
@media print {
  html {
    font-size: 57.5% !important;
  }
}
.single-wrap {
  border-top: #538FCB 5px solid;
}
.single-wrap .breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.single-wrap .breadcrumb li {
  font-size: 1.8rem;
  font-weight: 700;
}
.single-wrap .breadcrumb li:not(:last-child) {
  margin-right: 15px;
}
.single-wrap .breadcrumb li:not(:last-child)::after {
  content: "";
  display: inline-block;
  background-image: url('data:image/svg+xml;utf8,<svg width="10" height="19" viewBox="0 0 10 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.48535 18L1.00007 9.51472L9.48535 1.02944" stroke="%23538FCB" stroke-width="2.5"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 14px;
  height: 14px;
  transform: scaleX(-1);
  margin-left: 15px;
}
.single-wrap .breadcrumb li:last-child {
  color: #538FCB;
}
.single-wrap .single {
  max-width: 1000px;
  padding: 40px;
  margin: auto;
}
@media print {
  .single-wrap .single {
    max-width: 826px;
    padding: 20px 0px;
  }
}
.single-wrap .single__heading {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
}
.single-wrap .single__heading > * {
  width: 100%;
}
.single-wrap .single__heading .single-header {
  display: grid;
  grid-template-columns: 1fr 178px;
  grid-template-rows: auto;
  margin: 20px 0 40px;
}
@media print {
  .single-wrap .single__heading .single-header {
    margin: 10px 0 20px;
  }
}
.single-wrap .single__heading .single-header header {
  display: flex;
  align-items: center;
}
.single-wrap .single__heading .single-header header h1 {
  font-size: 3.8rem;
  font-weight: 700;
  line-height: 1;
}
.single-wrap .single__heading .single-header div {
  display: flex;
  align-items: center;
  justify-content: center;
}
.single-wrap .single__contents .single-description p {
  margin: -10px 0 0 0;
  text-align: left;
}
.single-wrap .single__contents .con .concept-swiper {
  padding-bottom: 60px;
}
@media print {
  .single-wrap .single__contents .con .concept-swiper {
    padding-bottom: 20px;
  }
}
.single-wrap .single__contents .heading {
  border-top: #538FCB 2px solid;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}
@media print {
  .single-wrap .single__contents .heading {
    padding: 10px 0;
  }
}
.single-wrap .single__contents .heading h2 {
  font-size: 2rem;
  font-weight: 700;
}
@media print {
  .single-wrap .single__contents .heading h2 {
    font-size: 1.8rem;
  }
}
.single-wrap .single__contents .con-swiper {
  position: relative;
  overflow: hidden;
}
.single-wrap .single__contents .con-swiper .single-swiper-button {
  background: rgba(255, 255, 255, 0.75);
  width: 34px;
  height: 68px;
  position: absolute;
  top: 280px;
  transform: translateY(-50%);
  z-index: 10;
  opacity: 0;
}
@media print {
  .single-wrap .single__contents .con-swiper .single-swiper-button {
    display: none;
  }
}
.single-wrap .single__contents .con-swiper .single-swiper-button.active {
  opacity: 1;
}
.single-wrap .single__contents .con-swiper .single-swiper-button.active.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}
.single-wrap .single__contents .con-swiper .single-swiper-button:hover {
  background: white;
}
.single-wrap .single__contents .con-swiper .single-swiper-button::before {
  vertical-align: middle;
  content: "";
  display: inline-block;
  background-image: url('data:image/svg+xml;utf8,<svg width="10" height="19" viewBox="0 0 10 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.48535 18L1.00007 9.51472L9.48535 1.02944" stroke="%23538FCB" stroke-width="2.5"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%) rotate(0deg);
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.single-wrap .single__contents .con-swiper .single-swiper-button--next {
  right: 0;
}
.single-wrap .single__contents .con-swiper .single-swiper-button--next::before {
  transform: translate(-50%, -50%) scaleX(-1);
}
.single-wrap .single__contents .con-swiper .single-swiper-button--prev {
  left: 0;
}
.single-wrap .single__contents .con-swiper .swiper-pagination {
  width: fit-content;
  height: 16px;
  position: absolute;
  padding: 4px 8px;
  border-radius: 20px;
  left: 50%;
  top: 580px;
  transform: translateX(-50%);
  z-index: 20;
  background: rgba(238, 238, 238, 0.5);
  display: flex;
  align-items: center;
}
@media print {
  .single-wrap .single__contents .con-swiper .swiper-pagination {
    display: none;
  }
}
.single-wrap .single__contents .con-swiper .swiper-pagination span {
  background: #538FCB;
}
.single-wrap .single__contents .con-swiper .swiper-pagination span.swiper-pagination-bullet-active {
  background: #538FCB;
}
.single-wrap .single__contents .con-swiper .swiper-slide.swiper-slide-active figcaption {
  opacity: 1;
}
.single-wrap .single__contents .con-swiper .swiper-slide figure img.fit {
  margin: 0 0 56px 0;
}
@media screen {
  .single-wrap .single__contents .con-swiper .swiper-slide figure img.fit {
    width: 100%;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 1.6842105263;
  }
  .single-wrap .single__contents .con-swiper .swiper-slide figure img.fit.fit-content {
    object-fit: contain;
  }
}
@media print {
  .single-wrap .single__contents .con-swiper .swiper-slide figure img.fit {
    aspect-ratio: 1.6842105263;
    width: 79%;
    object-fit: cover;
    object-position: center;
    margin: 0 0 15px 0;
  }
  .single-wrap .single__contents .con-swiper .swiper-slide figure img.fit.fit-content {
    object-fit: contain;
  }
}
.single-wrap .single__contents .con-swiper .swiper-slide figure figcaption {
  opacity: 0;
  will-change: transform;
  font-size: 1.6rem;
  font-weight: 500;
  word-wrap: break-word;
}
.single-wrap .single__contents .con-swiper .swiper-slide figure figcaption h3 {
  color: #538FCB;
  display: block;
}
.single-wrap .single__contents .con-swiper .swiper-slide figure figcaption p {
  margin-top: 0;
}
.single-wrap .single__contents .con-swiper .swiper-slide figure figcaption a {
  color: #538FCB;
}
.single-wrap .single__contents .con-swiper .swiper-slide figure figcaption .col-2 {
  display: grid;
  grid-template-columns: 340px 1fr;
  grid-template-rows: 1fr;
  gap: 40px;
}
.single-wrap .single__contents--products .con--products, .single-wrap .single__contents--plan .con--products {
  padding-bottom: 80px;
}
@media print {
  .single-wrap .single__contents--products .con--products, .single-wrap .single__contents--plan .con--products {
    padding-bottom: 40px;
  }
}
.single-wrap .single__contents--products .con--products > ul, .single-wrap .single__contents--plan .con--products > ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 30px;
}
@media print {
  .single-wrap .single__contents--products .con--products > ul, .single-wrap .single__contents--plan .con--products > ul {
    grid-template-columns: 227px 227px 227px;
    grid-template-rows: 1fr;
    gap: 20px;
  }
}
.single-wrap .single__contents--products .con--products > ul a, .single-wrap .single__contents--plan .con--products > ul a {
  display: block;
}
.single-wrap .single__contents--products .con--products > ul a:hover img, .single-wrap .single__contents--plan .con--products > ul a:hover img {
  opacity: 0.5;
}
.single-wrap .single__contents--products .con--products > ul > li .img, .single-wrap .single__contents--plan .con--products > ul > li .img {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.single-wrap .single__contents--products .con--products > ul > li .img img, .single-wrap .single__contents--plan .con--products > ul > li .img img {
  height: 176px;
  width: 100%;
  object-fit: cover;
}
@media print {
  .single-wrap .single__contents--products .con--products > ul > li .img img, .single-wrap .single__contents--plan .con--products > ul > li .img img {
    height: 138px;
  }
}
.single-wrap .single__contents--products .con--products > ul > li figcaption strong, .single-wrap .single__contents--plan .con--products > ul > li figcaption strong {
  display: block;
  line-height: 1.4;
  color: #538FCB;
  font-size: 1.6rem;
  font-weight: 700;
  margin: 10px 0 5px;
}
.single-wrap .single__contents--products .con--products > ul > li figcaption > ul li:first-child, .single-wrap .single__contents--plan .con--products > ul > li figcaption > ul li:first-child {
  width: 100%;
  font-weight: 700;
}
.single-wrap .single__contents--products .con--products > ul > li figcaption > ul li:nth-child(n+2), .single-wrap .single__contents--plan .con--products > ul > li figcaption > ul li:nth-child(n+2) {
  margin-top: 8px;
  padding-top: 8px;
  border-top: solid 1px rgba(51, 51, 51, 0.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.single-wrap .single__contents--products .con--products > ul > li figcaption > ul li:nth-child(n+2) > *:first-child, .single-wrap .single__contents--plan .con--products > ul > li figcaption > ul li:nth-child(n+2) > *:first-child {
  width: 160px;
}
.single-wrap .single .con--plan {
  padding-bottom: 40px;
}
@media print {
  .single-wrap .single .con--plan {
    page-break-after: always;
    padding-bottom: 10px;
  }
}
.single-wrap .single .con--plan-table {
  padding-bottom: 80px;
}
@media print {
  .single-wrap .single .con--plan-table {
    padding-bottom: 40px;
  }
}
.single-wrap .single .con--plan-table table.plan-table {
  width: 100%;
}
.single-wrap .single .con--plan-table table.plan-table .data {
  cursor: pointer;
}
.single-wrap .single .con--plan-table table.plan-table .data > * {
  pointer-events: none;
}
.single-wrap .single .con--plan-table table.plan-table thead > tr > * {
  padding: 10px 18px;
  position: relative;
}
.single-wrap .single .con--plan-table table.plan-table thead > tr > *:last-child {
  padding: 10px 9px 10px 18px;
}
@media print {
  .single-wrap .single .con--plan-table table.plan-table thead > tr > * {
    padding: 5px 8px;
  }
  .single-wrap .single .con--plan-table table.plan-table thead > tr > *:last-child {
    padding: 5px 9px 5px 18px;
  }
}
.single-wrap .single .con--plan-table table.plan-table thead > tr > *:nth-child(n+2) div {
  display: block;
  padding: 5px;
  font-size: 1.6rem;
  font-weight: 700;
  color: #538FCB;
  border-radius: 3px;
  position: relative;
  z-index: 4;
}
@media print {
  .single-wrap .single .con--plan-table table.plan-table thead > tr > *:nth-child(n+2) div {
    font-size: 1.2rem;
  }
}
.single-wrap .single .con--plan-table table.plan-table thead > tr > *:nth-child(n+2) .bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.single-wrap .single .con--plan-table table.plan-table thead > tr > *:nth-child(n+2) .bg::before {
  content: "";
  width: calc(100% - 36px);
  height: calc(100% - 20px);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background: #538FCB1A;
  border-radius: 3px;
}
.single-wrap .single .con--plan-table table.plan-table thead > tr > *:nth-child(n+2):last-child .bg::before {
  content: "";
  width: calc(100% - 27px);
  height: calc(100% - 20px);
  position: absolute;
  left: auto;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  background: #538FCB1A;
  border-radius: 3px;
}
.single-wrap .single .con--plan-table table.plan-table thead > tr > *:nth-child(n+2).active div {
  color: #fff;
}
.single-wrap .single .con--plan-table table.plan-table thead > tr > *:nth-child(n+2).active div::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 15px 10px;
  border-color: transparent transparent #538FCB transparent;
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  z-index: 0;
}
@media print {
  .single-wrap .single .con--plan-table table.plan-table thead > tr > *:nth-child(n+2).active div::before {
    border-width: 0 5px 8px 5px;
    top: -3px;
  }
}
.single-wrap .single .con--plan-table table.plan-table thead > tr > *:nth-child(n+2).active .bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.single-wrap .single .con--plan-table table.plan-table thead > tr > *:nth-child(n+2).active .bg::before {
  content: "";
  width: calc(100% - 18px);
  height: calc(100% - 20px);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background: #538FCB;
  border-radius: 3px;
}
.single-wrap .single .con--plan-table table.plan-table thead > tr > *:nth-child(n+2).active .bg::after {
  content: "";
  width: calc(100% - 18px);
  height: calc(50% - 20px);
  position: absolute;
  left: 50%;
  bottom: 0%;
  transform: translateX(-50%);
  z-index: 1;
  background: #538FCB1A;
  border-radius: 3px;
}
.single-wrap .single .con--plan-table table.plan-table thead > tr > *:nth-child(n+2).active:last-child .bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.single-wrap .single .con--plan-table table.plan-table thead > tr > *:nth-child(n+2).active:last-child .bg::before {
  content: "";
  width: calc(100% - 9px);
  height: calc(100% - 20px);
  position: absolute;
  left: auto;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  background: #538FCB;
  border-radius: 3px;
}
.single-wrap .single .con--plan-table table.plan-table thead > tr > *:nth-child(n+2).active:last-child .bg::after {
  content: "";
  width: calc(100% - 9px);
  height: calc(50% - 20px);
  position: absolute;
  left: auto;
  right: 0;
  bottom: 0%;
  z-index: 1;
  background: #538FCB1A;
  border-radius: 3px;
  transform: none;
}
.single-wrap .single .con--plan-table table.plan-table thead > tr > *:nth-child(n+2)::after {
  content: "";
  height: calc(100% - 20px);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  border-left: dashed #ccc 1px;
}
.single-wrap .single .con--plan-table table.plan-table tbody > tr {
  counter-increment: cnt;
  border-top: solid 1px #D9D9D9;
  position: relative;
}
.single-wrap .single .con--plan-table table.plan-table tbody > tr th {
  width: 96px;
}
.single-wrap .single .con--plan-table table.plan-table tbody > tr > * {
  vertical-align: middle;
  position: relative;
}
.single-wrap .single .con--plan-table table.plan-table tbody > tr > *:nth-child(n+2)::after {
  content: "";
  height: calc(100% - 20px);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  border-left: dashed #ccc 1px;
}
.single-wrap .single .con--plan-table table.plan-table tbody > tr .data {
  padding: 10px 18px;
  position: relative;
}
@media print {
  .single-wrap .single .con--plan-table table.plan-table tbody > tr .data {
    padding: 6px 8px;
  }
}
.single-wrap .single .con--plan-table table.plan-table tbody > tr .data.active::before {
  content: "";
  width: calc(100% - 18px);
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  background: #538FCB1A;
}
.single-wrap .single .con--plan-table table.plan-table tbody > tr .data.active .bg {
  background: #FFFFFF;
}
.single-wrap .single .con--plan-table table.plan-table tbody > tr .data.active:last-child::before {
  content: "";
  width: calc(100% - 9px);
  height: 100%;
  position: absolute;
  left: auto;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  background: #538FCB1A;
}
.single-wrap .single .con--plan-table table.plan-table tbody > tr .data .bg {
  width: calc(100% - 36px);
  height: calc(100% - 20px);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background: #F8F8F8;
  border-radius: 3px;
}
.single-wrap .single .con--plan-table table.plan-table tbody > tr .data:last-child {
  padding: 10px 9px 10px 18px;
}
@media print {
  .single-wrap .single .con--plan-table table.plan-table tbody > tr .data:last-child {
    padding: 6px 4px 6px 8px;
  }
}
.single-wrap .single .con--plan-table table.plan-table tbody > tr .data:last-child .bg {
  content: "";
  width: calc(100% - 27px);
  left: auto;
  right: 9px;
  top: 50%;
  transform: translate(0%, -50%);
}
.single-wrap .single .con--plan-table table.plan-table tbody > tr .data__inner {
  position: relative;
  z-index: 2;
  padding: 8px 0;
}
@media print {
  .single-wrap .single .con--plan-table table.plan-table tbody > tr .data__inner {
    padding: 3px 0;
  }
}
.single-wrap .single .con--plan-table table.plan-table tbody > tr .data span {
  width: 100%;
  display: block;
  text-align: center;
  line-height: 1.4;
}
@media print {
  .single-wrap .single .con--plan-table table.plan-table tbody > tr .data span {
    font-size: 1.4rem;
  }
}
.single-wrap .single .con--plan-table table.plan-table tbody > tr .data span.check {
  width: 44px;
  height: 6px;
  border-radius: 10px;
  background: #efefef;
  margin: 3px auto;
}
@media print {
  .single-wrap .single .con--plan-table table.plan-table tbody > tr .data span.check {
    width: 38px;
    height: 3px;
  }
}
.single-wrap .single .con--plan-table table.plan-table tbody > tr .thumbnail {
  width: auto;
  padding: 10px 0px;
  display: flex;
  align-items: center;
}
.single-wrap .single .con--plan-table table.plan-table tbody > tr .thumbnail::before {
  content: counter(cnt, upper-alpha);
  font-size: 1.8rem;
  font-weight: 500;
  z-index: 10;
  margin-right: 10px;
}
.single-wrap .single .con--plan-table table.plan-table tbody > tr .thumbnail img {
  width: 57px;
  height: 44px;
  object-fit: cover;
}
.single-wrap .btn--sc-close * {
  pointer-events: none;
}
.single-wrap .btn--sc-close:hover .btn {
  filter: brightness(1.2);
}
.single-wrap .btn--sc-close.active .btn i {
  transform: scaleY(-1);
}
.single-wrap .btn--sc-close.active .btn i::before {
  transform: translateY(-2px) rotate(90deg);
}
.single-wrap .btn--sc-close .btn {
  display: flex;
  align-items: center;
}
@media print {
  .single-wrap .btn--sc-close .btn {
    display: none;
  }
}
.single-wrap .btn--sc-close .btn i {
  display: inline-block;
}
.single-wrap .btn--sc-close .btn i::before {
  vertical-align: middle;
  content: "";
  display: inline-block;
  background-image: url('data:image/svg+xml;utf8,<svg width="10" height="19" viewBox="0 0 10 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.48535 18L1.00007 9.51472L9.48535 1.02944" stroke="%23538FCB" stroke-width="2.5"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 14px;
  height: 14px;
  transform: translateY(-2px) rotate(90deg);
  margin-right: 5px;
}
.single-wrap .btn--sc-close .btn span {
  color: #538FCB;
  font-size: 1.8rem;
  font-weight: 500;
  pointer-events: none;
}
.single-wrap .footer-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  padding: 40px 0 40px;
}
@media print {
  .single-wrap .footer-nav {
    display: none;
  }
}
.single-wrap .btn-print {
  display: block;
  max-width: 180px;
  width: 100%;
  height: 45px;
  background: #538FCB;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media print {
  .single-wrap .btn-print {
    display: none;
  }
}
@media print {
  .single-wrap .btn-print {
    width: 90%;
    height: 43px;
  }
}
@media screen {
  .single-wrap .btn-print:hover {
    filter: brightness(1.2);
  }
}
.single-wrap .btn-print span {
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.single-wrap .btn-print span::before {
  content: "";
  background-image: url('data:image/svg+xml;utf8,<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.11349 4.10858C5.45646 4.10858 5.73332 3.82726 5.73332 3.47875V1.25966H19.2664V3.47875C19.2664 3.82726 19.5432 4.10858 19.8862 4.10858C20.2292 4.10858 20.506 3.82726 20.506 3.47875V0.839772C20.506 0.375798 20.1362 0 19.6796 0H5.3201C4.86349 0 4.49365 0.375798 4.49365 0.839772V3.47875C4.49365 3.82726 4.77051 4.10858 5.11349 4.10858Z" fill="%23FFFFFF"/>\a  <path d="M23.3471 4.7384H1.65289C0.741736 4.7384 0 5.4921 0 6.41795V15.5337C0 16.4595 0.741736 17.2132 1.65289 17.2132H4.4938V24.1581C4.4938 24.6221 4.86364 24.9979 5.32025 24.9979H15.1343C15.1343 24.9979 15.1343 24.9979 15.1364 24.9979C15.1756 24.9979 15.2169 24.9937 15.2541 24.9853C15.2769 24.9811 15.2975 24.9727 15.3182 24.9664C15.3347 24.9601 15.3533 24.958 15.3698 24.9496C15.3946 24.9391 15.4174 24.9265 15.4401 24.9118C15.4525 24.9055 15.4649 24.8992 15.4773 24.8908C15.5103 24.8677 15.5434 24.8404 15.5723 24.8131L20.3574 19.9509C20.3574 19.9509 20.3574 19.9509 20.3574 19.9488C20.3822 19.9236 20.405 19.8963 20.4236 19.8669C20.4298 19.8585 20.4359 19.848 20.4421 19.8375C20.4566 19.8144 20.4669 19.7934 20.4793 19.7682C20.4835 19.7577 20.4897 19.7451 20.4938 19.7346C20.5062 19.7052 20.5145 19.6737 20.5207 19.6443C20.5207 19.6402 20.5227 19.6339 20.5248 19.6297C20.5331 19.5919 20.5351 19.5562 20.5351 19.5184C20.5351 19.5142 20.5351 19.51 20.5351 19.5058V17.2132H23.3409C24.2521 17.2132 24.9938 16.4595 24.9938 15.5337V6.42005C24.9938 5.4942 24.2521 4.7405 23.3409 4.7405L23.3471 4.7384ZM5.73347 13.3671H19.3017V18.8781H15.1343C14.7913 18.8781 14.5145 19.1594 14.5145 19.5079V23.7424H5.73347V13.3671ZM15.7541 22.8502V20.1377H18.4236L15.7541 22.8502ZM23.7603 15.5358C23.7603 15.7667 23.5744 15.9557 23.3471 15.9557H20.5413V13.3671H21.0744C21.4174 13.3671 21.6942 13.0857 21.6942 12.7372C21.6942 12.3887 21.4174 12.1074 21.0744 12.1074H5.11364H3.92769C3.58471 12.1074 3.30785 12.3887 3.30785 12.7372C3.30785 13.0857 3.58471 13.3671 3.92769 13.3671H4.49587V15.9557H1.65496C1.42769 15.9557 1.24174 15.7667 1.24174 15.5358V6.42005C1.24174 6.18911 1.42769 6.00016 1.65496 6.00016H23.3492C23.5764 6.00016 23.7624 6.18911 23.7624 6.42005V15.5358H23.7603Z" fill="%23FFFFFF"/>\a  </svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 24px;
  height: 24px;
  margin-right: 15px;
}
@media print {
  .single-wrap .btn-print span::before {
    margin-right: 10px;
  }
}
.single-wrap .btn-print span::after {
  content: "";
  background-image: url('data:image/svg+xml;utf8,<svg width="10" height="19" viewBox="0 0 10 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.48535 18L1.00007 9.51472L9.48535 1.02944" stroke="%23FFFFFF" stroke-width="2.5"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 14px;
  height: 14px;
  transform: scaleX(-1);
  margin-left: 4px;
}
.single-wrap .btn-page-close {
  display: block;
  max-width: 180px;
  width: 100%;
  height: 45px;
  background: #EEEEEE;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease;
}
@media screen {
  .single-wrap .btn-page-close:hover {
    filter: brightness(1.05);
  }
}
.single-wrap .btn-page-close span {
  font-size: 2rem;
  line-height: 1;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-left: 30px;
}
.single-wrap .btn-page-close span::before, .single-wrap .btn-page-close span::after {
  content: "";
  width: 20px;
  height: 2px;
  background: #000;
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 4;
}
.single-wrap .btn-page-close span::before {
  transform: translateY(-50%) rotate(45deg);
}
.single-wrap .btn-page-close span::after {
  transform: translateY(-50%) rotate(-45deg);
}
.single-wrap .btn-page-close--s {
  position: absolute;
  right: 0;
  top: 6px;
  max-width: 86px;
  height: 31px;
}
.single-wrap .btn-page-close--s span {
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 400;
  padding-left: 20px;
}
.single-wrap .btn-page-close--s span::before, .single-wrap .btn-page-close--s span::after {
  content: "";
  width: 16px;
  height: 1px;
  background: #000;
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 4;
}
.single-wrap .btn-page-close--s span::before {
  transform: translateY(-50%) rotate(45deg);
}
.single-wrap .btn-page-close--s span::after {
  transform: translateY(-50%) rotate(-45deg);
}
@media print {
  .single-wrap .btn-page-close {
    display: none;
  }
}
.single-wrap .pagebreak.active {
  break-after: page;
}
body:not(.iframe) .btn-page-close {
  display: none;
}
.details-swiper {
  padding-bottom: 60px;
}
@media print {
  .details-swiper {
    padding-bottom: 20px;
  }
}
@media print {
  .con--tp {
    padding-top: 40px;
  }
}
.con--tp .tp-swiper-navi {
  display: grid;
  grid-template-columns: 54px 1fr 54px;
  grid-template-rows: 1fr;
  position: relative;
  margin-bottom: 30px;
}
.con--tp .tp-swiper-navi h3 {
  background: #538FCB;
  color: #fff;
  padding: 12px;
  border-radius: 3px;
  margin: auto;
  text-align: center;
  height: 100%;
  min-height: 52.8px;
}
.con--tp .tp-swiper-navi h3::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -12px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 12px 8px;
  border-color: transparent transparent #538fcb transparent;
}
.con--tp .tp-swiper-navi .tp-swiper-button {
  background: white;
  width: 54px;
  height: 100%;
  position: absolute;
  top: 0px;
  z-index: 10;
  opacity: 1;
}
@media print {
  .con--tp .tp-swiper-navi .tp-swiper-button {
    display: none;
  }
}
.con--tp .tp-swiper-navi .tp-swiper-button.swiper-button-disabled {
  pointer-events: none;
  opacity: 0;
}
.con--tp .tp-swiper-navi .tp-swiper-button:hover {
  background: white;
}
.con--tp .tp-swiper-navi .tp-swiper-button::before {
  vertical-align: middle;
  content: "";
  display: inline-block;
  background-image: url('data:image/svg+xml;utf8,<svg width="10" height="19" viewBox="0 0 10 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.48535 18L1.00007 9.51472L9.48535 1.02944" stroke="%23538FCB" stroke-width="2.5"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  left: 40%;
  top: 52%;
  transform: translate(-50%, -50%) rotate(0deg);
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.con--tp .tp-swiper-navi .tp-swiper-button--next {
  right: 0;
}
.con--tp .tp-swiper-navi .tp-swiper-button--next::before {
  left: 60%;
  transform: translate(-50%, -50%) scaleX(-1);
}
.con--tp .tp-swiper-navi .tp-swiper-button--next:hover::before {
  left: 70%;
}
.con--tp .tp-swiper-navi .tp-swiper-button--prev {
  left: 0;
}
.con--tp .tp-swiper-navi .tp-swiper-button--prev:hover::before {
  left: 30%;
}
.con--tp .tp-swiper {
  overflow: hidden;
  position: relative;
}
body.page .con--guide {
  counter-increment: number 1;
  margin: auto;
  margin-top: 40px;
  margin-bottom: 80px;
}
body.page .con--guide h2 {
  border-top: #538FCB 2px solid;
  height: auto;
  text-align: left;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 20px 0 0;
  margin-bottom: 20px;
}
body.page .con--guide h2::before {
  content: counter(number, decimal-leading-zero) " ";
  background: #538FCB;
  border-radius: 3px;
  color: #fff;
  width: 43px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-right: 10px;
}
body.page .con--guide p {
  text-align: left;
}
body.page .con--guide .float-left {
  display: inline-block;
  margin-right: 20px;
}
body.page .con--guide .img-w68 {
  width: 68px;
  height: 68px;
}
body.page .con--guide__img {
  clear: both;
  margin: 20px 0;
}
body.page .con--guide__list {
  background: rgba(83, 143, 203, 0.15);
  border-radius: 5px;
  padding: 20px;
}
body.page .con--guide__list h3 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #538FCB;
}
body.page .con--guide__list ul {
  margin-top: 10px;
  list-style: disc;
  padding-left: 1em;
}
body.page .con--guide__list ul li {
  font-size: 1.6rem;
}
body {
  -webkit-print-color-adjust: exact;
  margin: 0;
  padding: 0;
  background: #000;
  overflow: hidden;
  color: #000;
}
body.event-none::before {
  content: "";
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
}
body .splash {
  display: none;
}
body:not(.details).active .splash {
  transition: all 2s ease;
  transition-delay: 6.3s;
  opacity: 0;
  pointer-events: none;
}
body:not(.details).active .splash .txt1 {
  animation-name: splash;
  animation-duration: 2.7s;
  animation-delay: 0.3s;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
body:not(.details).active .splash .txt2 {
  animation-name: splash;
  animation-duration: 4.5s;
  animation-delay: 3s;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
body:not(.details) .splash {
  display: block;
  position: fixed;
  z-index: 10000;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: #fff;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
@keyframes splash {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
body:not(.details) .splash .txt1 {
  pointer-events: none;
  width: 682px;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
body:not(.details) .splash .txt2 {
  pointer-events: none;
  opacity: 0;
  font-size: 3.6rem;
  text-align: center;
}
body.scroll {
  overflow-y: auto;
}
body.page {
  background: #fff;
}
body.page .content {
  text-align: center;
  padding: 0 40px;
  margin: auto;
  display: flex;
  align-items: center;
  flex-direction: column;
}
body.page h2 {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}
body.page p {
  text-align: center;
}
body.page a {
  color: #538FCB;
  text-decoration: underline;
}
body.not-active header, body.not-active article {
  pointer-events: none;
}
body.active2 .con--products__list > li {
  opacity: 1;
}
body.active2 .swiper-button-next, body.active2 .swiper-button-prev {
  opacity: 1;
}
.site-header {
  height: 64px;
  width: calc(100% - 120px);
  opacity: 0;
  position: absolute;
  z-index: 300;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  border-bottom: solid 1px #000;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
}
.site-header.active {
  opacity: 1;
}
@media (max-width: 1400px) {
  .site-header {
    width: calc(100% - 60px);
  }
}
@media (max-width: 1366px) {
  .site-header {
    height: 46px;
  }
}
.site-header .site-logo {
  width: 439px;
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
}
.site-header .site-logo h1 {
  padding: 0;
  margin: 0;
  line-height: 1;
}
@media (max-width: 1600px) {
  .site-header .site-logo {
    width: 28vw;
  }
}
@media (max-width: 1366px) {
  .site-header .site-logo {
    top: 60%;
  }
}
.site-header .site-logo a {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: all;
}
@media (min-width: 768px) {
  .site-header .site-logo a {
    transition: all 0s ease;
    cursor: pointer;
  }
  .site-header .site-logo a:hover {
    opacity: 0.5;
  }
}
.site-header .header-nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
}
.site-header .header-nav ul li {
  margin-right: 40px;
}
@media (max-width: 1400px) {
  .site-header .header-nav ul li {
    margin-right: 40px;
  }
}
@media (max-width: 960px) {
  .site-header .header-nav ul li {
    margin-right: 2vw;
  }
}
.site-header .header-nav ul li:last-child {
  margin-right: 0px;
}
.site-header .header-nav ul li a {
  font-size: 1.6rem;
  position: relative;
  display: block;
  pointer-events: all;
}
@media (max-width: 1400px) {
  .site-header .header-nav ul li a {
    font-size: 1.6rem;
  }
}
@media (max-width: 1366px) {
  .site-header .header-nav ul li a {
    font-size: 1.6rem;
  }
}
@media (max-width: 960px) {
  .site-header .header-nav ul li a {
    font-size: 1.8vw;
  }
}
.site-header .header-nav ul li a:not(.btn) {
  padding-left: 28px;
}
@media (max-width: 1400px) {
  .site-header .header-nav ul li a:not(.btn) {
    padding-left: 20px;
  }
}
.site-header .header-nav ul li a:not(.btn) span {
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) {
  .site-header .header-nav ul li a:not(.btn) {
    transition: all 0s ease;
    cursor: pointer;
  }
  .site-header .header-nav ul li a:not(.btn):hover {
    color: #538FCB;
  }
}
.site-header .header-nav ul li a:not(.btn)::before {
  z-index: 1;
  content: "";
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 1px;
  background: #538FCB;
}
@media (max-width: 1400px) {
  .site-header .header-nav ul li a:not(.btn)::before {
    width: 14px;
  }
}
.site-header .header-nav ul li .btn {
  width: 172px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding-right: 12px;
}
@media (max-width: 1366px) {
  .site-header .header-nav ul li .btn {
    width: 150px;
    padding-right: 8px;
    gap: 7px;
    height: 28px;
  }
}
@media (min-width: 768px) {
  .site-header .header-nav ul li .btn {
    transition: all 0s ease;
    cursor: pointer;
  }
  .site-header .header-nav ul li .btn:hover {
    color: #538FCB;
    background: rgba(255, 255, 255, 0.8);
  }
}
.site-header .header-nav ul li .btn img {
  display: block;
}
main, article {
  display: block;
  overflow: hidden;
}
.pnlm-container {
  background: #000 !important;
}
.pnlm-load-box {
  display: none !important;
}
#panorama {
  width: 100%;
  height: 100vh;
  position: relative;
  z-index: 10;
}
#panorama1, #panorama2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  opacity: 0;
  z-index: 1;
  transition: all 0.6s linear;
  pointer-events: none;
}
#panorama1.view, #panorama2.view {
  opacity: 1;
  pointer-events: all;
}
#panorama1.hide, #panorama2.hide {
  opacity: 0;
}
#panorama1.none, #panorama2.none {
  display: none;
}
#panorama1.active, #panorama2.active {
  z-index: 2;
}
.sec--panolens {
  background: #000;
}
.sec .nav-room {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 160;
  height: 100%;
  width: 100%;
  pointer-events: none;
  overflow: hidden;
}
.sec--room {
  position: absolute;
  left: 60px;
  top: 70px;
  z-index: 160;
  height: calc(100vh - 320px);
  overflow: hidden;
  width: calc(100% - 240px);
  pointer-events: none;
  opacity: 0;
}
@media (max-width: 1366px) {
  .sec--room {
    top: 50px;
  }
}
.sec--room.open {
  opacity: 1;
}
@media (max-width: 1400px) {
  .sec--room {
    width: calc(100% - 180px);
    left: 30px;
  }
}
.sec--room__inner {
  pointer-events: all;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
}
.sec--room__inner #select-room {
  pointer-events: all;
  position: relative;
}
.sec--room__inner #select-room .select-room__inner {
  position: relative;
  z-index: 2;
}
.sec--room .dimming-category {
  position: absolute;
  z-index: 2;
  height: auto;
  width: 84%;
  left: 270px;
  top: 0px;
  pointer-events: auto;
  overflow: hidden;
}
@media (max-width: 1400px) {
  .sec--room .dimming-category {
    width: 90%;
    left: 110px;
  }
}
.sec--room .dimming-category.change {
  overflow: hidden;
}
.sec--room .dimming-category .cat {
  display: none;
}
.sec--room .dimming-category .cat.active {
  gap: 20px;
  display: flex;
}
@media (max-width: 1366px) {
  .sec--room .dimming-category .cat.active {
    gap: 10px;
  }
}
.sec--room .dimming-category .cat.first {
  display: flex;
  opacity: 0.2;
  pointer-events: none;
}
.sec--room .dimming-category .cat.first .cat-select {
  pointer-events: none;
}
.sec--room .dimming-category .cat.first ul {
  display: none;
}
.sec--room .dimming-category .box .ul-category li {
  cursor: pointer;
  align-items: center;
  pointer-events: auto;
  display: none;
}
.sec--room .dimming-category .box .ul-category li.active button {
  pointer-events: none;
}
.sec--room .dimming-category .box .ul-category li:hover button {
  font-weight: 700;
}
.sec--room .dimming-category .box .ul-category li.active button {
  font-weight: 700;
}
.sec--room .dimming-category .box .ul-category li button {
  display: block;
  pointer-events: none;
  position: relative;
}
.sec--room .view {
  z-index: 2;
  right: 0px;
  top: 0px;
}
.sec--room .view__inner .ul-category-view li {
  cursor: pointer;
  align-items: center;
  pointer-events: auto;
  display: flex;
}
.sec--room .view__inner .ul-category-view li.add {
  display: none;
}
.sec--room .view__inner .ul-category-view li.active button {
  pointer-events: none;
}
.sec--room .view__inner .ul-category-view li:hover button {
  font-weight: 700;
}
.sec--room .view__inner .ul-category-view li.active button {
  font-weight: 700;
}
.sec--room .view__inner .ul-category-view li button {
  white-space: nowrap;
  display: block;
  pointer-events: none;
  position: relative;
}
.sec--products {
  background: #fff;
  position: fixed;
  left: 0;
  bottom: 0px;
  width: 100%;
  display: none;
  z-index: 200;
  background: #fff;
}
.sec--products .con--products {
  display: none;
}
.sec--products.open {
  bottom: 0px;
  display: block;
}
.sec--products.view .con--products {
  display: block;
}
.sec--products.view .sec--products__inner {
  padding-bottom: 20px;
}
.sec--products__inner {
  max-width: 1848px;
  margin: auto;
  padding: 15px 60px 0px;
  position: relative;
}
@media (max-width: 1480px) {
  .sec--products__inner {
    padding: 15px 34px 0px;
  }
}
.sec--products.view h2 {
  margin-top: 0px;
}
.sec--products h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 15px;
}
.sec--products .btn--products {
  pointer-events: all;
  width: 180px;
  height: 54px;
  position: absolute;
  right: 0px;
  top: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  color: #538FCB;
  overflow: hidden;
}
@media (max-width: 1400px) {
  .sec--products .btn--products {
    width: 120px;
  }
}
.sec--products .btn--products:hover {
  filter: brightness(1.2);
}
.sec--products .btn--products span {
  font-weight: 500;
  position: relative;
  padding-left: 22px;
  /*
				&::after{
					
					content:"";
					@include svg-arrow(FFFFFF);
					background-repeat: no-repeat;
					background-position: center;
					background-size: contain;
					width: 14px;
					height: 14px;
					position: absolute;
					left: 0px;
					bottom:-100px;
					transform: translateY(-50%) rotate(90deg);
				}
				*/
}
.sec--products .btn--products span::before {
  content: "";
  background-image: url('data:image/svg+xml;utf8,<svg width="10" height="19" viewBox="0 0 10 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.48535 18L1.00007 9.51472L9.48535 1.02944" stroke="%23538FCB" stroke-width="2.5"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 14px;
  height: 14px;
  position: absolute;
  left: 0px;
  top: 48%;
  transform: translateY(-50%) rotate(90deg);
}
.sec--products.view .btn--products span {
  /*
					&::after{
						bottom:-39%;
						transform: translateY(-50%) rotate(-90deg);
					}
					*/
}
.sec--products.view .btn--products span::before {
  transform: translateY(-50%) rotate(-90deg);
}
.sec--details {
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  position: fixed;
  z-index: 500;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}
.sec--details.active {
  pointer-events: all;
  opacity: 1;
}
.sec--details > iframe {
  margin: auto;
  max-width: 1000px;
  width: 100%;
  height: calc(100% - 190px);
  opacity: 0;
}
.sec--details > iframe.active {
  opacity: 1;
}
@media (max-height: 960px) {
  .sec--details > iframe {
    height: calc(100% - 90px);
  }
}
@media (max-height: 768px) {
  .sec--details > iframe {
    height: 100%;
  }
}
.sec--products.view .swiper-button-next, .sec--products.view .swiper-button-prev {
  display: block;
}
.sec--products.not-hover {
  pointer-events: none;
}
.sec--products .swiper-button-next, .sec--products .swiper-button-prev {
  display: none;
}
.sec--products.not-slide .swiper-button-next, .sec--products.not-slide .swiper-button-prev {
  display: none !important;
}
.sec--products.not-slide .con--products__list {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 40px;
}
@media (max-width: 1480px) {
  .sec--products.not-slide .con--products__list {
    gap: 20px;
  }
}
@media (max-width: 1180px) {
  .sec--products.not-slide .con--products__list {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media (max-width: 960px) {
  .sec--products.not-slide .con--products__list {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.sec--products.not-slide .con--products__list > li {
  opacity: 1;
}
.con--products__list > li {
  width: 300px;
  height: auto;
  opacity: 0;
  position: relative;
  display: block;
}
@media (max-width: 1280px) {
  .con--products__list > li {
    width: 280px;
  }
}
@media (max-height: 880px) {
  .con--products__list > li {
    width: 260px;
  }
}
.con--products__list > li figure {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 184px;
}
@media (max-width: 1280px) {
  .con--products__list > li figure {
    width: 280px;
    height: 171px;
  }
}
@media (max-height: 880px) {
  .con--products__list > li figure {
    width: 260px;
    height: 159px;
  }
}
.con--products__list > li figure img {
  width: 100%;
  height: 100%;
  z-index: 0;
  object-fit: cover;
}
.con--products__list > li figure figcaption {
  width: 100%;
  height: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
  padding: 10px 15px;
}
@media (max-height: 880px) {
  .con--products__list > li figure figcaption {
    padding: 7px 10px;
    height: 100%;
  }
}
@media (max-width: 1280px) {
  .con--products__list > li figure figcaption {
    padding: 7px 10px;
  }
}
.con--products__list > li figure figcaption ul li {
  font-size: 1.4rem;
  font-weight: 500px;
  color: #fff;
  border-bottom: solid 1px #fff;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 8px 0;
  opacity: 0;
  transform: translateY(20px);
}
.con--products__list > li figure figcaption ul li > span:first-child {
  width: 3em;
}
.con--products__list > li figure figcaption ul li > span:first-child.wh {
  width: 50%;
}
.con--products__list > li figure figcaption ul li > span:first-child.fh {
  width: 100%;
}
@media (max-width: 1280px) {
  .con--products__list > li figure figcaption ul li {
    font-size: 1.3rem;
    padding: 6px 0;
  }
}
@media (max-height: 880px) {
  .con--products__list > li figure figcaption ul li {
    font-size: 1.2rem;
    padding: 4px 0;
  }
}
.con--products__list > li figure figcaption ul li:last-child {
  border-bottom: none;
}
.con--products__list > li:hover figure img {
  transform: translateY(-100%);
}
.con--products__list > li:hover figure figcaption {
  opacity: 1;
  transform: translateY(-100%);
}
.con--products__list > li:hover figure figcaption ul li {
  opacity: 1;
  transform: translateY(0px);
}
.con--products__list > li strong {
  margin-top: 10px;
  position: relative;
  display: block;
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 500;
}
@media (max-height: 1080px) {
  .con--products__list > li strong {
    font-size: 1.4rem;
  }
}
.btn--fullscreen {
  width: 48px;
  height: 48px;
  position: absolute;
  right: 60px;
  bottom: 40px;
  opacity: 0;
  z-index: 100;
}
.btn--fullscreen.view {
  opacity: 1;
}
.btn--fullscreen.have-products {
  bottom: 94px;
}
@media (max-width: 1400px) {
  .btn--fullscreen {
    right: 30px;
  }
}
.btn--fullscreen.active::before {
  left: 7px;
  top: 7px;
  transform: rotate(180deg);
}
.btn--fullscreen.active::after {
  right: 7px;
  top: 7px;
  transform: rotate(280deg);
}
.btn--fullscreen.active span::before {
  left: 7px;
  bottom: 7px;
  transform: rotate(90deg);
}
.btn--fullscreen.active span::after {
  right: 7px;
  bottom: 7px;
  transform: rotate(0deg);
}
.btn--fullscreen.active:hover::before {
  left: 9px;
  top: 9px;
}
.btn--fullscreen.active:hover::after {
  right: 9px;
  top: 9px;
}
.btn--fullscreen.active:hover span::before {
  left: 9px;
  bottom: 9px;
}
.btn--fullscreen.active:hover span::after {
  right: 9px;
  bottom: 9px;
}
.btn--fullscreen:hover::before {
  /*
			left: 7px;
			top:7px;
			*/
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 11 11" style="enable-background:new 0 0 11 11;" xml:space="preserve"><polygon fill="%23538FCB" points="10.8,9.4 3.9,2.5 10,2.5 10,0.5 0.5,0.5 0.5,10 2.5,10 2.5,3.9 9.4,10.8 "/></svg>');
}
.btn--fullscreen:hover::after {
  /*
			right: 7px;
			top:7px;
			*/
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 11 11" style="enable-background:new 0 0 11 11;" xml:space="preserve"><polygon fill="%23538FCB" points="10.8,9.4 3.9,2.5 10,2.5 10,0.5 0.5,0.5 0.5,10 2.5,10 2.5,3.9 9.4,10.8 "/></svg>');
}
.btn--fullscreen:hover span::before {
  /*
				left: 7px;
				bottom:7px;
				*/
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 11 11" style="enable-background:new 0 0 11 11;" xml:space="preserve"><polygon fill="%23538FCB" points="10.8,9.4 3.9,2.5 10,2.5 10,0.5 0.5,0.5 0.5,10 2.5,10 2.5,3.9 9.4,10.8 "/></svg>');
}
.btn--fullscreen:hover span::after {
  /*
				right: 7px;
				bottom:7px;
				*/
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 11 11" style="enable-background:new 0 0 11 11;" xml:space="preserve"><polygon fill="%23538FCB" points="10.8,9.4 3.9,2.5 10,2.5 10,0.5 0.5,0.5 0.5,10 2.5,10 2.5,3.9 9.4,10.8 "/></svg>');
}
.btn--fullscreen::before {
  content: "";
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 11 11" style="enable-background:new 0 0 11 11;" xml:space="preserve"><polygon fill="%230" points="10.8,9.4 3.9,2.5 10,2.5 10,0.5 0.5,0.5 0.5,10 2.5,10 2.5,3.9 9.4,10.8 "/></svg>');
  position: absolute;
  left: 9px;
  top: 9px;
  height: 9px;
  width: 9px;
  z-index: 2;
}
.btn--fullscreen::after {
  content: "";
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 11 11" style="enable-background:new 0 0 11 11;" xml:space="preserve"><polygon fill="%230" points="10.8,9.4 3.9,2.5 10,2.5 10,0.5 0.5,0.5 0.5,10 2.5,10 2.5,3.9 9.4,10.8 "/></svg>');
  position: absolute;
  right: 9px;
  top: 9px;
  height: 9px;
  width: 9px;
  transform: rotate(90deg);
  z-index: 2;
}
.btn--fullscreen span::before {
  content: "";
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 11 11" style="enable-background:new 0 0 11 11;" xml:space="preserve"><polygon fill="%230" points="10.8,9.4 3.9,2.5 10,2.5 10,0.5 0.5,0.5 0.5,10 2.5,10 2.5,3.9 9.4,10.8 "/></svg>');
  position: absolute;
  left: 9px;
  bottom: 9px;
  height: 9px;
  width: 9px;
  z-index: 2;
  transform: rotate(280deg);
}
.btn--fullscreen span::after {
  content: "";
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 11 11" style="enable-background:new 0 0 11 11;" xml:space="preserve"><polygon fill="%230" points="10.8,9.4 3.9,2.5 10,2.5 10,0.5 0.5,0.5 0.5,10 2.5,10 2.5,3.9 9.4,10.8 "/></svg>');
  position: absolute;
  right: 9px;
  bottom: 9px;
  height: 9px;
  width: 9px;
  transform: rotate(180deg);
  z-index: 2;
}
.btn--guide {
  width: 48px;
  height: 48px;
  position: absolute;
  right: 123px;
  bottom: 40px;
  opacity: 0;
  z-index: 100;
}
.btn--guide.view {
  opacity: 1;
}
.btn--guide.have-products {
  bottom: 94px;
}
@media (max-width: 1400px) {
  .btn--guide {
    right: 93px;
  }
}
.btn--guide:hover span {
  color: #538FCB;
}
.btn--guide span {
  display: block;
  color: #000;
  font-size: 3.2rem;
}
.btn--test {
  width: 50px;
  height: 50px;
  background: #333;
  border-radius: 100px;
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 100;
}
.swiper-button-next, .swiper-button-prev {
  opacity: 0;
  font-size: 3rem;
  color: #fff;
  width: 34px;
  height: 100%;
  position: absolute;
  top: 54%;
  transform: translateY(-50%);
  z-index: 30;
}
.swiper-button-next span:hover, .swiper-button-prev span:hover {
  background: #538FCB;
}
.swiper-button-next span:hover::before, .swiper-button-prev span:hover::before {
  background-image: url('data:image/svg+xml;utf8,<svg width="10" height="19" viewBox="0 0 10 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.48535 18L1.00007 9.51472L9.48535 1.02944" stroke="%23FFFFFF" stroke-width="2.5"/></svg>');
}
.swiper-button-next span, .swiper-button-prev span {
  width: 34px;
  background: rgba(0, 0, 0, 0.05);
  height: 68px;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
}
.swiper-button-next span::before, .swiper-button-prev span::before {
  content: "";
  background-image: url('data:image/svg+xml;utf8,<svg width="10" height="19" viewBox="0 0 10 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.48535 18L1.00007 9.51472L9.48535 1.02944" stroke="%23538FCB" stroke-width="2.5"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 20px;
  height: 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.swiper-button-next {
  right: 0px;
}
.swiper-button-next span {
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
}
.swiper-button-next span::before {
  transform: translate(-50%, -50%) scaleX(-1);
}
.swiper-button-prev {
  left: 0px;
}
.swiper-button-prev span {
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
}
#select-room {
  width: 250px;
}
@media (max-width: 1500px) {
  #select-room {
    width: 110px;
  }
}
#select-room .cat-select > div {
  display: grid;
}
#select-room .cat-select.hover button {
  display: block !important;
}
#select-room .cat-select button {
  display: none;
}
#select-room .cat-select button.active {
  grid-row: 1 !important;
  display: block !important;
}
.btn--details {
  width: fit-content;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0);
  right: 60px;
  top: 73px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  padding-left: 30px;
  position: fixed;
  color: #000;
}
@media (max-width: 1400px) {
  .btn--details {
    right: 30px;
  }
}
@media (max-width: 1366px) {
  .btn--details {
    top: 50px;
  }
}
.btn--details.active {
  opacity: 1;
  pointer-events: auto;
}
.btn--details:hover span {
  color: #538FCB;
}
.btn--details:hover span::before {
  background-image: url('data:image/svg+xml;utf8,<svg width="10" height="19" viewBox="0 0 10 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.48535 18L1.00007 9.51472L9.48535 1.02944" stroke="%23538FCB" stroke-width="2.5"/></svg>');
}
.btn--details span {
  font-size: 1.6rem;
  font-weight: 700;
}
@media (max-width: 1400px) {
  .btn--details span {
    font-size: 1.3rem;
  }
}
.btn--details span::before {
  content: "";
  background-image: url('data:image/svg+xml;utf8,<svg width="10" height="19" viewBox="0 0 10 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.48535 18L1.00007 9.51472L9.48535 1.02944" stroke="%23000" stroke-width="2.5"/></svg>');
  position: absolute;
  left: 13px;
  top: 31%;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 14px;
  height: 14px;
  transform: rotate(-180deg);
}
@media (max-width: 1280px) {
  .btn--details span::before {
    left: 1.4em;
    top: 34%;
    width: 10px;
    height: 10px;
  }
}
.box--interior, .box--dimming, .box--lighting_plan {
  width: 250px;
}
.cat {
  width: 100%;
}
.cat .view {
  width: 250px;
}
@media (max-width: 1500px) {
  .cat .view {
    width: 250px;
  }
}
.cat-select {
  width: 100%;
  height: fit-content;
  display: block;
  padding: 7px 20px 7px 25px;
  pointer-events: all;
  position: relative;
}
@media (max-width: 1500px) {
  .cat-select {
    padding: 7px 20px 7px 25px;
  }
}
.cat-select.not-active {
  opacity: 0.2;
  pointer-events: none;
}
.cat-select.not-active::before {
  display: none;
}
.cat-select::after {
  content: "";
  height: 22px;
  width: calc(100% - 10px);
  position: absolute;
  left: 10px;
  top: 2.8em;
  z-index: 0;
}
.cat-select::before {
  content: "";
  background-image: url('data:image/svg+xml;utf8,<svg width="10" height="19" viewBox="0 0 10 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.48535 18L1.00007 9.51472L9.48535 1.02944" stroke="%23000" stroke-width="2.5"/></svg>');
  position: absolute;
  left: 7px;
  top: 2.6em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 12px;
  height: 12px;
  transform: rotate(-90deg);
}
@media (max-width: 1500px) {
  .cat-select::before {
    width: 10px;
    height: 10px;
    top: 2.5em;
  }
}
.cat-select.hover {
  background: rgba(255, 255, 255, 0.2);
}
.cat-select.hover li.add {
  display: block !important;
}
.cat-select .selected {
  grid-row: 1;
  display: block;
}
.cat-select button .active {
  font-weight: 700;
}
.cat-select h3 {
  white-space: nowrap;
  cursor: default;
  font-size: 1.6rem;
  margin: 0;
  padding-bottom: 5px;
  display: none;
}
@media (max-width: 1280px) {
  .cat-select h3 {
    font-size: 1.3rem;
  }
}
.cat-select ul {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  z-index: 2;
  position: relative;
}
.cat-select ul li {
  color: #000 !important;
  white-space: nowrap;
  display: none;
}
.cat-select ul li.active {
  pointer-events: none;
}
.cat-select ul li.add.active {
  display: block !important;
  grid-row: 1;
}
.cat-select button {
  color: #000 !important;
  padding: 5px 0;
  font-size: 1.4rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  z-index: 10;
}
@media (max-width: 1280px) {
  .cat-select button {
    font-size: 1.3rem;
  }
}
.cat-select button.active {
  pointer-events: none;
  font-weight: 700;
}
.cat-select button:hover {
  font-weight: 700;
}
.cat h2 {
  font-size: 1.8rem;
  font-weight: 400;
  margin-left: -1em;
  white-space: nowrap;
}
@media (max-width: 1500px) {
  .cat h2 {
    margin-left: -1.2em;
    font-size: 1.6rem;
  }
}
.select-room h2 {
  font-size: 1.8rem;
  font-weight: 400;
  position: relative;
  z-index: 2;
  pointer-events: none;
  margin-left: -1em;
}
@media (max-width: 1500px) {
  .select-room h2 {
    margin-left: -1.2em;
    font-size: 1.6rem;
  }
}