@charset "UTF-8";
@import url("global.css");
/* ------------------------------
 Category-Navi
------------------------------ */
.catnavi {
  padding: 30px 0;
  background-color: #f3f3f3;
  margin-bottom: 70px;
}
.catnavi #catnavi {
  display: flex;
  justify-content: center;
  margin: 0 -15px;
}
.catnavi #catnavi li {
  width: 50%;
  padding: 0 15px;
  box-sizing: border-box;
}
.catnavi #catnavi li a {
  display: block;
  border: #ccc 1px solid;
  background-color: rgba(255, 255, 255, 0.3);
  padding: 20px 0;
  text-align: center;
  position: relative;
}
.catnavi #catnavi li a span {
  display: block;
  line-height: 1;
}
.catnavi #catnavi li a span.ja {
  font-size: 20px;
  margin-bottom: 5px;
}
.catnavi #catnavi li a span.en {
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.catnavi #catnavi li a::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 12px 0 12px;
  border-color: #62749B transparent transparent transparent;
  position: absolute;
  bottom: 8px;
  left: 50%;
  margin-left: -12px;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 0;
}
.catnavi #catnavi li a:hover {
  background-color: #fff;
}

.land li#navi-land a,
.house li#navi-house a {
  cursor: default;
  background-color: #fff;
}
.land li#navi-land a::before,
.house li#navi-house a::before {
  opacity: 1;
  transform: translateY(15px);
}

/* ------------------------------
 Index-page
------------------------------ */
.archive-title {
  text-align: center;
  font-weight: 700;
  margin-bottom: 40px;
}
.archive-title span {
  display: block;
  line-height: 1;
}
.archive-title span.en {
  font-size: 50px;
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  letter-spacing: 0;
  color: #fff;
  -webkit-text-stroke: 1px #111;
  text-stroke: 1px #111;
  margin-bottom: 4px;
}
.archive-title span.ja {
  font-size: 18px;
  letter-spacing: 3px;
  padding-left: 3px;
}

