@charset "UTF-8";
/* CSS Document */
.pre-inc figure img {
  width: 100%;
  height: auto;
}
.pre-inc .footnote {
  padding: 0.5em;
  color: #fff;
  font-size: min(2svw, 10px);
  font-weight: 500;
  line-height: normal;
}
.pre-inc .design #main {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: unset;
  background-color: #fff;
  width: 100%;
}
.pre-inc .design #main .mv {
  position: relative;
  width: 100%;
  z-index: 1;
}
.pre-inc .design #main .mv .mv-img {
  -o-object-position: 65% center;
     object-position: 65% center;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .mv .mv-img {
    -o-object-position: unset;
       object-position: unset;
    -o-object-fit: contain;
       object-fit: contain;
    height: auto;
  }
}
.pre-inc .design #main .mv figcaption.footnote {
  position: absolute;
  bottom: 1em;
  left: 2em;
  color: #1A1311;
  font-size: min(2svw, 10px);
}
.pre-inc .design #main .mv-ttl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2em;
  margin-top: -2em;
  font-size: min(3.2svw, 16px);
  z-index: 2;
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .mv-ttl {
    margin-top: -2.5em;
  }
}
.pre-inc .design #main .mv-ttl .main-title {
  position: relative;
  gap: unset;
  padding: unset;
  background: unset !important;
  width: 30%;
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .mv-ttl .main-title {
    width: 50%;
  }
}
.pre-inc .design #main .mv-ttl-txt {
  writing-mode: vertical-rl;
  color: #A9976D;
  font-size: min(3.6svw, 18px);
  line-height: 2;
  text-align: left;
  letter-spacing: 0.5em;
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .mv-ttl-txt {
    line-height: 2.6;
  }
}
.pre-inc .design #main .mv-ttl-txt .ttl-txt-s {
  display: inline-block;
  transform: translate(0.25em, -0.5em);
  letter-spacing: 0.5em;
}
.pre-inc .design #main .cat-title {
  margin: 0 auto 0 12svw;
  width: -moz-fit-content;
  width: fit-content;
  color: rgba(14, 0, 0, 0.3);
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-size: min(5svw, 32px);
  font-weight: bold;
  letter-spacing: 0.05em;
  line-height: 2;
}
.pre-inc .design #main .cat-title.reverse {
  margin: 0 12svw 0 auto;
}
.pre-inc .design #main .cat-title.header-underline {
  transform: translateX(3.75svw);
  margin: unset;
  padding: 0 0 0 8.25svw;
  border-bottom: 1px solid #A9976D;
}
.pre-inc .design #main .cat-title.header-underline.reverse {
  transform: translateX(-3.75svw);
  padding: 0 8.25svw 0 0;
}
.pre-inc .design #main .sub-title {
  position: relative;
  padding-bottom: 0.75em;
  width: -moz-fit-content;
  width: fit-content;
  color: #A9976D;
  font-size: min(3.6svw, 18px);
  line-height: 1;
  letter-spacing: 0.2em;
}
.pre-inc .design #main .sub-title.header-underline {
  transform: translateX(3.75svw);
  padding: 0 0 0.75em 8.25svw;
  border-bottom: 1px solid #A9976D;
}
.pre-inc .design #main .sub-title.header-underline.reverse {
  margin-left: auto;
  transform: translateX(-3.75svw);
  padding: 0 8.25svw 0.75em 0;
}
.pre-inc .design #main .strong-set {
  padding: 1em;
  border: 1px solid #a8976d;
  background-color: #e9e6e0;
  font-size: min(3.2svw, 16px);
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .strong-set {
    padding: 2em;
  }
}
.pre-inc .design #main .text {
  color: #1A1311;
  font-size: min(2.8svw, 14px);
  line-height: 2;
}
.pre-inc .design #main .text.lead {
  color: #A9976D;
  font-size: min(3.8svw, 20px);
  letter-spacing: 0.2em;
}
.pre-inc .design #main .sec01 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1em;
  margin-top: 2em;
  width: 100%;
  height: 100%;
  font-size: min(3.2svw, 16px);
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec01 {
    margin-top: 5em;
  }
}
.pre-inc .design #main .sec01-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  font-size: min(3.2svw, 16px);
}
.pre-inc .design #main .sec01 .cat00 {
  position: relative;
  padding: 4em 0;
  background-color: #fff;
  width: 100%;
  z-index: 1;
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec01 .cat00 {
    padding: 6em 0;
  }
}
.pre-inc .design #main .sec01 .cat00 .cat00-txt {
  text-align: center;
}
.pre-inc .design #main .sec01 .cat01 {
  position: relative;
  padding-block: 3em;
  background: url("../images/design/bg-sec01-cat01.webp") no-repeat 0 0/cover transparent;
  width: 100%;
  font-size: min(3.2svw, 16px);
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec01 .cat01 {
    padding-block: 6em;
  }
}
.pre-inc .design #main .sec01 .cat01::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 3.75svw;
  margin-left: auto;
  border-left: 1px solid #A9976D;
  width: 96.25svw;
  height: 100%;
  z-index: 0;
}
.pre-inc .design #main .sec01 .cat01-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 4em;
  margin: 2em 0 0 calc(3.75svw + 1px);
  padding: 0 3.75svw;
  max-width: unset;
  font-size: min(3.2svw, 16px);
}
@media screen and (min-width: 769px), print {
  .pre-inc .design #main .sec01 .cat01-wrapper {
    gap: 5em 2em;
  }
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec01 .cat01-wrapper {
    flex-direction: unset;
    align-items: end;
    margin: 2em auto 0;
    padding: unset;
    max-width: calc(100% - 2 * (3.75svw + 1px));
    min-width: calc(1024px - 2 * (3.75svw + 1px));
  }
}
@media screen and (min-width: 1280px), print {
  .pre-inc .design #main .sec01 .cat01-wrapper {
    flex-direction: unset;
    max-width: calc(1280px - 2 * (3.75svw + 1px));
    max-width: 1280px;
  }
}
.pre-inc .design #main .sec01 .cat01L {
  flex: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: unset;
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec01 .cat01L {
    width: 100%;
  }
}
.pre-inc .design #main .sec01 .cat01L .photo {
  line-height: 0;
}
.pre-inc .design #main .sec01 .cat01L .photo figcaption.footnote {
  position: absolute;
  top: 100%;
  left: 0;
  margin-left: 2em;
  padding: unset;
  color: #1A1311;
  line-height: 2;
}
.pre-inc .design #main .sec01 .cat01R {
  flex: 4;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pre-inc .design #main .sec01 .cat01R-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2em;
  margin-inline: auto;
  max-width: 90svw;
  width: 100%;
  font-size: min(3.2svw, 16px);
}
@media screen and (min-width: 769px), print {
  .pre-inc .design #main .sec01 .cat01R-inner {
    gap: 3em;
    margin-inline: auto;
  }
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec01 .cat01R-inner {
    gap: 1.5em;
    margin-left: 0;
  }
}
@media screen and (min-width: 1280px), print {
  .pre-inc .design #main .sec01 .cat01R-inner {
    gap: 4em;
    margin-left: 0;
  }
}
.pre-inc .design #main .sec01 .cat01R-inner > .lead {
  font-size: min(4.2svw, 24px);
  letter-spacing: 0.1em;
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec01 .cat01R-inner > .lead {
    transform-origin: left center;
    transform: scaleX(0.8);
    width: 125%;
    letter-spacing: 0.2em;
  }
}
@media screen and (min-width: 1280px), print {
  .pre-inc .design #main .sec01 .cat01R-inner > .lead {
    transform: none;
    letter-spacing: 0.2em;
  }
}
.pre-inc .design #main .sec01 .cat01R-inner-block {
  width: 100%;
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec01 .cat01R-inner-block {
    padding-right: 5%;
  }
}
@media screen and (min-width: 1280px), print {
  .pre-inc .design #main .sec01 .cat01R-inner-block {
    padding-right: 5%;
  }
}
.pre-inc .design #main .sec01 .cat01R-inner-block > .text {
  line-height: 2;
}
.pre-inc .design #main .sec01 .cat01R-inner-block-strong {
  position: relative;
  margin-top: 2em;
  font-size: min(3.2svw, 16px);
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec01 .cat01R-inner-block-strong {
    margin-top: 5em;
  }
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec01 .cat01R-inner-block-strong {
    margin-top: 2em;
  }
}
@media screen and (min-width: 1280px), print {
  .pre-inc .design #main .sec01 .cat01R-inner-block-strong {
    margin-top: 4em;
  }
}
.pre-inc .design #main .sec01 .cat01R-inner-block-strong-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  justify-content: center;
  gap: 1em;
  font-size: min(3.2svw, 16px);
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec01 .cat01R-inner-block-strong-box {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-columns: repeat(3, 1fr);
  }
}
.pre-inc .design #main .sec01 .cat01R-inner-block-strong-box figure .footnote {
  color: #1A1311;
  text-align: right;
}
.pre-inc .design #main .sec01 .cat01R-inner-block-strong .lead {
  margin-top: 1em;
  line-height: 1.4;
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec01 .cat01R-inner-block-strong .lead {
    transform-origin: left center;
    transform: scaleX(0.8);
    width: 125%;
  }
}
@media screen and (min-width: 1280px), print {
  .pre-inc .design #main .sec01 .cat01R-inner-block-strong .lead {
    transform: none;
  }
}
.pre-inc .design #main .sec01 .cat01R-inner-block-strong .lead ~ .text {
  margin-top: 1em;
  line-height: 1.6;
}
.pre-inc .design #main .sec01 .cat02 {
  position: relative;
  width: 100%;
  font-size: min(3.2svw, 16px);
}
.pre-inc .design #main .sec01 .cat02::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 3.75svw;
  margin-left: auto;
  border-left: 1px solid #A9976D;
  width: 96.25svw;
  height: 100%;
  z-index: 0;
}
.pre-inc .design #main .sec01 .cat02-inner {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 2em;
  margin: 3em 0 0 calc(3.75svw + 1px);
  padding-inline: 3.75svw;
}
@media screen and (min-width: 769px), print {
  .pre-inc .design #main .sec01 .cat02-inner {
    padding: 0 1.875svw 0 3.75svw;
    padding: 0 3.75svw;
  }
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec01 .cat02-inner {
    flex-direction: row;
    gap: unset;
    margin: 3em 0 0 calc(3.75svw + 1px);
    margin: 3em auto 0;
    width: calc(100% - 2 * (3.75svw + 1px));
  }
}
@media screen and (min-width: 1280px), print {
  .pre-inc .design #main .sec01 .cat02-inner {
    flex-direction: row;
    gap: unset;
    margin: 3em auto 0;
    padding: unset;
    padding: 0 1.875svw 0 3.75svw;
    max-width: calc(1280px - 2 * (3.75svw + 1px));
    max-width: 1280px;
    width: calc(1280px - 2 * (3.75svw + 1px));
    width: calc(100% - 2 * (3.75svw + 1px));
  }
}
.pre-inc .design #main .sec01 .cat02-inner > figure {
  width: 100%;
}
.pre-inc .design #main .sec01 .cat02-inner > figure figcaption {
  position: absolute;
  bottom: 0;
  right: 0;
}
.pre-inc .design #main .sec01 .cat02L {
  flex: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  width: 100%;
  font-size: min(3.2svw, 16px);
}
@media screen and (min-width: 769px), print {
  .pre-inc .design #main .sec01 .cat02L {
    margin-inline: auto;
    width: 80%;
  }
}
.pre-inc .design #main .sec01 .cat02L-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2em;
  width: 100%;
  font-size: min(3.2svw, 16px);
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec01 .cat02L-inner {
    margin-left: unset;
    width: unset;
  }
}
.pre-inc .design #main .sec01 .cat02R {
  flex: 7;
  width: 100%;
}
.pre-inc .design #main .sec01 .cat02R .photo {
  line-height: 0;
}
.pre-inc .design #main .sec01 .cat02R .photo figcaption {
  position: absolute;
  bottom: 12%;
  right: 17%;
  color: #1A1311;
}
.pre-inc .design #main .sec02 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4em;
  padding-block: 4em;
  background-color: #F8F8F8;
  width: 100%;
  height: 100%;
  font-size: min(3.2svw, 16px);
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec02 {
    gap: 6em;
    padding-block: 8em;
  }
}
.pre-inc .design #main .sec02-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  font-size: min(3.2svw, 16px);
}
.pre-inc .design #main .sec02-inner::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 3.75svw;
  margin-right: auto;
  border-right: 1px solid #A9976D;
  width: 96.25svw;
  height: 100%;
  z-index: 0;
}
.pre-inc .design #main .sec02 .cat01 {
  position: relative;
  margin: unset;
  width: 100%;
  font-size: min(3.2svw, 16px);
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec02 .cat01 {
    margin: unset;
  }
}
.pre-inc .design #main .sec02 .cat01-slider {
  position: relative;
  margin: 14em calc(3.75svw + 1px) 0;
  padding: 0 3.75svw 0 0;
  background-color: transparent;
  opacity: 0;
  transition: opacity 0.3s ease-in-out 0s;
}
@media screen and (min-width: 769px), print {
  .pre-inc .design #main .sec02 .cat01-slider {
    margin: 2em calc(3.75svw + 1px) 0;
    padding: 0 3.75svw 0 1.875svw;
  }
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec02 .cat01-slider {
    margin: 2em auto 0;
    width: calc(100% - 2 * (3.75svw + 1px));
  }
}
@media screen and (min-width: 1280px), print {
  .pre-inc .design #main .sec02 .cat01-slider {
    margin: 2em auto 0;
    max-width: 1280px;
    width: calc(100% - 2 * (3.75svw + 1px));
  }
}
.pre-inc .design #main .sec02 .cat01-slider .container-txt {
  position: absolute;
  top: -44%;
  left: 35%;
  font-size: min(3.6svw, 18px);
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec02 .cat01-slider .container-txt {
    top: -18%;
    left: 24%;
  }
}
.pre-inc .design #main .sec02 .cat01-slider .visual-wrapper {
  overflow: hidden;
  position: absolute;
  top: 7.6%;
  left: 0;
  width: 8em;
  height: 400px;
  height: 100%;
  font-size: min(3.6svw, 18px);
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec02 .cat01-slider .visual-wrapper {
    top: 42%;
    width: 4em;
  }
}
.pre-inc .design #main .sec02 .cat01-slider-txt {
  position: relative;
  color: #A9976D;
  font-size: min(3.6svw, 18px);
  line-height: 2;
  letter-spacing: 0.5em;
  writing-mode: vertical-rl;
  z-index: 0;
}
.pre-inc .design #main .sec02 .cat01-slider-txt.white {
  position: unset;
  top: -7%;
  color: #fff;
  z-index: 2;
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec02 .cat01-slider-txt.white {
    position: absolute;
    top: -28%;
    top: -41%;
  }
}
.pre-inc .design #main .sec02 .cat01-slider.slider-initialized {
  opacity: 1;
}
.pre-inc .design #main .sec02 .cat01-slider-screen {
  position: relative;
  margin-inline: auto;
  background-color: transparent;
  width: 100%;
  z-index: 1;
}
.pre-inc .design #main .sec02 .cat01-slider-screen .slider-item {
  position: relative;
  transition: transform 0.6s ease-in-out;
  transform: scale(0.8);
  cursor: pointer;
  background-color: #fff;
  background-color: transparent;
}
.pre-inc .design #main .sec02 .cat01-slider-screen .slider-item .photo .cat01-slider-ttl {
  bottom: 1em;
  bottom: 100%;
  left: 0;
  padding: 0.25em;
  color: rgba(26, 19, 17, 0.4);
  font-size: min(5svw, 32px);
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec02 .cat01-slider-screen .slider-item .photo .cat01-slider-ttl {
    position: absolute;
    bottom: 0;
  }
}
.pre-inc .design #main .sec02 .cat01-slider-screen .slider-item .photo .footnote {
  color: #1A1311;
  text-align: right;
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec02 .cat01-slider-screen .slider-item .photo .footnote {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
.pre-inc .design #main .sec02 .cat01-slider-screen .slider-item[data-slide=color-reverse] figure .cat01-slider-ttl {
  color: rgba(26, 19, 17, 0.4);
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec02 .cat01-slider-screen .slider-item[data-slide=color-reverse] figure .cat01-slider-ttl {
    color: rgba(255, 255, 255, 0.4);
  }
}
.pre-inc .design #main .sec02 .cat01-slider-screen .slider-item[data-slide=color-reverse] figure .footnote {
  color: #1A1311;
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec02 .cat01-slider-screen .slider-item[data-slide=color-reverse] figure .footnote {
    color: #fff;
  }
}
.pre-inc .design #main .sec02 .cat01-slider-screen .slider-item.slick-current {
  transform: scale(1) translateX(0%);
}
.pre-inc .design #main .sec02 .cat01-slider-screen .slider-item.roop-fix {
  transform: scale(1) translateX(0%);
}
.pre-inc .design #main .sec02 .cat01-slider-screen-button {
  display: flex;
  justify-content: flex-end;
  margin-top: 2.7071067812em;
  margin-top: 10svw;
  gap: 2em;
  width: 100%;
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec02 .cat01-slider-screen-button {
    margin-top: 4svw;
  }
}
.pre-inc .design #main .sec02 .cat01-slider-screen-button-prev {
  border-top: 2px solid #A9976D;
  border-left: 2px solid #A9976D;
  width: 1em;
  height: 1em;
  transform: rotate(-45deg) translate(0.7071067812em);
  cursor: pointer;
}
.pre-inc .design #main .sec02 .cat01-slider-screen-button-next {
  border-top: 2px solid #A9976D;
  border-right: 2px solid #A9976D;
  width: 1em;
  height: 1em;
  transform: rotate(45deg) translateX(-0.7071067812em);
  cursor: pointer;
}
.pre-inc .design #main .sec02 .cat01-slider #carousel-indicator {
  margin-top: 5svw;
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec02 .cat01-slider #carousel-indicator {
    margin-top: 3svw;
  }
}
.pre-inc .design #main .sec02 .cat01-slider-indicator {
  display: flex;
  border-radius: 9999px;
  background-color: #d9d7d7;
}
.pre-inc .design #main .sec02 .cat01-slider-indicator li {
  border-radius: 9999px;
  background-color: #d9d7d7;
  width: 33.3333333333%;
  height: 0.5em;
  font-size: min(3.2svw, 16px);
  cursor: pointer;
}
.pre-inc .design #main .sec02 .cat01-slider-indicator li.slick-active {
  background-color: #A9976D;
}
.pre-inc .design #main .sec02 .cat01-slider-indicator li button {
  display: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  padding: 0;
  border: none;
  background-color: transparent;
}
.pre-inc .design #main .sec02 .cat02 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2em;
  margin: 2em calc(3.75svw + 1px) 0;
  max-width: 1280px;
  width: 100%;
  font-size: min(3.2svw, 16px);
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec02 .cat02 {
    gap: 4em;
    margin-inline: auto;
    padding: 0 3.75svw 0 1.875svw;
    width: calc(100% - 2 * (3.75svw + 1px));
  }
}
@media screen and (min-width: 1280px), print {
  .pre-inc .design #main .sec02 .cat02 {
    margin-inline: auto;
    padding: 0 3.75svw 0 1.875svw;
    max-width: 1280px;
    width: calc(100% - 2 * (3.75svw + 1px));
  }
}
.pre-inc .design #main .sec02 .cat02-block01 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0 calc(7.5svw + 1px) 0 3.75svw;
  gap: 2em;
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec02 .cat02-block01 {
    flex-direction: unset;
    margin: unset;
    gap: 2em;
  }
}
@media screen and (min-width: 1280px), print {
  .pre-inc .design #main .sec02 .cat02-block01 {
    gap: 4em;
  }
}
.pre-inc .design #main .sec02 .cat02-block01L {
  font-size: min(3.2svw, 16px);
}
.pre-inc .design #main .sec02 .cat02-block01R {
  flex: 7;
}
.pre-inc .design #main .sec02 .cat02-block02 {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  gap: 3.75svw;
  margin: 0 calc(7.5svw + 1px) 0 3.75svw;
}
@media screen and (min-width: 769px), print {
  .pre-inc .design #main .sec02 .cat02-block02 {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec02 .cat02-block02 {
    grid-template-columns: 8fr 8fr 9fr;
    gap: 1em;
    margin: unset;
  }
}
.pre-inc .design #main .sec02 .cat02-block02-item {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-columns: 1fr 1fr;
  grid-row: span 3;
  gap: 0.5em;
  padding: 1em;
  border: 1px solid #A9976D;
  background-color: #e9e6e0;
  font-size: min(3.2svw, 16px);
}
@media screen and (min-width: 769px), print {
  .pre-inc .design #main .sec02 .cat02-block02-item {
    gap: 1em;
    padding: 1em;
  }
}
.pre-inc .design #main .sec02 .cat02-block02-item-ttl {
  grid-column: span 2;
  display: flex;
  align-items: center;
  padding-bottom: 0.25em;
  border-bottom: 1px solid #A9976D;
  color: #A9976D;
  font-size: min(3.6svw, 18px);
  line-height: 1.6;
}
.pre-inc .design #main .sec02 .cat02-block02-item-box {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5em;
  font-size: min(3.2svw, 16px);
  gap: 1em;
}
.pre-inc .design #main .sec02 .cat02-block02-item-boxL {
  flex: 5;
  line-height: 1.6;
  font-size: min(2.6svw, 13px);
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec02 .cat02-block02-item-boxL {
    flex: 1;
  }
}
.pre-inc .design #main .sec02 .cat02-block02-item-boxR {
  grid-row: span 1;
}
@media screen and (min-width: 769px), print {
  .pre-inc .design #main .sec02 .cat02-block02-item-boxR {
    grid-row: span 2;
  }
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec02 .cat02-block02-item-boxR {
    grid-row: span 1;
  }
}
.pre-inc .design #main .sec02 .cat02-block02-item-boxR .photo .footnote {
  color: #1A1311;
  text-align: right;
}
.pre-inc .design #main .sec02 .cat02-block02-item-end {
  grid-column: span 2;
  margin-left: 1em;
  text-indent: -1em;
  font-size: min(2svw, 10px);
}
@media screen and (min-width: 769px), print {
  .pre-inc .design #main .sec02 .cat02-block02-item-end {
    grid-column: span 1;
  }
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec02 .cat02-block02-item-end {
    grid-column: span 2;
  }
}
.pre-inc .design #main .sec02 .cat02-block02-item:last-child {
  background-color: #dcdddd;
}
.pre-inc .design #main .sec02 .cat02-block02-item:last-child .cat02-block02-item-ttl {
  border-bottom: unset;
}
.pre-inc .design #main .sec02 .cat02-block02-item:last-child .cat02-block02-item-ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: 0.125em;
  background-color: #A9976D;
  color: #fff;
  line-height: 1.6;
  text-align: center;
}
.pre-inc .design #main .sec02 .cat03 {
  position: relative;
  padding-top: 6em;
  width: 100%;
  font-size: min(3.2svw, 16px);
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec02 .cat03 {
    margin: unset;
    padding-top: 8em;
  }
}
.pre-inc .design #main .sec02 .cat04 {
  position: relative;
  display: grid;
  grid-auto-flow: row dense;
  grid-template-columns: 1fr;
  gap: 2em 1em;
  margin: 2em calc(3.75svw + 1px) 2em 3.75svw;
  width: calc(100% - (7.5svw + 1px));
  font-size: min(3.2svw, 16px);
}
@media screen and (min-width: 769px), print {
  .pre-inc .design #main .sec02 .cat04 {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    margin: 4em 0 0;
    margin: 4em auto 0;
    width: 88.25svw;
    padding: 0 3.75svw 0 0;
    width: calc(100% - 2 * (3.75svw + 1px));
  }
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec02 .cat04 {
    padding: 0 3.75svw 0 1.875svw;
  }
}
@media screen and (min-width: 1280px), print {
  .pre-inc .design #main .sec02 .cat04 {
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    grid-template-columns: 1fr 1fr;
    margin: 4em 0 0;
    margin: 4em auto 0;
    max-width: 1280px;
    width: 100%;
    width: calc(100% - 2 * (3.75svw + 1px));
  }
}
.pre-inc .design #main .sec02 .cat04 .block01 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 1em;
  padding-right: 3.75svw;
  width: 100%;
  font-size: min(3.2svw, 16px);
}
@media screen and (min-width: 769px), print {
  .pre-inc .design #main .sec02 .cat04 .block01 {
    margin-top: 2em;
    padding: unset;
  }
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec02 .cat04 .block01 {
    margin-top: 2em;
    padding: unset;
  }
}
@media screen and (min-width: 1280px), print {
  .pre-inc .design #main .sec02 .cat04 .block01 {
    padding-inline: 1em;
  }
}
.pre-inc .design #main .sec02 .cat04 .block01 .pickup {
  content: "";
  position: absolute;
  top: -3%;
  right: 6%;
  max-width: 35svw;
  width: 100%;
}
@media screen and (min-width: 769px), print {
  .pre-inc .design #main .sec02 .cat04 .block01 .pickup {
    max-width: 20svw;
    right: 4%;
  }
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec02 .cat04 .block01 .pickup {
    max-width: 200px;
    right: 4%;
  }
}
.pre-inc .design #main .sec02 .cat04 .block02 {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-right: 3.75svw;
  width: 100%;
  font-size: min(3.2svw, 16px);
}
@media screen and (min-width: 769px), print {
  .pre-inc .design #main .sec02 .cat04 .block02 {
    padding: 0 0 0 2em;
  }
}
.pre-inc .design #main .sec02 .cat04 .block02-txt {
  margin-top: 2em;
  width: 100%;
}
.pre-inc .design #main .sec02 .cat04 .block02-txt .text {
  text-align: left;
}
.pre-inc .design #main .sec02 .cat04 .block02-lists {
  display: flex;
  flex-direction: column;
  gap: 2em;
  margin-top: 2em;
  width: 100%;
}
@media screen and (min-width: 1024px), print {
  .pre-inc .design #main .sec02 .cat04 .block02-lists {
    margin-top: 4em;
  }
}
.pre-inc .design #main .sec02 .cat04 .block02-lists .list-item {
  font-size: min(3.2svw, 16px);
}
.pre-inc .design #main .sec02 .cat04 .block02-lists .list-item .list-ttl {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 0.25em;
  border-bottom: 1px solid #A9976D;
  color: #A9976D;
  font-size: min(4.2svw, 24px);
  letter-spacing: 0.1em;
}
.pre-inc .design #main .sec02 .cat04 .block02-lists .list-item .list-ttl::before {
  content: attr(data-label) "";
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.5em;
  padding: 0.125em;
  background-color: #A9976D;
  width: 1em;
  height: 1em;
  color: #fff;
  font-size: min(4.2svw, 24px);
}
.pre-inc .design #main .sec02 .cat04 .block02-lists .list-item .list-txt {
  margin-top: 0.5em;
  color: #1A1311;
}
.pre-inc .design #main .sec02 .cat04 .block02-lists .list-item .footnote {
  margin-top: 1em;
  padding: unset;
  color: #1A1311;
}
.pre-inc .design #main .sec02 .cat04 .block03,
.pre-inc .design #main .sec02 .cat04 .block04,
.pre-inc .design #main .sec02 .cat04 .block05 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  margin-right: 3.75svw;
  margin: 0 3.75svw 0 0;
  padding: 1em;
  border: 1px solid #A9976D;
  background-color: #e9e6e0;
}
@media screen and (min-width: 769px), print {
  .pre-inc .design #main .sec02 .cat04 .block03,
  .pre-inc .design #main .sec02 .cat04 .block04,
  .pre-inc .design #main .sec02 .cat04 .block05 {
    margin: unset;
    padding: 2em;
  }
}
.pre-inc .design #main .sec02 .cat04 .block03L,
.pre-inc .design #main .sec02 .cat04 .block04L,
.pre-inc .design #main .sec02 .cat04 .block05L {
  flex: 5;
}
.pre-inc .design #main .sec02 .cat04 .block03L .list-ttl,
.pre-inc .design #main .sec02 .cat04 .block04L .list-ttl,
.pre-inc .design #main .sec02 .cat04 .block05L .list-ttl {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 0.25em;
  border-bottom: 1px solid #A9976D;
  color: #A9976D;
  font-size: min(4.2svw, 24px);
  letter-spacing: 0.1em;
}
.pre-inc .design #main .sec02 .cat04 .block03L .list-ttl::before,
.pre-inc .design #main .sec02 .cat04 .block04L .list-ttl::before,
.pre-inc .design #main .sec02 .cat04 .block05L .list-ttl::before {
  content: attr(data-label) "";
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.5em;
  padding: 0.125em;
  background-color: #A9976D;
  width: 1em;
  height: 1em;
  color: #fff;
  font-size: min(4.2svw, 24px);
}
.pre-inc .design #main .sec02 .cat04 .block03L .list-txt,
.pre-inc .design #main .sec02 .cat04 .block04L .list-txt,
.pre-inc .design #main .sec02 .cat04 .block05L .list-txt {
  margin-top: 0.5em;
  color: #1A1311;
}
.pre-inc .design #main .sec02 .cat04 .block03L .footnote,
.pre-inc .design #main .sec02 .cat04 .block04L .footnote,
.pre-inc .design #main .sec02 .cat04 .block05L .footnote {
  margin-top: 1em;
  padding: unset;
  color: #1A1311;
  line-height: 1.6;
}
.pre-inc .design #main .sec02 .cat04 .block03R,
.pre-inc .design #main .sec02 .cat04 .block04R,
.pre-inc .design #main .sec02 .cat04 .block05R {
  flex: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pre-inc .design #main .sec02 .cat04 .block03R .photo,
