@charset "UTF-8";
body #contents #main #mainView {
  display: block;
  background-image: url(../img/design/main.jpg); }
  body #contents #main #mainView > h2 {
    background-image: url(../img/design/main-logo.png);
    padding: 85px 0; }
body #contents #main article.bg-gray_color p.design-lead-txt, body #contents #main article.bg-gray_color .design-contents-list-ttl, body #contents #main section.bg-gray_color p.design-lead-txt, body #contents #main section.bg-gray_color .design-contents-list-ttl {
  color: #fffddd; }
body #contents #main article.bg-white_color p.design-lead-txt, body #contents #main article.bg-white_color .design-contents-list-ttl, body #contents #main section.bg-white_color p.design-lead-txt, body #contents #main section.bg-white_color .design-contents-list-ttl {
  color: #98893e; }
body #contents #main article .content-detail, body #contents #main section .content-detail {
  padding: 60px 0 90px; }
  body #contents #main article .content-detail.pb60, body #contents #main section .content-detail.pb60 {
    padding-bottom: 60px; }
  body #contents #main article .content-detail.pb20, body #contents #main section .content-detail.pb20 {
    padding-bottom: 20px; }
  body #contents #main article .content-detail.pt0, body #contents #main section .content-detail.pt0 {
    padding-top: 0; }
  body #contents #main article .content-detail figure.design-lead-img, body #contents #main section .content-detail figure.design-lead-img {
    width: 100vw;
    margin: 0 calc(50% - 50vw) 40px; }
  body #contents #main article .content-detail figure.stickey-img, body #contents #main section .content-detail figure.stickey-img {
    width: 130px;
    position: absolute;
    left: 1%;
    top: -300px; }
    body #contents #main article .content-detail figure.stickey-img-over, body #contents #main section .content-detail figure.stickey-img-over {
      z-index: 99;
      position: relative; }
  body #contents #main article .content-detail figure.innerdesign-lead-img, body #contents #main section .content-detail figure.innerdesign-lead-img {
    margin: 55px auto 88px; }
  body #contents #main article .content-detail p.main-lead, body #contents #main section .content-detail p.main-lead {
    font-size: 24px;
    line-height: 42px;
    letter-spacing: 0.1em; }
  body #contents #main article .content-detail p.design-lead-txt, body #contents #main section .content-detail p.design-lead-txt {
    font-size: 22px;
    line-height: 38px;
    letter-spacing: 0.05em;
    text-align: left;
    padding: 0 0 20px; }
  body #contents #main article .content-detail h2, body #contents #main section .content-detail h2 {
    padding: 35px 0;
    width: 100vw;
    margin: 0 calc(50% - 50vw) 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    border-bottom: 1px solid #7f8080; }
    body #contents #main article .content-detail h2 > span, body #contents #main section .content-detail h2 > span {
      display: none; }
    body #contents #main article .content-detail h2.ttl01, body #contents #main section .content-detail h2.ttl01 {
      background-image: url(../img/design/design-h2-ttl01.png); }
    body #contents #main article .content-detail h2.ttl02, body #contents #main section .content-detail h2.ttl02 {
      background-image: url(../img/design/design-h2-ttl02.png); }
    body #contents #main article .content-detail h2.ttl03, body #contents #main section .content-detail h2.ttl03 {
      background-image: url(../img/design/design-h2-ttl03.png); }
  body #contents #main article .content-detail h3, body #contents #main section .content-detail h3 {
    padding: 24px 0;
    margin-bottom: 20px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center; }
    body #contents #main article .content-detail h3 > span, body #contents #main section .content-detail h3 > span {
      display: none; }
    body #contents #main article .content-detail h3.ttl01, body #contents #main section .content-detail h3.ttl01 {
      background-image: url(../img/design/design-h3-ttl01.png), linear-gradient(90deg, #7f7784, #918b97 50%, #7f7784); }
    body #contents #main article .content-detail h3.ttl02, body #contents #main section .content-detail h3.ttl02 {
      background-image: url(../img/design/design-h3-ttl02.png), linear-gradient(90deg, #7f7784, #918b97 50%, #7f7784); }
    body #contents #main article .content-detail h3.ttl03, body #contents #main section .content-detail h3.ttl03 {
      background-image: url(../img/design/design-h3-ttl03.png), linear-gradient(90deg, #7f7784, #918b97 50%, #7f7784); }
  body #contents #main article .content-detail .design-contents-list > dl > dt > p, body #contents #main section .content-detail .design-contents-list > dl > dt > p {
    padding-top: 10px;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.08em; }
    body #contents #main article .content-detail .design-contents-list > dl > dt > p > span, body #contents #main section .content-detail .design-contents-list > dl > dt > p > span {
      font-size: 12px;
      line-height: 22px;
      letter-spacing: 0.08em; }
  body #contents #main article .content-detail .design-contents-list > dl > dd > p, body #contents #main section .content-detail .design-contents-list > dl > dd > p {
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0.15em; }
  body #contents #main article .content-detail .design-plant-grid, body #contents #main section .content-detail .design-plant-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 5px 17px; }
    body #contents #main article .content-detail .design-plant-grid > p, body #contents #main section .content-detail .design-plant-grid > p {
      grid-column: 1 / 7;
      text-align: right;
      font-size: 12px;
      letter-spacing: 0.01em; }
  body #contents #main article .content-detail .interiordesign-box, body #contents #main section .content-detail .interiordesign-box {
    margin-bottom: 70px; }
    body #contents #main article .content-detail .interiordesign-box-h4, body #contents #main section .content-detail .interiordesign-box-h4 {
      width: 100%;
      display: flex;
      flex-wrap: no-wrap;
      justify-content: space-between;
      align-items: flex-end;
      border-bottom: solid 7px #a89885;
      padding: 0 0 5px;
      margin-bottom: 10px; }
      body #contents #main article .content-detail .interiordesign-box-h4 > dt, body #contents #main section .content-detail .interiordesign-box-h4 > dt {
        width: 270px; }
      body #contents #main article .content-detail .interiordesign-box-h4 > dd, body #contents #main section .content-detail .interiordesign-box-h4 > dd {
        width: 10em; }
        body #contents #main article .content-detail .interiordesign-box-h4 > dd > p, body #contents #main section .content-detail .interiordesign-box-h4 > dd > p {
          text-align: right; }
    body #contents #main article .content-detail .interiordesign-box-ttl, body #contents #main section .content-detail .interiordesign-box-ttl {
      font-size: 20px;
      color: #fffddd;
      letter-spacing: 0.1em; }