ul.list {
  margin: 70px -20px 0;
  display: flex;
  flex-wrap: wrap;
}
ul.list li {
  width: 33.33333%;
  box-sizing: border-box;
  padding: 0 20px 40px;
}
ul.list li a {
  display: block;
  text-align: center;
}
ul.list li a:hover .image::before {
  opacity: 1;
}
ul.list li a:hover .image img {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
}
ul.list li .name {
  position: relative;
  background-color: #f3f3f3;
  margin-bottom: 4px;
  font-weight: 700;
  padding: 10px 70px;
  line-height: 26px;
}
ul.list li .name span {
  display: block;
}
ul.list li .name .cat {
  color: #fff;
  width: 60px;
  height: 30px;
  line-height: 29px;
  letter-spacing: 3px;
  padding-left: 3px;
  position: absolute;
  box-sizing: border-box;
  top: 8px;
  left: 5px;
}
ul.list li .name .cat.land {
  background-color: #374360;
}
ul.list li .name .cat.house {
  background-color: #62749B;
}
ul.list li .name .new {
  position: absolute;
  top: -24px;
  left: 50%;
  margin-left: -40px;
  width: 80px;
  background-color: #CE394D;
  color: #fff;
  letter-spacing: 0;
  border-radius: 3px;
  padding: 2px 0 1px 2px;
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 700;
}
ul.list li .name .new::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 6px 0 6px;
  border-color: #CE394D transparent transparent transparent;
  position: absolute;
  bottom: -7px;
  left: 50%;
  margin-left: -6px;
}
ul.list li .inner {
  position: relative;
  height: 300px;
}
ul.list li .image {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
ul.list li .image::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to right top, #374360, rgba(55, 67, 96, 0));
  z-index: 2;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 0;
}
ul.list li .image img {
  z-index: 1;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
ul.list li .data {
  position: absolute;
  z-index: 2;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 15px;
  line-height: 1.5;
}
ul.list li .data .address {
  font-size: 14px;
}
ul.list li .data .address .status {
  display: inline-block;
  background-color: #374360;
  color: #fff;
  font-weight: 700;
  padding: 3px 10px 5px 11px;
}
ul.list li .data .price {
  font-weight: 700;
}
ul.list li .data .price span {
  color: #374360;
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-size: 20px;
  padding-right: 5px;
  letter-spacing: 0;
}
ul.list li .data .square {
  display: inline-block;
  text-align: left;
}
ul.list li .data .square dl {
  line-height: 26px;
  font-weight: bold;
}
ul.list li .data .square dl dt {
  border: #ccc 1px solid;
  line-height: 24px;
  padding: 0 7px 0 8px;
  background-color: rgba(255, 255, 255, 0.5);
  float: left;
  font-size: 14px;
}
ul.list li .data .square dl dd {
  margin-left: 55px;
}
ul.list li .data .square dl + dl {
  margin-top: 3px;
}

/* ------------------------------
 Post-Page
------------------------------ */
.postpage .category {
  margin: 0 20px 30px;
}
.postpage .category span {
  display: inline-block;
  background-color: #ccc;
  color: #fff;
  padding: 3px 20px;
  font-size: 15px;
  min-width: 150px;
  margin: 0 5px;
  box-sizing: border-box;
  font-weight: bold;
}
.postpage .category span.cat {
  background-color: #374360;
}
.postpage .posttitle {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}
.postpage .address {
  margin-bottom: 50px;
}
.postpage #exarea {
  background-color: #f3f3f3;
  padding: 40px 0;
  margin-bottom: 80px;
}
.postpage #exarea .block {
  position: relative;
  display: flex;
  align-items: center;
}
.postpage #exarea .mainimage {
  height: 500px;
  text-align: right;
  width: 50%;
  flex-shrink: 0;
  box-sizing: border-box;
  padding-right: 30px;
}
.postpage #exarea .mainimage a {
  display: block;
  height: 100%;
  position: relative;
}
.postpage #exarea .mainimage a img {
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  width: auto;
  max-height: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  right: 0;
}
.postpage #exarea .mainimage a:hover {
  opacity: .7;
}
.postpage #exarea .databox {
  width: 50%;
  text-align: left;
  box-sizing: border-box;
  padding: 0 0 0 30px;
}
.postpage #exarea .databox .subimage {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -7px 40px;
}
.postpage #exarea .databox .subimage li {
  width: 12.5%;
  box-sizing: border-box;
  padding: 7px;
}
.postpage #exarea .databox .subimage li a {
  display: block;
  height: 0;
  padding-top: 100%;
  overflow: hidden;
  position: relative;
}
.postpage #exarea .databox .subimage li a::before {
  content: "";
  box-sizing: border-box;
  border: #62749B 3px solid;
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  z-index: 2;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 0;
}
.postpage #exarea .databox .subimage li a img {
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.postpage #exarea .databox .subimage li a:hover::before {
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  opacity: 1;
}
.postpage #exarea .databox .subimage li a:hover img {
  opacity: .5;
}
.postpage #exarea .databox .data table {
  width: 100%;
  border-collapse: collapse;
  border-top: #ccc 1px solid;
}
.postpage #exarea .databox .data table tr {
  border-bottom: #ccc 1px solid;
  line-height: 1.5;
}
.postpage #exarea .databox .data table th {
  font-weight: bold;
  padding: 15px 20px;
  white-space: nowrap;
  text-align: center;
}
.postpage #exarea .databox .data table td {
  padding: 15px 20px;
}
.postpage #exarea .databox .pdf {
  margin-top: 40px;
}
.postpage #exarea .databox .pdf a {
  display: block;
  background-color: #374360;
  border-radius: 2px;
  color: #fff;
  padding: 10px 30px;
  position: relative;
  font-weight: 700;
}
.postpage #exarea .databox .pdf a::before {
  content: "\f1c1";
  display: inline-block;
  vertical-align: 5%;
  font-family: "Font Awesome 5 free";
  font-weight: 900;
  margin-right: 10px;
}
.postpage #exarea .databox .pdf a::after {
  content: "\f101";
  font-family: "Font Awesome 5 free";
  font-weight: 900;
  position: absolute;
  line-height: 30px;
  right: 20px;
  top: 50%;
  margin-top: -15px;
}
.postpage #exarea .databox .pdf a:hover {
  background-color: #62749B;
}
.postpage #commentarea {
  text-align: center;
  margin: 0 auto 80px;
}
.postpage #commentarea .postbody {
  display: inline-block;
  text-align: justify;
}
.postpage .kukaku table {
  border: #ccc 1px solid;
  width: 100%;
  box-sizing: border-box;
  border-collapse: collapse;
  text-align: center;
  line-height: 1.4;
}
.postpage .kukaku table tr {
  border-bottom: #ccc 1px solid;
}
.postpage .kukaku table tr:nth-of-type(even) {
  background-color: rgba(243, 243, 243, 0.8);
}
.postpage .kukaku table thead tr {
  border-bottom: #ccc 1px solid;
  background-color: #ccc;
}
.postpage .kukaku table tbody tr:last-child {
  border: none;
}
.postpage .kukaku table tbody td {
  border-right: #ccc 1px dotted;
}
.postpage .kukaku table tbody td:last-child {
  border: none;
}
.postpage .kukaku table th {
  padding: 12px 10px;
  font-weight: 700;
  color: #fff;
}
.postpage .kukaku table td {
  padding: 12px 10px;
}
.postpage table.data {
  margin-top: 60px;
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  border-top: #ccc 1px solid;
}
.postpage table.data tr {
  border-bottom: #ccc 1px solid;
}
.postpage table.data th {
  white-space: nowrap;
  padding: 15px 15px;
  text-align: center;
  background-color: #f3f3f3;
  background-clip: padding-box;
  position: relative;
  font-weight: 700;
}
.postpage table.data th::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: #fff 3px solid;
}
.postpage table.data td {
  padding: 15px 15px;
}
.postpage .update {
  text-align: right;
  margin-top: 5px;
  font-size: .9em;
}
.postpage #map {
  background-color: #f3f3f3;
  padding: 40px 0;
  margin: 40px 0 0;
}
.postpage #map .map {
  position: relative;
  height: 540px;
  border: #ccc 5px solid;
}
.postpage #map .map iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.postpage #telarea {
  margin: -20px 0 80px;
}

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 (1500px)
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1500px) {
  /* ------------------------------
   Index-page
  ------------------------------ */
  /* ------------------------------
   Post-Page
  ------------------------------ */
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1.5 (1320px)
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1320px) {
  /* ------------------------------
   Index-page
  ------------------------------ */
  ul.list {
    margin: 70px -1vw 0;
  }
  ul.list li {
    padding: 0 1vw 2vw;
  }
  ul.list li .data .address {
    letter-spacing: 0;
  }
  ul.list li .data .square {
    font-size: 14px;
  }

  /* ------------------------------
   Post-Page
  ------------------------------ */
  .postpage #exarea .mainimage {
    padding-right: 20px;
  }
  .postpage #exarea .databox {
    padding: 0 0 0 20px;
  }
  .postpage #exarea .databox .subimage li {
    width: 20%;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 960px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  /* ------------------------------
   Category-Navi
  ------------------------------ */
  .catnavi {
    margin-bottom: 60px;
  }
  .catnavi #catnavi {
    margin: 0 -10px;
  }
  .catnavi #catnavi li {
    padding: 0 10px;
  }
  .catnavi #catnavi li a:hover {
    background-color: rgba(255, 255, 255, 0.5);
  }

  /* ------------------------------
   Index-page
  ------------------------------ */
  ul.list {
    margin: 60px -10px 0;
  }
  ul.list li {
    width: 50%;
    padding: 0 10px 30px;
  }
  ul.list li a:hover .image img {
    transform: none;
  }
  ul.list li .name {
    padding: 10px;
    font-size: 15px;
  }
  ul.list li .name .cat {
    width: 70px;
    height: 26px;
    line-height: 24px;
    font-size: 14px;
    top: -16px;
    left: 50%;
    margin-left: -35px;
    border-radius: 3px;
  }
  ul.list li .name .new {
    top: -16px;
    left: -8px;
    margin: 0;
    width: 50px;
    border-radius: 3px;
    padding: 0 0 0 2px;
    font-size: 14px;
    transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
  }
  ul.list li .image::before {
    display: none;
  }

  /* ------------------------------
   Post-Page
  ------------------------------ */
  .postpage .category {
    margin: 0 0 20px;
  }
  .postpage .posttitle {
    font-size: 24px;
    margin-bottom: 10px;
  }
  .postpage .address {
    margin-bottom: 40px;
  }
  .postpage #exarea {
    background-color: transparent;
    padding: 0;
    margin-bottom: 50px;
  }
  .postpage #exarea .block {
    display: block;
  }
  .postpage #exarea .mainimage {
    height: auto;
    text-align: center;
    width: auto;
    padding: 0;
  }
  .postpage #exarea .mainimage a {
    height: 0;
    padding-top: 70%;
  }
  .postpage #exarea .mainimage a img.objectfit {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: contain;
  }
  .postpage #exarea .mainimage a:hover {
    opacity: 1;
  }
  .postpage #exarea .databox {
    width: auto;
    padding: 0;
  }
  .postpage #exarea .databox .subimage {
    margin: 0 -6px 24px;
  }
  .postpage #exarea .databox .subimage li {
    width: 12.5%;
    padding: 6px;
  }
  .postpage #exarea .databox .subimage li a {
    display: block;
    height: 0;
    padding-top: 100%;
    overflow: hidden;
    position: relative;
  }
  .postpage #exarea .databox .subimage li a::before {
    display: none;
  }
  .postpage #exarea .databox .subimage li a:hover img {
    opacity: 1;
  }
  .postpage #exarea .databox .pdf {
    margin-top: 30px;
  }
  .postpage #exarea .databox .pdf a:hover {
    background-color: #374360;
  }
  .postpage #commentarea {
    margin: 0 auto 50px;
  }
  .postpage .kukaku table {
    font-size: 15px;
  }
  .postpage table.data {
    margin-top: 50px;
  }
  .postpage #map {
    padding: 20px 0;
    margin: 40px 0 60px;
  }
  .postpage #map .map {
    height: 480px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  /* ------------------------------
   Category-Navi
  ------------------------------ */
  .catnavi {
    padding: 20px 0;
    margin-bottom: 40px;
  }
  .catnavi #catnavi {
    margin: 0 -8px;
  }
  .catnavi #catnavi li {
    padding: 0 8px;
  }
  .catnavi #catnavi li a {
    padding: 15px 0;
  }
  .catnavi #catnavi li a span.ja {
    font-size: 16px;
    margin-bottom: 5px;
  }

  /* ------------------------------
   Index-page
  ------------------------------ */
  ul.list {
    margin: 50px 0 0;
    display: block;
  }
  ul.list li {
    width: auto;
    padding: 0 0 45px;
  }
  ul.list li .name {
    font-size: 14px;
  }
  ul.list li .inner {
    height: 0;
    padding-top: 70%;
  }

  /* ------------------------------
   Post-Page
  ------------------------------ */
  .postpage .category span {
    font-size: 14px;
    min-width: inherit;
  }
  .postpage .posttitle {
    font-size: 19px;
    margin-bottom: 20px;
  }
  .postpage .address {
    margin-bottom: 20px;
  }
  .postpage #exarea {
    margin-bottom: 50px;
  }
  .postpage #exarea .mainimage {
    margin-bottom: 10px;
  }
  .postpage #exarea .databox .subimage {
    margin: 0 -5px 20px;
  }
  .postpage #exarea .databox .subimage li {
    width: 20%;
    padding: 5px;
  }
  .postpage #exarea .databox .data table th {
    padding: 15px 10px;
  }
  .postpage #exarea .databox .data table td {
    padding: 15px 10px;
  }
  .postpage #exarea .databox .pdf {
    margin-top: 25px;
  }
  .postpage .kukaku table {
    display: block;
    font-size: 13px;
  }
  .postpage .kukaku table thead {
    float: left;
    display: block;
  }
  .postpage .kukaku table thead tr {
    border-bottom: none;
    border-right: #374360 1px solid;
    background-color: #ccc;
  }
  .postpage .kukaku table tbody {
    display: block;
    overflow-x: auto;
    position: relative;
    white-space: nowrap;
    width: auto;
    letter-spacing: -0.4em;
  }
  .postpage .kukaku table tbody tr:last-child {
    border: none;
  }
  .postpage .kukaku table tbody td {
    border: none;
  }
  .postpage .kukaku table tr {
    display: inline-block;
    letter-spacing: 0;
    border-bottom: none;
    border-right: #ccc 1px solid;
  }
  .postpage .kukaku table th {
    display: block;
    padding: 12px;
  }
  .postpage .kukaku table td {
    display: block;
    padding: 12px;
  }
  .postpage table.data {
    margin-top: 40px;
    font-size: inherit;
    border: #ccc 1px solid;
    display: block;
  }
  .postpage table.data thead, .postpage table.data tbody {
    display: block;
  }
  .postpage table.data tr {
    display: block;
    border-bottom: none;
  }
  .postpage table.data th {
    display: block;
    padding: 10px 15px;
  }
  .postpage table.data th::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: #fff 3px solid;
  }
  .postpage table.data td {
    display: block;
    padding: 5px 15px 12px;
    text-align: center;
    border-bottom: #ccc 1px solid;
  }
  .postpage #map {
    padding: 0;
    margin: 40px 0 60px;
  }
  .postpage #map .map {
    margin: 0 -20px;
    height: 400px;
    border: none;
  }
  .postpage #telarea {
    margin: -40px 0 50px;
  }
}