.pre-inc .design #main .sec02 .cat04 .block04R .photo,
.pre-inc .design #main .sec02 .cat04 .block05R .photo {
  max-width: 200px;
}
.pre-inc .design #main .sec02 .cat04 .block03R .photo .footnote,
.pre-inc .design #main .sec02 .cat04 .block04R .photo .footnote,
.pre-inc .design #main .sec02 .cat04 .block05R .photo .footnote {
  color: #1A1311;
  text-align: right;
}
.pre-inc .design #main .sec02 .cat04 .block03 {
  align-self: end;
}
.pre-inc .design #main .sec02 .cat04 .block03R figure {
  max-width: 300px;
}
.pre-inc .design #main .sec02 .cat04 .block04 {
  background-color: #dcdddd;
}
.pre-inc .design #main .sec02 .cat04 .block04R .photo {
  display: flex;
  justify-content: center;
  max-width: 300px;
}
.pre-inc .design #main .sec02 .cat04 .block04R .photo::after {
  content: "参考写真";
  position: absolute;
  top: 100%;
  right: 0;
  color: #1A1311;
  font-size: min(2svw, 10px);
  font-weight: 500;
}
.pre-inc .design #main .sec02 .cat04 .block04R .photo .image {
  width: 80%;
}
.pre-inc .design #main .sec02 .cat04 .block05 {
  align-items: stretch;
  background-color: #dcdddd;
}
.pre-inc .design #main .sec02 .cat04 .block05R .photo {
  max-width: 300px;
}/*# sourceMappingURL=design.css.map */