@import url("https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&display=swap");
.section .inner {
  max-width: 1000px; }

/******************************************************

public-private

******************************************************/
.public-private {
  background-color: #eae8e3; }

/******************************************************

life-style

******************************************************/
.life-style .inner {
  padding-bottom: 5rem; }
.life-style .img {
  margin-top: 6rem; }
.life-style .note.center {
  text-align: center;
  margin-top: 1.5rem; }

/******************************************************

four-futures

******************************************************/
.four-futures .inner {
  /**padding-top: 0;**/ }
.four-futures .img {
  margin-top: 6rem; }
  .four-futures .img.four-main {
    margin-top: 0;
    margin-bottom: 6rem; }

@media screen and (max-width: 768px) {
  .four-futures .img {
    position: relative;
    overflow: hidden;
    /**.scr-body {
      width: 150rem;
      display: block;
    }**/ } }
/******************************************************

project-detail

******************************************************/
.project-detail {
  background-color: #efefef; }
  .project-detail .floor {
    display: flex;
    position: relative;
    align-items: flex-start; }
    .project-detail .floor .floor-nav {
      width: 60px; }
      .project-detail .floor .floor-nav li {
        text-align: center;
        background-color: #fff;
        padding: 2rem 10px;
        font-size: 1.6rem;
        line-height: 1;
        cursor: pointer;
        transition: background-color 0.3s linear; }
        .project-detail .floor .floor-nav li:not(:first-of-type) {
          border-top: 1px solid #efefef; }
        .project-detail .floor .floor-nav li.current {
          background-color: #3b414c;
          color: #fff; }
        .project-detail .floor .floor-nav li:not(.current):hover {
          background-color: rgba(59, 65, 76, 0.1); }
    .project-detail .floor .floor-map {
      width: 47%;
      margin-right: 10.5%; }
      .project-detail .floor .floor-map .floor-map-image {
        position: relative; }
        .project-detail .floor .floor-map .floor-map-image::after {
          position: absolute;
          left: 0;
          top: 0;
          width: 3px;
          height: 100%;
          content: '';
          background-color: #3b414c; }
      .project-detail .floor .floor-map > .note {
        text-align: right;
        margin-top: 5px; }
    .project-detail .floor .floor-information {
      width: 36.5%; }
      .project-detail .floor .floor-information .number {
        font-size: 1.6rem;
        letter-spacing: 0.05em;
        width: fit-content;
        background-color: #2b3a56;
        color: #fff;
        padding: 0.8rem 2rem;
        text-align: center;
        line-height: 1;
        border-radius: 2px; }
      .project-detail .floor .floor-information .title {
        color: #2b3a56;
        font-size: 2.2rem;
        line-height: 1.8;
        margin-top: 2rem;
        border-bottom: 1px solid rgba(59, 65, 76, 0.25);
        padding-bottom: 2rem; }
      .project-detail .floor .floor-information .lead {
        margin-top: 2rem;
        line-height: 2; }
      .project-detail .floor .floor-information .img {
        margin-top: 2rem; }
    .project-detail .floor [class$="-arrow"] {
      position: absolute;
      top: 50%;
      translate: 0 -50%;
      border-radius: 50%;
      width: 4rem;
      height: 4rem;
      background-color: #3b414c;
      display: grid;
      place-content: center;
      cursor: pointer;
      transition: filter 0.3s linear; }
      .project-detail .floor [class$="-arrow"]::after {
        display: block;
        border: 1px solid #fff;
        border-width: 1px 1px 0 0;
        content: '';
        width: 10px;
        height: 10px; }
      .project-detail .floor [class$="-arrow"]:hover {
        filter: brightness(120%); }
    .project-detail .floor .prev-arrow {
      left: calc(60px + 47% + 3rem); }
      .project-detail .floor .prev-arrow::after {
        rotate: -135deg;
        translate: 2px 0; }
    .project-detail .floor .next-arrow {
      right: -7rem; }
      .project-detail .floor .next-arrow::after {
        rotate: 45deg;
        translate: -2px 0; }
    .project-detail .floor + .note {
      margin-top: 4rem; }

@media screen and (max-width: 1121px) {
  .project-detail .floor .floor-map {
    width: 49.47%;
    margin-right: 5.79%; }
  .project-detail .floor .floor-information {
    width: 38.42%; }
  .project-detail .floor [class$="-arrow"] {
    top: 32%; }
  .project-detail .floor .prev-arrow {
    left: calc(60px + 49.47% + 0.6rem); }
  .project-detail .floor .next-arrow {
    right: -4.2rem; } }
@media screen and (max-width: 768px) {
  .project-detail .floor {
    display: grid;
    grid-template-columns: 4rem 1fr 4rem;
    align-items: center;
    column-gap: 4rem; }
    .project-detail .floor .floor-nav {
      grid-column: span 3;
      order: 4;
      width: 100%;
      width: calc(100% - 16rem);
      margin-inline: auto;
      margin-top: 4rem; }
      .project-detail .floor .floor-nav ul {
        display: grid;
        grid-template-columns: repeat(4, 1fr); }
        .project-detail .floor .floor-nav ul li:not(:first-of-type) {
          border-top: 0;
          border-left: 1px solid #efefef; }
        .project-detail .floor .floor-nav ul li br {
          display: none; }
    .project-detail .floor .floor-map {
      grid-column: span 3;
      order: 5;
      border-top: 3px solid #3b414c;
      width: calc(100% - 16rem);
      margin-right: 0;
      margin-inline: auto; }
      .project-detail .floor .floor-map .floor-map-image::after {
        display: none; }
    .project-detail .floor .floor-information {
      width: 100%;
      order: 2; }
    .project-detail .floor [class$="-arrow"] {
      position: static; }
    .project-detail .floor .prev-arrow {
      order: 1; }
    .project-detail .floor .next-arrow {
      order: 3; } }
@media screen and (max-width: 480px) {
  .project-detail .floor {
    column-gap: 2rem; }
    .project-detail .floor .floor-nav,
    .project-detail .floor .floor-map {
      width: 100%; } }
.red-list01 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 2rem; }
  .red-list01 li {
    width: 100%;
    margin-top: 3rem;
    /**max-width: 90rem;**/ }
  @media screen and (max-width: 600px) {
    .red-list01 li {
      width: 100%; } }