@media screen and (max-width: 736px) {
  .pc {
    display: none;
  }
}

@media print, screen and (min-width: 736px) {
  .sp {
    display: none;
  }
}

.bigplanningSect {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media print, screen and (min-width: 736px) {
  .bigplanningSect {
    gap: 80px;
    margin: 0 auto;
    width: 992px;
  }
}

@media screen and (max-width: 736px) {
  .bigplanningSect {
    gap: calc(60 / 390 * 100vw);
  }
}

.bigplanningSect__heading {
  background-color: #e8943b;
  color: #ffffff;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  line-height: .7;
  text-align: center;
}

@media print, screen and (min-width: 736px) {
  .bigplanningSect__heading {
    -webkit-clip-path: polygon(0 0, 100% 0, 98% 50%, 100% 100%, 0 100%, 2% 50%);
            clip-path: polygon(0 0, 100% 0, 98% 50%, 100% 100%, 0 100%, 2% 50%);
    font-size: 40px;
    padding: 20px 0;
  }
}

@media screen and (max-width: 736px) {
  .bigplanningSect__heading {
    -webkit-clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
            clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
    font-size: calc(24 / 390 * 100vw);
    padding: calc(16 / 390 * 100vw) 0;
  }
}

@media print, screen and (min-width: 736px) {
  .bigplanningSect__cont .usableList__inner {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

@media screen and (max-width: 736px) {
  .bigplanningSect__cont .usableList__inner {
    background-color: #ffffff;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.bigplanningSect__cont .usableList__item {
  position: relative;
}

.bigplanningSect__cont .usableList__item:after {
  aspect-ratio: 1 / 1;
  background: url("../imgs/icon-closs.svg") no-repeat center/cover;
  content: '';
  position: absolute;
  z-index: 1;
}

@media print, screen and (min-width: 736px) {
  .bigplanningSect__cont .usableList__item:after {
    left: calc(100% + 14px);
    top: 50%;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
    width: 50px;
  }
}

@media screen and (max-width: 736px) {
  .bigplanningSect__cont .usableList__item:after {
    right: calc(64 / 390 * 100vw);
    top: calc(100% - (12.5 / 390 * 100vw));
    width: calc(25 / 390 * 100vw);
  }
}

.bigplanningSect__cont .usableList__item:last-child:after {
  content: initial;
}

.bigplanningSect__cont .usableList__note .caption {
  color: #ffffff;
}

@media print, screen and (min-width: 736px) {
  .gardenSect__head + .gardenSect__cont {
    margin-top: 80px;
  }
}

@media screen and (max-width: 736px) {
  .gardenSect__head + .gardenSect__cont {
    margin-top: calc(60 / 390 * 100vw);
  }
}

@media print, screen and (min-width: 736px) {
  .gardenSect__head .sectHeadGroup .svgTtl {
    bottom: -108px;
    left: 0;
    width: 551px;
  }
}

@media screen and (max-width: 736px) {
  .gardenSect__head .sectHeadGroup .svgTtl {
    bottom: calc(-27 / 390 * 100vw);
    left: calc(-27 / 390 * 100vw);
    width: calc(223 / 390 * 100vw);
  }
}

.gardenSect__cont {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

@media print, screen and (min-width: 736px) {
  .gardenSect__cont {
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 10px 0;
  }
}

@media screen and (max-width: 736px) {
  .gardenSect__cont {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(60 / 390 * 100vw);
  }
}

@media print, screen and (min-width: 736px) {
  .gardenSect__desc {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}

@media print, screen and (min-width: 736px) {
  .gardenSect__desc .txt {
    font-size: 16px;
  }
}

@media print, screen and (min-width: 736px) {
  .gardenSect__visual {
    width: calc(888 / 1200 * 100%);
  }
}

@media screen and (max-width: 736px) {
  .gardenSect__visual {
    margin-right: calc(-32 / 390 * 100vw);
    margin-left: calc(-32 / 390 * 100vw);
  }
}

@media print, screen and (min-width: 736px) {
  .gardenSect__visual .photo__capIn {
    left: 0;
    right: auto;
  }
}

@media print, screen and (min-width: 736px) {
  .gardenSect__list {
    margin-left: calc(-161 / 1200 * 100%);
    width: calc(473 / 1200 * 100%);
  }
}

@media print, screen and (min-width: 736px) {
  .gardenSect__note {
    margin-top: 80px;
  }
}

@media screen and (max-width: 736px) {
  .gardenSect__note {
    margin-top: calc(60 / 390 * 100vw);
  }
}

.storageSect {
  margin-top: 1px;
}

@media print, screen and (min-width: 736px) {
  .storageSect__head + .storageSect__cont {
    margin-top: 80px;
  }
}

@media screen and (max-width: 736px) {
  .storageSect__head + .storageSect__cont {
    margin-top: calc(60 / 390 * 100vw);
  }
}

@media print, screen and (min-width: 736px) {
  .storageSect__head .sectHeadGroup .svgTtl {
    bottom: -80px;
    left: 66px;
    width: 447px;
  }
}

@media screen and (max-width: 736px) {
  .storageSect__head .sectHeadGroup .svgTtl {
    bottom: calc(-23 / 390 * 100vw);
    left: calc(-21 / 390 * 100vw);
    width: calc(223 / 390 * 100vw);
  }
}

@media print, screen and (min-width: 736px) {
  .storageSect__head .subSect {
    margin-top: 80px;
  }
}

@media screen and (max-width: 736px) {
  .storageSect__head .subSect {
    margin-top: calc(60 / 390 * 100vw);
  }
}

.storageSect__head .subSect__head .photo {
  margin: 0 auto;
}

@media print, screen and (min-width: 736px) {
  .storageSect__head .subSect__head .photo {
    width: 250px;
  }
}

@media screen and (max-width: 736px) {
  .storageSect__head .subSect__head .photo {
    width: calc(250 / 390 * 100vw);
  }
}

.storageSect__head .subSect__cont {
  line-height: 2;
  border-top: 1px solid #ecb378;
  color: #e8943b;
}

.storageSect__head .subSect__cont:before {
  content: '';
  display: block;
  height: 0;
  margin-top: calc((1 - 2) * .5em);
  width: 0;
}

.storageSect__head .subSect__cont:after {
  content: '';
  display: block;
  height: 0;
  margin-bottom: calc((1 - 2) * .5em);
  width: 0;
}

@media print, screen and (min-width: 736px) {
  .storageSect__head .subSect__cont {
    font-size: 16px;
    margin-top: 20px;
    padding-top: 20px;
    text-align: center;
  }
}

@media screen and (max-width: 736px) {
  .storageSect__head .subSect__cont {
    font-size: calc(14 / 390 * 100vw);
    margin-top: calc(16 / 390 * 100vw);
    padding-top: 20px;
  }
}

.storageSwitch {
  background-color: #ffffff;
  -webkit-box-shadow: 10px 10px 20px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 10px 10px 20px 0 rgba(0, 0, 0, 0.2);
  position: relative;
}

@media print, screen and (min-width: 736px) {
  .storageSwitch {
    display: grid;
    gap: 22px 48px;
    grid-template-columns: .946fr 1fr;
    padding: 52px 78px;
  }
}

@media screen and (max-width: 736px) {
  .storageSwitch {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin: 0 calc(-12 / 390 * 100vw);
    padding: calc(52 / 390 * 100vw) calc(30 / 390 * 100vw);
    row-gap: calc(40 / 390 * 100vw);
  }
}

.storageSwitch:after {
  border: 1px solid #cccccc;
  content: '';
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

@media print, screen and (min-width: 736px) {
  .storageSwitch:after {
    height: calc(100% - 12px);
    width: calc(100% - 12px);
  }
}

@media screen and (max-width: 736px) {
  .storageSwitch:after {
    height: calc(100% - (12 / 390 * 100vw));
    width: calc(100% - (12 / 390 * 100vw));
  }
}

.storageSwitch__figure {
  position: relative;
}

@media print, screen and (min-width: 736px) {
  .storageSwitch__figure {
    grid-row: auto / span 3;
  }
}

@media screen and (max-width: 736px) {
  .storageSwitch__figure {
    width: calc(200 / 390 * 100vw);
  }
}

.storageSwitch__figureItem {
  display: none;
}

.storageSwitch__figureItem.is-active {
  display: block;
}

.storageSwitch__select {
  position: relative;
}

@media screen and (max-width: 736px) {
  .storageSwitch__select {
    width: calc(90 / 390 * 100vw);
  }
}

.storageSwitch__select:before {
  aspect-ratio: 250 / 70;
  background: url("../imgs/img-storage-logo-01.png") no-repeat center/cover;
  content: '';
  display: block;
}

@media print, screen and (min-width: 736px) {
  .storageSwitch__select:before {
    width: 250px;
  }
}

@media screen and (max-width: 736px) {
  .storageSwitch__select:before {
    width: calc(90 / 390 * 100vw);
  }
}

.storageSwitch__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media print, screen and (min-width: 736px) {
  .storageSwitch__list {
    border-bottom: 2px solid #595752;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-top: 40px;
  }
}

@media screen and (max-width: 736px) {
  .storageSwitch__list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(4 / 390 * 100vw);
    margin-top: calc(8 / 390 * 100vw);
  }
}

.storageSwitch__trigger {
  background-color: #ecb378;
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  text-align: left;
  -webkit-transition: background-color .6s ease;
  transition: background-color .6s ease;
  z-index: 1;
}

@media print, screen and (min-width: 736px) {
  .storageSwitch__trigger {
    height: 68px;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 10px;
    width: 120px;
  }
}

@media screen and (max-width: 736px) {
  .storageSwitch__trigger {
    gap: calc(16 / 390 * 100vw);
    height: calc(82 / 390 * 100vw);
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: calc(8 / 390 * 100vw);
    width: calc(90 / 390 * 100vw);
  }
  .storageSwitch__trigger:after {
    background-color: #786d4a;
    -webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%);
            clip-path: polygon(100% 0, 0 50%, 100% 100%);
    content: '';
    height: calc(20 / 390 * 100vw);
    opacity: 0;
    position: absolute;
    right: 100%;
    top: 50%;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
    -webkit-transition: .4s ease;
    transition: .4s ease;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    width: calc(10 / 390 * 100vw);
    z-index: -1;
  }
}

@media print, screen and (min-width: 736px) {
  .storageSwitch__trigger:hover {
    background-color: #786d4a;
  }
}

@media (hover: hover) and (pointer: fine) {
  .storageSwitch__trigger:hover {
    background-color: #786d4a;
  }
}

.storageSwitch__trigger .ttl {
  line-height: 1.2;
}

.storageSwitch__trigger .ttl:before {
  content: '';
  display: block;
  height: 0;
  margin-top: calc((1 - 1.2) * .5em);
  width: 0;
}

.storageSwitch__trigger .ttl:after {
  content: '';
  display: block;
  height: 0;
  margin-bottom: calc((1 - 1.2) * .5em);
  width: 0;
}

@media print, screen and (min-width: 736px) {
  .storageSwitch__trigger .ttl {
    font-size: 13px;
    letter-spacing: 0;
  }
}

@media screen and (max-width: 736px) {
  .storageSwitch__trigger .ttl {
    font-size: calc(11 / 390 * 100vw);
    letter-spacing: -.05em;
  }
}

.storageSwitch__trigger .num {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  line-height: .7;
}

@media print, screen and (min-width: 736px) {
  .storageSwitch__trigger .num {
    font-size: 20px;
  }
}

@media screen and (max-width: 736px) {
  .storageSwitch__trigger .num {
    font-size: calc(16 / 390 * 100vw);
  }
}

@media print, screen and (min-width: 736px) {
  .storageSwitch__trigger .spGuide {
    display: none;
  }
}

@media screen and (max-width: 736px) {
  .storageSwitch__trigger .spGuide {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    bottom: 0;
    color: #ffffff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    font-family: "Roboto", sans-serif;
    font-size: calc(8 / 390 * 100vw);
    font-weight: 700;
    gap: calc(8 / 390 * 100vw);
    height: calc(38 / 390 * 100vw);
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    line-height: .7;
    overflow: hidden;
    padding-bottom: calc(6 / 390 * 100vw);
    position: absolute;
    right: 0;
    width: calc(44 / 390 * 100vw);
    z-index: 1;
  }
  .storageSwitch__trigger .spGuide .arrow {
    width: calc(8 / 390 * 100vw);
  }
  .storageSwitch__trigger .spGuide:after {
    aspect-ratio: 1 / 1;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    content: '';
    left: 0;
    position: absolute;
    top: 0;
    width: calc(62 / 390 * 100vw);
    z-index: -1;
  }
}

.storageSwitch__trigger.is-active {
  background-color: #786d4a;
  pointer-events: none;
}

@media screen and (max-width: 736px) {
  .storageSwitch__trigger.is-active:after {
    opacity: 1;
  }
}

.storageSwitch__cont {
  display: none;
}

.storageSwitch__cont.is-active {
  display: block;
}

.storageCard__head {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media print, screen and (min-width: 736px) {
  .storageCard__head {
    gap: 8px;
  }
}

@media screen and (max-width: 736px) {
  .storageCard__head {
    gap: calc(8 / 390 * 100vw);
  }
}

@media print, screen and (min-width: 736px) {
  .storageCard__head + .storageCard__cont {
    margin-top: 24px;
  }
}

@media screen and (max-width: 736px) {
  .storageCard__head + .storageCard__cont {
    margin-top: calc(16 / 390 * 100vw);
  }
}

.storageCard__num {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  aspect-ratio: 1 / 1;
  background-color: #e4811b;
  border-radius: 50%;
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  letter-spacing: 0;
  line-height: .7;
}

@media print, screen and (min-width: 736px) {
  .storageCard__num {
    font-size: 16px;
    width: 30px;
  }
}

@media screen and (max-width: 736px) {
  .storageCard__num {
    font-size: calc(16 / 390 * 100vw);
    width: calc(30 / 390 * 100vw);
  }
}

.storageCard__heading {
  line-height: 1.8;
  color: #595752;
  letter-spacing: 0;
}

.storageCard__heading:before {
  content: '';
  display: block;
  height: 0;
  margin-top: calc((1 - 1.8) * .5em);
  width: 0;
}

.storageCard__heading:after {
  content: '';
  display: block;
  height: 0;
  margin-bottom: calc((1 - 1.8) * .5em);
  width: 0;
}

@media print, screen and (min-width: 736px) {
  .storageCard__heading {
    font-size: 20px;
  }
}

@media screen and (max-width: 736px) {
  .storageCard__heading {
    font-size: calc(14 / 390 * 100vw);
  }
}

.storageCard__heading .strong {
  color: #e4811b;
}

@media print, screen and (min-width: 736px) {
  .storageCard__cont {
    width: 473px;
  }
}

@media print, screen and (min-width: 736px) {
  .variationSect__head + .variationSect__cont {
    margin-top: 140px;
  }
}

@media screen and (max-width: 736px) {
  .variationSect__head + .variationSect__cont {
    margin-top: calc(60 / 390 * 100vw);
  }
}

@media print, screen and (min-width: 736px) {
  .variationSect__head .sectHeadGroup .svgTtl {
    bottom: -80px;
    left: 66px;
    width: 447px;
  }
}

@media screen and (max-width: 736px) {
  .variationSect__head .sectHeadGroup .svgTtl {
    bottom: calc(-27 / 390 * 100vw);
    left: calc(-17 / 390 * 100vw);
    width: calc(223 / 390 * 100vw);
  }
}

@media print, screen and (min-width: 736px) {
  .variationSect__cont .madoriList {
    display: grid;
    gap: 46px;
    grid-template-columns: repeat(2, 1fr);
    margin: 0 auto;
    width: 992px;
  }
}

@media screen and (max-width: 736px) {
  .variationSect__cont .madoriList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

@media print, screen and (min-width: 736px) {
  .variationSect__note {
    margin: 32px auto 0;
    width: 992px;
  }
}

@media screen and (max-width: 736px) {
  .variationSect__note {
    margin-top: calc(24 / 390 * 100vw);
  }
}

@media print, screen and (min-width: 736px) {
  .roomplan-bigplanning {
    padding: 80px 0 140px;
  }
}

@media screen and (max-width: 736px) {
  .roomplan-bigplanning {
    padding: calc(60 / 390 * 100vw) 0 calc(100 / 390 * 100vw);
  }
}

@media print, screen and (min-width: 736px) {
  .roomplan-storage {
    padding-bottom: 140px;
  }
}

@media screen and (max-width: 736px) {
  .roomplan-storage {
    padding-bottom: calc(100 / 390 * 100vw);
  }
}

@media print, screen and (min-width: 736px) {
  .roomplan-variation {
    padding-bottom: 140px;
  }
}

@media screen and (max-width: 736px) {
  .roomplan-variation {
    padding-bottom: calc(100 / 390 * 100vw);
  }
}

@media print, screen and (min-width: 736px) {
  .roomplan-garden {
    padding-bottom: 140px;
  }
}

@media screen and (max-width: 736px) {
  .roomplan-garden {
    padding-bottom: calc(100 / 390 * 100vw);
  }
}