@keyframes Point_S {
  0% { r: 0; }
  90% { opacity: 0.6; }
  100% { r: 28.3072; opacity: 0; }
}
@keyframes Point_M {
  0% { r: 0; }
  85% { opacity: 0.4; }
  100% { r: 43.6084; opacity: 0; }
}
@keyframes Point_L {
  0% { r: 0; }
  80% { fill-opacity: 0.2; stroke-opacity: 1 }
  100% { r: 63; fill-opacity: 0; stroke-opacity: 0 }
}

a {
  color: #333;
}
._blockScroll {
  overflow: hidden;
}

body#pageDesign {
  #mainWrap {
    .com-content {
      > .annotation {
        margin: 2rem auto 4rem;
        font-size: 1rem;
        text-align: right;
      }
    }
  }
}

body#pageDesign:not(.safety):not(.storage) {

  section.storageVideo_btn {
    button {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 10rem 0;
      width: 100%;
      height: 100%;
      background-image: url(../img/predear/design/storageVideo_btn_bg.webp);
      background-position: center;
      background-size: cover;
      transition: all 0.75s;
      cursor: pointer;
      .title {
        position: relative;
        font-size: 4rem;
        font-weight: 600;
        color: #B48859;
        img {
          position: absolute;
          right: -2.5rem;
          top: 0;
          width: 16px;
          height: 16px;
        }
      }
      .explanation {
        padding-top: 1rem;
        font-size: 1.2rem;
      }
      &:hover {
        opacity: .6;
      }
    }
    .inline_storageVideo {
      display: none;
    }
  }

  section.brand {
    padding: 10rem 0;
    .concept {
      display: flex;
      flex-direction: column;
      align-items: center;
      .logo {
        width: 333px;
      }
      h2 {
        margin-top: 4rem;
        font-size: 2rem;
      }
      .explanation {
        margin-top: 2.5rem;
        font-size: 1.2rem;
        text-align: center;
        line-height: 2rem;
        span {
          display: block;
          margin-top: 3rem;
        }
      }
      figure.image {
        position: relative;
        figcaption {
          position: absolute;
          right: 5px;
          top: 60%;
          font-size: 80%;
        }
      }
    }
    .desire {
      position: relative;
      margin-top: -13rem;
      .com-content {
        .bcopy {
          display: flex;
          flex-wrap: wrap;
          gap: 2rem;
          align-items: center;
          justify-content: center;
          padding: 0 2rem;
          h2 {
            padding: 1rem 0;
            width: 100%;
            font-size: 2.5rem;
            text-align: center;
            color: #B48859;
            background-color: #f1975422;
          }
          .explanation {
            width: 38%;
            font-size: 1.2rem;
            line-height: 2rem;
          }
          img {
            width: 58%;
          }
        }
        figure {
          margin-top: 2rem;
          overflow: hidden !important;
          picture {
            img {
              width: 100%;
            }
          }
        }

      }
    }
  }

  section.btn_wrap {
    position: relative;
    padding: 8rem 0;
    &::before {
      content: "";
      position: absolute;
      z-index: 0;
      width: 35%;
      height: 100%;
    }
    .com-content {
      position: relative;
      z-index: 1;
      padding: 0 6rem;
      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        > img {
          width: auto;
          height: 100px;
        }
        .logo {
          margin-right: 4rem;
          img {
            width: auto;
            height: 75px;
          }
          p {
            margin-top: .5rem;
            font-size: 1.2rem;
            font-weight: 600;
            text-align: center;
            color: #901819;
          }
        }
      }
      .btn_cnt {
        display: flex;
        margin-top: 4rem;
        .bcopy {
          width: 50%;
          .title {
            display: block;
            font-size: 2.2rem;
            line-height: 3.8rem;
            color: #BE9461;
          }
          .explanation {
            margin-top: 2rem;
            font-size: 1.4rem;
            line-height: 2.8rem;
          }
          button {
            position: relative;
            margin-top: 8rem;
            padding: 2rem 0;
            width: 80%;
            font-size: 1.5rem;
            line-height: 1em;
            color: #fff;
            text-align: center;
            transition: all 0.75s;
            ar {
              position: absolute;
              right: 5px;
              top: calc(50% - .3em);
              font-size: 150%;
            }
            &:hover {
              opacity: .6;
            }
          }
        }
        .images {
          width: 50%;
        }
      }
    }
  }

  section.safety {
    border-top: #901819 solid 5px;
    &::before {
      left: 0;
      top: 0;
      background-color: #F6E7E5;
    }
    .com-content {
      .title {
        > img {
          filter: invert(9%) sepia(100%) saturate(3832%) hue-rotate(350deg) brightness(99%) contrast(90%);
        }
      }
      .btn_cnt {
        .bcopy {
          button {
            background-color: #71101F;
          }
        }
        .images {
          display: flex;
          flex-direction: column;
          gap: 2rem;
          padding-left: 3rem;
        }
      }
    }
  }

  section.storage {
    border-top: #B8915D solid 5px;
    &::before {
      right: 0;
      top: 0;
      background-color: #F9F5ED;
    }
    .com-content {
      .title {
        > img {
          filter: invert(60%) sepia(56%) saturate(331%) hue-rotate(355deg) brightness(90%) contrast(84%);
        }
      }
      .btn_cnt {
        .bcopy {
          button {
            background-color: #B8915D;
          }
        }
        .images {
          figure {
            display: flex;
            gap: 1rem;

            img {
              width: calc(50% - .5rem);
            }
          }
        }
      }
    }
  }

  .storageVideo_container {
    #storageVideo_player {
      width: 100%;
      height: auto;
      aspect-ratio: 112 / 63;
    }
  }

}

