@charset "UTF-8";
.conteiner .inner {
  max-width: 1100px; }
  .conteiner .inner:not(.page-head) {
    padding-top: 0; }

.js-floating {
  background: url("../images/common/concept-bg.jpg") center top;
  background-size: 1400px auto;
  position: relative;
  z-index: 51; }
  .js-floating::before {
    background: #fff;
    content: "";
    position: absolute;
    left: 8rem;
    right: 8rem;
    top: 0;
    bottom: 0;
    z-index: 0; }

.local-nav {
  background-color: rgba(255, 255, 255, 0.4);
  margin-inline: auto; }
  .local-nav ul {
    max-width: 1100px;
    width: 80%;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 0.7fr 0.7fr 0.8fr 0.7fr 0.7fr 1fr;
    gap: 6px 10px;
    padding: 1rem 0; }
    .local-nav ul li {
      font-family: "big-caslon-fb", "游明朝", "yu-mincho-pr6n", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
      font-weight: 700;
      font-style: normal;
      font-size: 1.6rem;
      display: flex;
      text-align: center; }
      .local-nav ul li a {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        row-gap: 0.5rem;
        color: #ffffff;
        background: #8F798F;
        background: linear-gradient(90deg, #8f798f 0%, #aea0ae 100%);
        text-decoration: none;
        line-height: 1;
        padding: 1rem 3rem 1rem 1rem;
        transition: filter .2s linear;
        position: relative; }
        .local-nav ul li a::before, .local-nav ul li a::after {
          position: absolute;
          top: 50%;
          translate: 0 -50%;
          content: '';
          border: 1px solid #ffffff; }
        .local-nav ul li a::before {
          display: block;
          border: 1px solid #ffffff;
          border-radius: calc(infinity * 1px);
          width: 1.4rem;
          height: 1.4rem;
          right: 1rem; }
        .local-nav ul li a::after {
          border-width: 1px 1px 0 0;
          width: 0.4rem;
          height: 0.4rem;
          rotate: 45deg;
          right: 1.6rem; }
        .local-nav ul li a:hover {
          filter: brightness(110%); }
      .local-nav ul li.current a {
        background: #290B29;
        background: linear-gradient(90deg, #290b29 0%, #966496 100%); }

.category-name {
  font-family: "big-caslon-fb", "游明朝", "yu-mincho-pr6n", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 700;
  font-style: normal;
  color: #704c70;
  font-size: 2.6rem;
  border-left: 7px solid #704c70;
  padding: 1.5rem 2rem;
  background: #F8F6F1;
  background: linear-gradient(90deg, #f8f6f1 0%, #e0ded9 100%);
  position: relative; }

.item-list {
  margin-top: 4rem;
  gap: 4rem; }

.item {
  font-family: "游明朝", "yu-mincho-pr6n", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt"; }
  .item .name {
    font-size: 18px;
    color: #704c70;
    line-height: 1.2;
    letter-spacing: 0.1em; }
  .item .img + .name {
    margin-top: 2rem; }
  .item .text {
    font-size: 14px;
    margin-top: 1rem;
    line-height: 1.8; }
  .item .text + .img {
    margin-top: 2rem; }

#kitchen {
  padding-top: 6rem; }

#bathroom .item-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr); }
#bathroom .main-photo {
  grid-column: span 2; }

#security .inner {
  border-top: 1px solid #cccccc; }
#security .page-midashi {
  text-align: center; }
#security .category-name {
  margin-top: 4rem; }
#security .item-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr); }
#security .alsok {
  grid-column: span 2; }
#security .security-camera {
  grid-column: span 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 10px; }
  #security .security-camera .name,
  #security .security-camera .text {
    grid-column: span 2; }
#security .entrance-key {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 0.75fr;
  align-items: flex-start;
  gap: 2rem 3rem; }
  #security .entrance-key .img {
    order: 2;
    grid-row: span 2; }
  #security .entrance-key .copy01 {
    order: 1; }
  #security .entrance-key .copy02 {
    order: 3; }
  #security .entrance-key .name {
    margin-top: 0; }

#construction .item-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr); }

#other .page-midashi {
  text-align: center; }
#other .inner {
  width: calc(100% - 16rem);
  max-width: 100%;
  background-color: #f8f6f1;
  padding-top: 2rem; }
#other .item-list {
  max-width: 1100px;
  width: 90%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem 6rem; }
#other .item {
  background-color: #ffffff;
  padding: 3rem; }
#other .img {
  margin-block-start: -3rem;
  margin-inline: -3rem; }
#other .img + .name {
  margin-top: 2.5rem; }

@media screen and (max-width: 1100px) {
  .js-floating:before {
    left: 4%;
    right: 4%; }

  #other .inner {
    width: 92%; } }
@media screen and (max-width: 1024px) {
  .local-nav ul {
    grid-template-columns: repeat(3, 1fr); } }
@media screen and (max-width: 768px) {
  .local-nav ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 3px 5px; }

  .item-list {
    gap: 2rem; }

  .item .name {
    font-size: 15px; }
  .item .distance {
    font-size: 13px; }

  #bathroom .item-list,
  #security .item-list,
  #construction .item-list {
    grid-template-columns: repeat(2, 1fr); }

  #other .item-list {
    gap: 4rem; } }
@media screen and (max-width: 480px) {
  #construction .item-list,
  #other .item-list {
    grid-template-columns: 1fr; }

  #other .item-list {
    gap: 2rem; } }