/*PC ONLY*/
/*Natural Urban文字隠れ対策*/
@media screen and (min-width: 751px) and (max-width: 1330px) {
  body #contents #main article .content-detail .nu-content, body #contents #main section .content-detail .nu-content {
    padding-left: 140px; } }
/*SP ONLY*/
@media screen and (max-width: 750px) {
  body #contents #main article .content-detail .design-contents-list > dl > dt > p, body #contents #main section .content-detail .design-contents-list > dl > dt > p {
    font-size: 1.5rem;
    line-height: 1.75em; }
    body #contents #main article .content-detail .design-contents-list > dl > dt > p > span, body #contents #main section .content-detail .design-contents-list > dl > dt > p > span {
      font-size: 1.2rem;
      line-height: 1.75em; }
  body #contents #main article .content-detail .design-contents-list > dl > dd > p, body #contents #main section .content-detail .design-contents-list > dl > dd > p {
    font-size: 1rem;
    line-height: 1.75em; }
  body #contents #main article .content-detail figure.stickey-img, body #contents #main section .content-detail figure.stickey-img {
    width: 100px; }
  body #contents #main article .content-detail .grid2, body #contents #main article .content-detail .grid2to2, body #contents #main section .content-detail .grid2, body #contents #main section .content-detail .grid2to2 {
    gap: 30px; }
  body #contents #main article .content-detail .flex3 > dl, body #contents #main section .content-detail .flex3 > dl {
    width: calc(50% - 30px);
    padding: 10px 0 30px; }
    body #contents #main article .content-detail .flex3 > dl:nth-child(2n), body #contents #main section .content-detail .flex3 > dl:nth-child(2n) {
      padding: 10px 0 30px 30px; }
  body #contents #main article .content-detail .nu-content, body #contents #main section .content-detail .nu-content {
    padding-left: 100px; }
  body #contents #main article .content-detail .design-plant-grid, body #contents #main section .content-detail .design-plant-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 17px 17px; }
    body #contents #main article .content-detail .design-plant-grid > p, body #contents #main section .content-detail .design-plant-grid > p {
      grid-column: 1 / 4; } }

/*# sourceMappingURL=design.css.map */