body#pageDesign.safety,
body#pageDesign.storage {

  .main_wrap.ul {
    .main_ttl_box {
      .page_ttl_logo {
        position: relative;
        z-index: 1;
      }
      .page_ttl_image {
        position: absolute;
        left: calc(9% + 35vw);
        top: 10rem;
        /* width: calc(35% + 10vw); */
        width: 55%;
      }
    }
    .com-content {
      > div {
        padding: 0 10rem;
        h2 {
          margin-top: 8rem;
          font-size: 2.2rem;
          line-height: 3.8rem;
          font-weight: 400;
          color: #BE9461;
        }
        .explanation {
          margin-top: 2rem;
          font-size: 1.4rem;
          line-height: 2.8rem;
        }
      }
    }
  }
  ._scroll_wrap {
    .com-content {
      > .title {
        display: flex;
        gap: 4rem;
        align-items: center;
        justify-content: center;
        margin-bottom: 2rem;
        .logo {
          display: flex;
          gap: 1rem;
          align-items: center;
          justify-content: center;
          img {
            width: auto;
            height: 28px;
          }
          p {
            font-size: 1.4rem;
            font-weight: 600;
            color: #901819;
          }
        }
        > p {
          font-size: 1.8rem;
          line-height: 2.8rem;
          color: #BE9461;
        }
      }
      ._l_container {
        .title {
          font-size: 1.2rem;
          font-weight: 600;
          color: #901819;
        }
        h2 {
          margin-top: 1.5rem;
          font-size: 1.8rem;
          line-height: 2.8rem;
          font-weight: 400;
          color: #BE9461;
        }
        .explanation {
          margin-top: 2rem;
          font-size: 1.4rem;
          line-height: 2.8rem;
        }
        .box {
          margin: 4rem auto 0;
          width: 60%;
          .title {
            padding: 1rem 0;
            width: 100%;
            font-weight: 400;
            text-align: center;
            color: #fff;
            background-color: #BE9461;
            border-radius: 2rem;
          }
          > div {
            figure {
              margin: auto;
              width: 70%;
            }
          }
        }
      }
      ._r_container {
        .box {
          > .title {
            padding: 1rem 0;
            width: 100%;
            text-align: center;
            color: #fff;
            background-color: #BE9461;
            border-radius: 2rem;
          }
          > div {
            display: flex;
            align-items: center;
            gap: 2rem;
            margin-top: 1.5rem;
            padding: 2rem;
            background: #fff;
            border-radius: 2rem;
            figure {
              width: calc(55% - 1rem);
              figcaption {
                font-size: .8rem;
              }
            }
            > div {
              width: calc(45% - 1rem);
              p {
                font-size: 1.2rem;
                line-height: 1.6rem;
              }
              ol {
                margin-top: 2rem;
                li {
                  display: inline-block;
                  font-size: 1.2rem;
                  line-height: 1.6rem;
                  span {
                    color: #BE9461;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .r_bg {
    padding: 4rem;
    background-color: #F2F2F3;
    border-radius: 2rem;
    &.EA {

    }
    &.CA {
      margin-top: 2rem;
    }
  }
  ._fixedArea,
  .FA {
    position: relative;
    display: flex;
    gap: 4rem;
    justify-content: space-between;
    /* position: relative; */
    ._l_container {
      position: relative;
      width: calc(45% - 2rem);
      ._stickyArea {
        position: absolute;
        &.is-fixed {
          position: fixed;
        }
      }
      .SA {
        position: relative;
      }
    }
    ._r_container {
      display: flex;
      flex-direction: column;
      gap: 4rem;
      width: calc(55% - 2rem);
    }
  }
  .cnt_nav {
    margin: 10rem auto;
    ol {
      display: flex;
      gap: 4rem;
      justify-content: center;
      li {
        width: 380px;
        img {
          width: auto;
          height: 88px;
        }
      }
    }
    button {
      display: block;
      position: relative;
      margin: 5rem auto 0;
      padding: 2rem 0;
      width: 35rem;
      font-size: 1.5rem;
      line-height: 1em;
      color: #fff;
      text-align: center;
      background-color: #000;
      transition: all 0.75s;
      ar {
        position: absolute;
        right: 5px;
        top: calc(50% - .3em);
        font-size: 150%;
      }
      &:hover {
        opacity: .6;
      }
    }
  }

}

body#pageDesign.safety {

  .main_wrap.ul {
    .main_ttl_box {
      &::before {
        background-color: #F6E7E5;
      }
      .page_ttl_logo {
        img {
          filter: invert(9%) sepia(100%) saturate(3832%) hue-rotate(350deg) brightness(99%) contrast(90%);
        }
      }
    }
    .com-content {
      > div {
        figure {
          margin: 8rem auto 0;
          width: 80%;
        }
      }
    }  
  }

  .disaster {
    .com-content {
      .EA {
        ._r_container {
          .box {
            &:last-child {
              > div {
                figure {
                  width: 30%;
                }
                > div {
                  align-self: flex-start;
                  width: 70%;
                }
              }
            }
          }
        }
      }
      .CA {
        ._l_container {
        }
        ._r_container {
          .box {
            > div {
              flex-wrap: wrap;
              align-items: flex-start;
              > figure {
                &:last-child {
                  width: 100%;
                }
              }
            }
          }
        }
      }
    }
  }

  .crime {
    margin-top: 10rem;
    .com-content {
      .EA {
        ._r_container {
        }
      }
      .CA {
        ._l_container {
        }
        ._r_container {
          .box {
            &:first-child {
              > div {
                > div {
                  display: flex;
                  flex-wrap: wrap;
                  gap: 2rem;
                  > div {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 1rem;
                    > div {
                      font-size: 1.2rem;
                      letter-spacing: 0;
                      line {
                        display: inline-block;
                        width: 4rem;
                        height: 3px;
                        margin-right: 1rem;
                        vertical-align: middle;
                        &.r {
                          background-color: #B8373E;
                        }
                        &.b {
                          background-color: #006A9E;
                        }
                      }
                    }

                  }
                }
              }
            }
            &:nth-child(2) {
              > div {
                flex-direction: column;
                figure,
                > div {
                  width: 100%;
                }
              }
            }
          }
        }
      }
    }
  }

  .sands {
    margin-top: 10rem;
    .com-content {
      .EA {
        ._r_container {
          .box {
            &:first-child {
              > div {
                flex-direction: column;
                figure,
                > div {
                  width: 100%;
                }
              }
            }
            &:nth-child(2) {
              > div {
                flex-direction: column;
                figure {
                  display: flex;
                  gap: .6rem;
                  align-items: center;
                  width: 100%;
                  img {
                    width: calc(45% - .3rem);
                  }
                  ol {
                    display: flex;
                    flex-direction: column;
                    gap: 2rem;
                    width: calc(55% - .3rem);
                    li {
                      display: flex;
                      flex-direction: column;
                      gap: 1rem;
                      p {
                        &:first-child {
                          font-size: 2rem;
                        }
                        &:nth-child(2) {
                          font-size: 1.2rem;
                          letter-spacing: 0;

                        }
                        &:nth-child(3) {
                          font-size: 1.2rem;
                          color: #901819;
                        }
                      }

                    }
                  }
                }
                > div {
                  width: 100%;
                }
              }
            }
            &:nth-child(3) {
              > div {
                > div {
                  width: 100%;
                }
              }

            }
          }
        }
      }
      .CA {
        ._l_container {
        }
        ._r_container {
          .box {
            > div {
              padding: unset;
              background-color: unset;
              figure {
                width: 100%;
              }
            }
          }
        }
      }
    }
  }

  .cnt_nav {
    ol {
      li {
        &.safety {
          background-color: #901819;
          img {
            filter: invert(100%) sepia(0%) saturate(7491%) hue-rotate(353deg) brightness(100%) contrast(104%);
          }
        }
        &.storage {
          transition: all 0.1s;
          cursor: pointer;
          img {
            filter: invert(60%) sepia(56%) saturate(331%) hue-rotate(355deg) brightness(90%) contrast(84%);
          }
          &:hover {
            background-color: #B8915D;
            img {
              filter: invert(100%) sepia(0%) saturate(7491%) hue-rotate(353deg) brightness(100%) contrast(104%);
            }
          }
        }
      }
    }
  }

}

body#pageDesign.storage {

  .main_wrap.ul {
    .main_ttl_box {
      &::before {
        background-color: #F9F5ED;
      }
      .page_ttl_logo {
        img {
          filter: invert(60%) sepia(56%) saturate(331%) hue-rotate(355deg) brightness(90%) contrast(84%);
        }
      }
    }
    .com-content {
      > div {
        display: flex;
        gap: 3rem;
        > div {
          width: calc(50% - 3rem);
          &:last-child {
            width: 50%;
            margin-top: 8rem;
            .title {
              padding: 1rem 0;              
              color: #BE9461;
              text-align: center;
              width: 100%;
              border: #BE9461 solid 1px;
            }
            > div {
              display: flex;
              gap: 2rem;
              margin-top: 1rem;
              figure {
                &:nth-child(1) {
                  width: calc(33.3% - 1rem);
                }
                &:nth-child(2) {
                  width: calc(66.7% - 1rem);
                }
                figcaption {
                  margin-top: 1rem;
                  font-size: 1rem;
                  color: #BE9461;
                  text-align: center;
                }
              }
            }
          }
        }
      }
    }
  }

  .ranking {
    .com-content {
      .EA {
        ._l_container {
          .SA {
            figure {
              position: relative;
              .point {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                li {
                  position: absolute;
                  width: 100px;
                  opacity: 0;
                  pointer-events: none;
                  &:nth-child(1) {
                    left: 48%;
                    top: 6%;
                  }
                  &:nth-child(2) {
                    left: 54.5%;
                    top: 24.5%;
                  }
                  &:nth-child(3) {
                    left: 20%;
                    top: 60%;
                  }
                  svg {
                    circle.s {
                      animation: Point_S 3s ease-in-out infinite;
                    }
                    circle.m {
                      animation: Point_M 3s ease-in-out .4s infinite;
                    }
                    circle.l {
                      animation: Point_L 3s ease-in-out .8s infinite;
                    }
                  }
                }

              }
            }
          }
        }
        ._r_container {
          .box {
            opacity: .4;
            &:not([data-sbox]),
            &.active {
              opacity: 1;
            }
            > div {
              > figure {
                width: 100%;
              }
            }
          }
          > .annotation {
            font-size: 1rem;
            text-align: right;
          }
        }
      }
    }
  }

  .space {
    margin-top: 10rem;
    .com-content {
      .EA {
        ._l_container {
          .SA {
            figure {
            }
          }
        }
        ._r_container {
          .box {
            > div {
              align-items: flex-start;
              &.culumn {
                flex-direction: column;
              }
              .title {
                font-size: 1.6rem;
                text-align: left;
                color: #BE9461;
              }
              p:not(.title) {
                font-size: 1.2rem;
                line-height: 1.6rem;
              }
              > div {
              display: flex;
              flex-direction: column;
              gap: 2rem;
                width: calc(65% - 1rem);
              }
              > figure {
                width: calc(35% - 1rem);
              }
            }
          }
        }
      }
    }
  }

  .washroom {
    margin-top: 10rem;
    .com-content {
      .EA {
        .box {
          > .title {
            padding: 1rem 0;
            width: 100%;
            text-align: center;
            color: #fff;
            background-color: #BE9461;
            border-radius: 2rem;
          }
          ol {
            display: flex;
            gap: 2rem;
            li {
              display: flex;
              flex-direction: column;
              gap: 2rem;
              margin-top: 1.5rem;
              padding: 2rem;
              width: calc(33.33% - .66rem);
              background: #fff;
              border-radius: 2rem;
              .title {
                font-size: 1.6rem;
                text-align: center;
                color: #BE9461;
              }
              p:not(.title) {
                min-height: 6.6em;
                font-size: 1.2rem;
                line-height: 1.6rem;
              }
            }
          }
        }
      }
    }
  }

  .comfort {
    margin-top: 10rem;
    .com-content {
      .EA {
        ._l_container {
          .SA {
            figure {
            }
          }
        }
        ._r_container {
          .box {
            > div {
              align-items: flex-start;
              .title {
                font-size: 1.6rem;
                text-align: left;
                color: #BE9461;
              }
              p:not(.title) {
                font-size: 1.2rem;
                line-height: 1.6rem;
              }
              > div {
                display: flex;
                flex-direction: column;
                gap: 2rem;
                width: calc(65% - 1rem);
                &.column {
                  width: 100%;
                }
              }
              > figure {
                width: calc(35% - 1rem);
              }
            }
            > .figure {
              
            }
          }
        }
      }
      .CA {
        > div {
          display: flex;
          gap: 2rem;
          > div {
            &:first-child {
              width: calc(65.66% - 1rem);
              > div {
                display: flex;
                > figure {
                  margin-top: unset;
                  width: 50%;
                }
                > div {
                  padding: 2rem;
                  background: #fff;
                  border-radius: 0 2rem 2rem 0;
                  width: 50%;
                }
              }
            }
            &:last-child {
              width: calc(34.33% - 1rem);
              > div {
                padding: 2rem;
                background: #fff;
                border-radius: 2rem;
              }
            }
            > .title {
              padding: 1rem 0;
              width: 100%;
              text-align: center;
              color: #fff;
              background-color: #BE9461;
              border-radius: 2rem;
            }
            > div {
              margin-top: 1.5rem;
              .title {
                font-size: 1.6rem;
                text-align: left;
                color: #BE9461;
              }
              p:not(.title) {
                margin-top: 2rem;
                min-height: 6.6em;
                font-size: 1.2rem;
                line-height: 1.6rem;
              }
              figure {
                margin-top: 2rem;
              }
            }
          }
        }
      }
    }
  }

  .cnt_nav {
    ol {
      li {
        &.safety {
          transition: all 0.1s;
          cursor: pointer;
          img {
            filter: invert(9%) sepia(100%) saturate(3832%) hue-rotate(350deg) brightness(99%) contrast(90%);
          }
          &:hover {
            background-color: #901819;
            img {
              filter: invert(100%) sepia(0%) saturate(7491%) hue-rotate(353deg) brightness(100%) contrast(104%);
            }
          }
        }
        &.storage {
          background-color: #B8915D;
          img {
            filter: invert(100%) sepia(0%) saturate(7491%) hue-rotate(353deg) brightness(100%) contrast(104%);
          }
        }
      }
    }
  }

}


/*modaal*/
.modaal-wrapper {
  z-index: 10001 !important;
  .modaal-inner-wrapper {
    .modaal-content-container {
      padding: 10px !important;
    }
  }
}
.modaal-overlay {
  z-index: 10000 !important;
  background-color: rgba(0,0,0,.9) !important;
}


@media screen and (max-width: 750px) {

  
  body#pageDesign {
    #mainWrap {
      .com-content {
        > .annotation {
          font-size: 1.8rem;
          line-height: 2.5rem;
          text-align: justify;
        }
      }
    }
  }

  html:has(body#pageDesign.storage) {
    scroll-behavior: smooth;
    scroll-padding-top: 20vw;
  }

  body#pageDesign:not(.safety):not(.storage) {

    section.storageVideo_btn {
      button {
        .title {
          font-size: 5rem;
          img {
            right: -3.5rem;
            top: 0;
            width: 12px;
            height: 12px;
          }
        }
        .explanation {
          font-size: 2rem;
        }
      }
    }

    section.brand {
      .concept {
        .logo {
          width: 50%;
        }
        h2 {
          font-size: 3.2rem;
          line-height: 5rem;
          text-align: center;
        }
        .explanation {
          font-size: 2.4rem;
          line-height: 5rem;
          span {
          }
        }
        figure.image {
          figcaption {
          }
        }
      }
      .desire {
        margin-top: -6rem;

        .com-content {
          .bcopy {
            flex-direction: column;
            h2 {
              font-size: 2.8rem;
            }
            .explanation {
              width: 100%;
              font-size: 2.4rem;
              line-height: 4rem;
            }
            img {
              margin-top: 2rem;
              width: 100%;
            }
          }
          figure {
            margin-top: 4rem;
            overflow-x: scroll !important;
            overflow-y: hidden !important;
            picture {
              img {
                width: 200%;
              }
            }
          }
        }
      }
    }

    section.btn_wrap {
      &::before {
      }
      .com-content {
        padding: unset;
        .title {
          flex-direction: column-reverse;
          padding: 0 6rem;
          > img {
            margin-top: 2rem;
            width: 100%;
            height: unset;
          }
          .logo {
            margin-right: unset;
            width: 15%;
            img {
              width: 100%;
              height: unset;
            }
            p {
              font-size: 1.5rem;
            }
          }
        }

        .btn_cnt {
          flex-direction: column;
          .bcopy {
            padding: 0 6rem;
            width: 100%;
            .title {
              padding: unset;
              font-size: 3.2rem;
              line-height: 5rem;
            }
            .explanation {
              font-size: 2rem;
              line-height: 4rem;
            }
            button {
              margin-top: 4rem;
              padding: 3rem 0;
              width: 85%;
              font-size: 2.5rem;
              ar {
              }
            }
          }
          .images {
            margin-top: 6rem;
            margin-left: calc((100vw - 68rem ) / 2 * -1);
            width: 100vw;
          }
        }
      }
    }

    section.safety {
      &::before {
      }
      .com-content {
        .btn_cnt {
          .bcopy {
            button {
            }
          }
          .images {
            flex-direction: row;
            padding-left: unset;
          }
        }
      }
    }

    section.storage {
      &::before {
      }
      .com-content {
        .btn_cnt {
          .bcopy {
            button {
            }
          }
          .images { 
            figure {
              img {
              }
            }
            figcaption {
              margin-top: 2rem;
              padding: 0 1rem;
              font-size: 1.8rem;
              line-height: 3rem;
            }
          }
        }
      }
    }

  }

  body#pageDesign.safety,
  body#pageDesign.storage {

    .main_wrap.ul {
      .main_ttl_box {
        .page_ttl_logo {
          width: 80%;
        }
        .page_ttl_image {
          position: relative;
          left: calc(6% + 35vw);
          top: 12rem;
          width: 55%;
        }
      }
      .com-content {
        > div {
          padding: unset;
          h2 {
            font-size: 2.8rem;
            line-height: 4.2rem;
          }
          .explanation {
            font-size: 2.4rem;
            line-height: 3.6rem;
          }
        }
      }
    }

    ._scroll_wrap {
      .com-content {
        > .title {
          gap: 2rem;
          flex-direction: column;
          align-items: flex-start;
          .logo {
            img {
              height: 18px;
            }
            p {
            font-size: 2.4rem;
            }
          }
          > p {
            font-size: 2.8rem;
            line-height: 4.2rem;
          }
        }
        ._l_container {
          width: 100%;
          .title {
            font-size: 2rem;
          }
          h2 {
            font-size: 2.8rem;
            line-height: 4.6rem;
          }
          .explanation {
            font-size: 2.2rem;
            line-height: 3.4rem;
          }
          .box {
            width: 80%;
            .title {
              font-size: 2.4rem;
            }
            > div {
              figure {
              }
            }
          }
        }
        ._r_container {
          width: 100%;
          .box {
            > .title {
              font-size: 2.4rem;
            }
            > div {
              flex-direction: column;
              figure {
                width: 100%;
                figcaption {
                  font-size: 2rem;
                }
              }
              > div {
                width: 100%;
                p {
                  font-size: 2.2rem;
                  line-height: 3.4rem;
                }
                ol {
                  li {
                      font-size: 2.2rem;
                      line-height: 3.4rem;
                    span {
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .r_bg {
      &.EA {
      }
      &.CA {
      }
    }

    ._fixedArea,
    .FA {
      flex-direction: column;
      ._l_container {
        ._stickyArea {
          &.is-fixed {
          }
        }
        .SA {
        }
      }
      ._r_container {
      }
    }

    .cnt_nav {
      ol {
        flex-direction: column;
        overflow: hidden;
        li {
          img {
            width: auto;
            height: 80px;
          }
          &.safety {
            img {
            }
          }
          &.storage {
            img {
            }
            &:hover {
              img {
              }
            }
          }
        }
      }
      button {
        margin: 8rem auto 0;
        padding: 3rem 0;
        width: 90%;
        font-size: 3rem;
        ar {
        }
        &:hover {
        }
      }
    }

  }

  body#pageDesign.safety {

    .main_wrap.ul {
      .main_ttl_box {
        &::before {
        }
        .page_ttl_logo {
          img {
          }
        }
      }
      .com-content {
        > div {
          figure {
            width:  100%;
          }
        }
      }  
    }

    .disaster {
      margin-top: 8rem;
      .com-content {
        .EA {
          ._r_container {
            .box {
              &:last-child {
                > div {
                  figure {
                    width: 100%;
                  }
                  > div {
                    width: 100%;
                  }
                }
              }
            }
          }
        }
        .CA {
          ._l_container {
          }
          ._r_container {
            .box {
              > div {
                > figure {
                  &:last-child {
                  }
                }
              }
            }
          }
        }
      }
    }

    .crime {
      .com-content {
        .EA {
          ._r_container {
          }
        }
        .CA {
          ._l_container {
          }
          ._r_container {
            .box {
              &:first-child {
                > div {
                  > div {
                    > div {
                      > div {
                        font-size: 2.2rem;
                        line-height: 3.4rem;
                        line {
                          width: 8rem;
                          &.r {
                          }
                          &.b {
                          }
                        }
                      }
                    }
                  }
                }
              }
              &:nth-child(2) {
                > div {
                  figure,
                  > div {
                  }
                }
              }
            }
          }
        }
      }
    }

    .sands {
      .com-content {
        .EA {
          ._r_container {
            .box {
              &:first-child {
                > div {
                  figure,
                  > div {
                  }
                }
              }
              &:nth-child(2) {
                > div {
                  figure {
                    img {
                    }
                    ol {
                      li {
                        p {
                          &:first-child {
                          }
                          &:nth-child(2) {
                          }
                          &:nth-child(3) {
                          }
                        }
                      }
                    }
                  }
                  > div {
                  }
                }
              }
              &:nth-child(3) {
                > div {
                  > div {
                  }
                }
              }
            }
          }
        }
        .CA {
          ._l_container {
          }
          ._r_container {
            .box {
              > div {
                figure {
                }
              }
            }
          }
        }
        > .annotation {
          font-size: 1.6rem;
          text-align: justify;
        }
      }
    }

  }

  body#pageDesign.storage {

    .main_wrap.ul {
      .main_ttl_box {
        &::before {
        }
        .page_ttl_logo {
          img {
          }
        }
      }
      .com-content {
        > div {
          flex-direction: column;
          > div {
            width: 100%;
            &:last-child {
              margin-top: 4rem;
              width: 100%;
              .title {
                padding: 1.5rem 0;
                font-size: 2.6rem;
              }
              > div {
                figure {
                  figcaption {
                    margin-top: 1.5rem;
                    font-size: 2rem;
                  }
                }
              }
            }
          }
        }
      }
    }

    .ranking {
      margin-top: 8rem;
      .com-content {
        .EA {
          ._l_container {
            .SA {
              figure {
                .point {
                  li {
                    opacity: 1;
                    pointer-events: all;
                    svg {
                      circle.s {
                      }
                      circle.m {
                      }
                      circle.l {
                      }
                    }
                  }
                }
              }
            }
          }
          ._r_container {
            .box {
              opacity: 1;
              > div {
                > figure {
                }
              }
            }
          }
        }
      }
    }

    .space {
      .com-content {
        .EA {
          ._l_container {
            .SA {
              figure {
              }
            }
          }
          ._r_container {
            .box {
              > div {
                &.culumn {
                }
                .title {
                  font-size: 2.8rem;
                  line-height: 4.6rem;
                }
                p:not(.title) {
                  font-size: 2.2rem;
                  line-height: 3.4rem;
                }
                > div {
                  width: 100%;
                }
                > figure {
                  width: 100%;
                }
              }
            }
          }
        }
      }
    }

    .washroom {
      .com-content {
        .EA {
          .box {
            > .title {
              font-size: 2.4rem;
            }
            ol {
              flex-direction: column;
              li {
                width: 100%;
                .title {
                  font-size: 2.8rem;
                  line-height: 4.6rem;
                }
                p:not(.title) {
                  min-height: unset;
                  font-size: 2.2rem;
                  line-height: 3.4rem;
                }
              }
            }
          }
        }
      }
    }

    .comfort {
      .com-content {
        .EA {
          ._l_container {
            .SA {
              figure {
              }
            }
          }
          ._r_container {
            .box {
              > div {
                flex-direction: column;
                .title {
                  font-size: 2.8rem;
                  line-height: 4.6rem;
                }
                p:not(.title) {
                  font-size: 2.2rem;
                  line-height: 3.4rem;
                }
                > div {
                  width: 100%;
                  &.column {
                  }
                }
                > figure {
                  width: 100%;
                }
              }
              > .figure {
              }
            }
          }
        }
        .CA {
          > div {
            flex-direction: column;
            > div {
              &:first-child {
                width: 100%;
                > div {
                  flex-direction: column;
                  > figure {
                    width: 100%;
                  }
                  > div {
                    width: 100%;
                  }
                }
              }
              &:last-child {
                width: 100%;
                > div {
                  width: 100%;
                }
              }
              > .title {
                font-size: 2.4rem;
              }
              > div {
                .title {
                  font-size: 2.8rem;
                  line-height: 4.6rem;
                }
                p:not(.title) {
                  font-size: 2.2rem;
                  line-height: 3.4rem;
                }
                figure {
                }
              }
            }
          }
        }
      }
    }
    
  }

  /*modaal*/
  .modaal-wrapper {
    .modaal-inner-wrapper {
      padding: 0px !important;
      .modaal-content-container {
        padding: 0px !important;
      }
    }
  }
  .modaal-overlay {
    z-index: 10000 !important;
    background-color: rgba(0,0,0,.9) !important;
  }

}