@charset "utf-8";
/* CSS Document */
#S00 h2 {
  font-family: 'Noto Sans JP', sans-serif;
}
section {
  border-bottom: 1px solid #705c06;
}
section:last-of-type {
  border-bottom: none;
}
section {
  margin: 0 0 2%;
}
section#S00 {
  margin: 0 0 2%;
}
section .contentsDetail {
  padding: 4% 0;
}
section#S00 .contentsDetail {
  padding: 0;
}
#ownersMenu {
  border-bottom: none;
  background: #000;
  max-width: 970px;
  padding: 2% 0;
}
#ownersMenu ul {
  display: flex;
}
#ownersMenu ul li {
  margin: 2px;
}
/* 固定時の共通設定 */
#ownersMenu.is-fixed {
  position: fixed;
  z-index: 999; /* 他の要素より上に表示 */
}
/* 未選択の状態（少し薄くする） */
#ownersMenu ul li img {
  opacity: 0.6;
  filter: grayscale(20%);
  transition: all 0.3s ease;
  border: 2px solid transparent; /* ガタつき防止 */
}
/* ホバー時 */
#ownersMenu ul li a:hover img {
  opacity: 0.9;
}
/* 選択された状態（is-active） */
#ownersMenu ul li.is-active img {
  opacity: 1;
  filter: grayscale(0%);
  border-color: #b7a86b;
}
main .flexBox3 > ul > li {
  width: calc(100% / 3);
}
main .leftBox {
  width: 400px;
}
main .rightBox {
  width: 560px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 0 0 30px;
}
main .rightBox h4 {
  text-align: left;
}
#S01 .flexBox3 ul, #S02 .flexBox3 ul {
  flex-flow: inherit;
}
#S01 .flexBox3 ul li, #S02 .flexBox3 ul li {
  width: calc(100% / 3);
  padding: 2px;
}
#S03 .leftBox, #S04 .leftBox {
  width: 530px;
}
#S03 .rightBox, #S04 .rightBox {
  width: 390px;
  padding: 0 0 0 10px;
}
#S03 .flexBox2 > ul, #S04 .flexBox2 > ul {
  flex-direction: row-reverse;
}
#S03 .flexBox2 > ul > li:nth-child(1), #S04 .flexBox2 > ul > li:nth-child(1) {
  width: 300px;
}
#S03 .flexBox2 > ul > li:nth-child(2), #S04 .flexBox2 > ul > li:nth-child(2) {
  width: 240px;
}
#S04 .leftBox {
  width: 530px;
}
/*----------------------------------------------------------- 1280px  */
@media screen and (max-width: 1280px) {
  .residenceBox ul > li {
    width: calc(100% / 2);
  }
}
/*----------------------------------------------------------- 1025px  */
@media screen and (min-width: 1025px) {
  #ownersMenu.is-fixed {
    top: 77px;
  }
  #ownersMenu.is-fixed ul {
    padding: 0 2% 0 0;
  }
}
/*----------------------------------------------------------- 1024px  */
@media screen and (max-width: 1024px) {
  #ownersMenu {
    padding: 0;
  }
  #ownersMenu.is-fixed {
    top: 65px;
  }
  #ownersMenu.is-fixed ul {
    padding: 0 2% 0 0;
  }
  .detailBox {
    flex-flow: column;
  }
  main .leftBox {
    width: 100%;
  }
  main .rightBox {
    width: 100%;
    padding: 3% 0 0;
  }
  #S03 .leftBox, #S04 .leftBox {
    width: 100%;
  }
  #S03 .rightBox, #S04 .rightBox {
    width: 100%;
    padding: 0 0 0 10px;
  }
  #S03 .flexBox2 > ul, #S04 .flexBox2 > ul {
    flex-flow: column;
  }
  #S03 .flexBox2 > ul > li, #S04 .flexBox2 > ul > li {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #S03 .flexBox2 > ul > li:nth-child(1), #S04 .flexBox2 > ul > li:nth-child(1) {
    width: 100%;
  }
  #S03 .flexBox2 > ul > li:nth-child(2), #S04 .flexBox2 > ul > li:nth-child(2) {
    width: 100%;
  }
  #S04 .leftBox {
    width: 100%;
  }
}
/*----------------------------------------------------------- 640px  */
@media screen and (max-width: 640px) {
  .residenceBox ul > li {
    width: 100%;
  }
  #S01 .flexBox3 ul, #S02 .flexBox3 ul {
    flex-flow: column;
  }
  #S01 .flexBox3 ul li, #S02 .flexBox3 ul li {
    width: 100%;
    padding: 0;
  }
}