@charset "UTF-8";
@import url("global.css");
/* ---------- Index-Page ---------- */
#bukkenlist .sectitle {
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: clamp(22px, 4vw, 30px);
  letter-spacing: .1em;
  text-align: center;
  border-bottom: #BCBCBC 1px solid;
  padding-bottom: 30px;
  margin-bottom: 60px;
}
#bukkenlist ul.list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: min(50px,5vw);
  margin-bottom: 40px;
}
#bukkenlist ul.list li {
  display: contents;
}
#bukkenlist ul.list li a {
  display: grid;
  margin-bottom: 60px;
  gap: 0;
  grid-template-rows: subgrid;
  grid-row: span 5;
}
#bukkenlist ul.list li a .image {
  aspect-ratio: 3 / 2;
  position: relative;
  overflow: hidden;
}
#bukkenlist ul.list li a .image figure {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#bukkenlist ul.list li a .image figure img {
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
}
#bukkenlist ul.list li a .image figure::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #1D1D1D;
  mix-blend-mode: multiply;
  opacity: 0;
  z-index: 1;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
}
#bukkenlist ul.list li a .image figure::after {
  content: "詳しく見る";
  color: #fff;
  position: absolute;
  bottom: 15px;
  right: 40px;
  z-index: 2;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0.2s;
  backface-visibility: hidden;
}
#bukkenlist ul.list li a .image .cat {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #1A1A3F;
  color: #fff;
  text-align: center;
  padding: 3px 15px;
  z-index: 2;
  font-size: 12px;
  font-weight: 500;
}
#bukkenlist ul.list li a .posttitle {
  margin-block: 20px 10px;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 600;
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.5;
}
#bukkenlist ul.list li a .posttitle:has(.sub) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 5px 10px;
}
#bukkenlist ul.list li a .posttitle:has(.sub) .sub {
  display: block;
  border: #706D65 1px solid;
  padding: 3px 10px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  font-family: "Jost", "Zen Kaku Gothic New", sans-serif;
}
#bukkenlist ul.list li a .data {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  font-size: 14px;
  margin-bottom: 10px;
}
#bukkenlist ul.list li a .data .price {
  flex-grow: 1;
  font-family: "Jost", "Zen Kaku Gothic New", sans-serif;
  font-weigth: 500;
  color: #1A1A3F;
  text-align: right;
}
#bukkenlist ul.list li a .data .price strong {
  letter-spacing: 0;
  font-size: 180%;
  padding-right: 3px;
  line-height: 1;
}
#bukkenlist ul.list li a .menseki {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  font-size: 14px;
  font-weight: 500;
}
#bukkenlist ul.list li a .menseki dl {
  display: flex;
  gap: 12px;
  align-items: center;
}
#bukkenlist ul.list li a .menseki dl dt {
  background-color: #E1E1E1;
  padding: 2px 12px;
  letter-spacing: 0;
  font-size: 12px;
}
#bukkenlist ul.list li a .access {
  background-color: #E1E1E1;
  padding: 12px 20px;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 20px;
}
@media (any-hover: hover) {
  #bukkenlist ul.list li a:hover .image figure img {
    filter: blur(2px);
  }
  #bukkenlist ul.list li a:hover .image figure::before {
    opacity: .6;
  }
  #bukkenlist ul.list li a:hover .image figure::after {
    opacity: 1;
    translate: 20px 0;
  }
}

.linkbutton {
  margin: 80px auto 0;
  max-width: 400px;
}
.linkbutton a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #1A1A3F;
  color: #fff;
  padding: 12px 20px;
}
.linkbutton a span {
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.linkbutton a::after {
  content: "\f105";
  font-family: 'Font Awesome 6 free','Font Awesome 6 Brands';
  font-weight: 900;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
}
@media (any-hover: hover) {
  .linkbutton a:hover::after {
    translate: 10px 0;
  }
}

/* ---------- Entry-Post-Page ---------- */
.postpage #topblock {
  display: flex;
  gap: min(60px,5vw);
}
.postpage #topblock .photo {
  width: 50%;
  flex-shrink: 0;
}
.postpage #topblock .main {
  flex-grow: 1;
  padding-top: 10px;
}
.postpage #topblock .status {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 25px;
}
.postpage #topblock .status p {
  border: #1A1A3F 1px solid;
  padding: 3px 15px;
  font-size: 14px;
  font-weight: 500;
  color: #1A1A3F;
}
.postpage #topblock .status p.cat {
  background-color: #1A1A3F;
  color: #fff;
}
.postpage #topblock .posttitle {
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: min(25px,2.2vw);
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 30px;
}
.postpage #topblock .price {
  font-weight: 500;
  margin-block: 30px;
}
.postpage #topblock .price strong {
  display: inline-block;
  letter-spacing: 0;
  padding-inline: 10px 5px;
  font-family: "Jost", "Zen Kaku Gothic New", sans-serif;
  font-size: 200%;
  font-weight: 500;
  vertical-align: -1px;
}
.postpage #topblock .data dl {
  display: flex;
  line-height: 1.5;
  margin-block: 15px;
  gap: 5px;
}
.postpage #topblock .data dl dt {
  font-weight: 500;
  width: 70px;
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
}
.postpage #topblock .data dl dt::after {
  content: "：";
  display: block;
  color: #A2A2A2;
}
.postpage #bodyblock {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 40px;
  margin-block: 80px;
}
.postpage #mapblock {
  margin-top: 90px;
  background-color: #E1E1E1;
  position: relative;
}
.postpage #mapblock #map {
  width: 50%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}
.postpage #mapblock #map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: grayscale(0.8);
}
.postpage #mapblock .env {
  display: flex;
  gap: min(80px,4.5vw);
  align-items: center;
  line-height: 1.5;
}
.postpage #mapblock .env::before {
  content: "";
  width: 50%;
  flex-shrink: 0;
  display: block;
  height: 560px;
}
.postpage #mapblock .env ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 25px;
  padding: 40px 35px 40px 0;
}
.postpage #mapblock .env ul li {
  padding-left: 14px;
  text-indent: -14px;
  letter-spacing: 0;
}
.postpage #mapblock .env ul li::before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: #A2A2A2;
  display: inline-block;
  vertical-align: 3px;
  margin-right: 8px;
  text-indent: 0;
}
.postpage #mapblock .env ul li span {
  display: block;
  text-indent: 0;
  color: #706D65;
  letter-spacing: 1px;
  font-size: 14px;
}
.postpage #outline {
  display: flex;
  justify-content: space-between;
  gap: min(80px,5vw);
  margin-block: 100px;
}
.postpage #outline .sectitle span {
  display: block;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 32px;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  white-space: nowrap;
  line-height: 1.4;
  letter-spacing: .1em;
  display: inline-block;
  letter-spacing: .2em;
  position: sticky;
  top: 150px;
}
.postpage #outline .outline {
  flex-grow: 1;
  max-width: 1000px;
}
.postpage #outline .outline table {
  width: 100%;
  line-height: 1.5;
  border-top: #A2A2A2 1px solid;
  border-collapse: collapse;
}
.postpage #outline .outline table tr {
  border-bottom: #A2A2A2 1px solid;
}
.postpage #outline .outline table tr:nth-of-type(even) {
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0));
}
.postpage #outline .outline table th {
  font-weight: 500;
  white-space: nowrap;
  padding: 20px 15px;
}
.postpage #outline .outline table td {
  padding: 20px 15px;
}

/* fotorama */
.fotorama__thumb-border {
  border-color: #1A1A3F !important;
  opacity: .5;
}

.fotorama__caption {
  font-size: .9em;
  font-family: "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;
}

.fotorama__caption__wrap {
  background-color: rgba(229, 229, 229, 0.5);
}

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

 Responsive-Breakpoint-1 ( 1600px )

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

 Responsive-Breakpoint-2 ( 1300px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  /* ---------- Index-Page ---------- */
  #point ul.point li::before {
    top: -35px;
    left: 0;
    right: 0;
    text-align: center;
    text-shadow: 3px 0 0 rgba(255, 255, 255, 0.9);
  }
  #point ul.point li .title {
    margin-bottom: 25px;
    padding-left: 0;
  }
  #point ul.point li .text {
    padding: 25px 0 0;
  }

  #bukkenlist ul.list {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 959px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  .introduction {
    text-align: left;
    margin-bottom: 70px;
  }
  .introduction strong {
    font-size: min(22px,4.6vw);
    margin-bottom: 25px;
  }

  .topimage {
    height: 65vw;
  }

  #point {
    padding-block: 60px 70px;
  }
  #point .sectitle {
    margin-bottom: 60px;
  }
  #point .sectitle .sub {
    font-size: 16px;
  }
  #point .sectitle .en {
    margin-block: 15px 10px;
  }
  #point .sectitle .title {
    font-size: min(26px,4.4vw);
  }
  #point ul.point {
    display: block;
  }
  #point ul.point li {
    display: block;
    padding: 30px 30px 35px;
  }
  #point ul.point li + li {
    margin-top: 30px;
  }
  #point ul.point li::before {
    top: 33px;
    left: 40px;
    text-align: left;
    text-shadow: none;
    font-size: 32px;
  }
  #point ul.point li .title {
    padding-left: 80px;
    font-size: min(22px,4.5vw);
  }

  #bukkenlist {
    margin-top: 90px;
  }
  #bukkenlist .sectitle {
    margin-bottom: 80px;
  }
  #bukkenlist ul.list li a .posttitle:has(.sub) .sub {
    padding: 1px 8px;
  }
  #bukkenlist ul.list li a .menseki {
    gap: 8px 16px;
  }
  #bukkenlist ul.list li a .menseki dl {
    gap: 10px;
  }
  #bukkenlist ul.list li a .access {
    padding: 12px 15px;
  }

  /* ---------- Entry-Post-Page ---------- */
  .postpage #topblock {
    display: block;
  }
  .postpage #topblock .photo {
    width: auto;
  }
  .postpage #topblock .main {
    padding-top: 0;
    margin-top: 50px;
  }
  .postpage #topblock .status {
    margin-bottom: 20px;
  }
  .postpage #topblock .status p {
    padding: 2px 15px;
    font-size: 13px;
  }
  .postpage #topblock .posttitle {
    font-size: min(21px,4.8vw);
    margin-bottom: 25px;
  }
  .postpage #topblock .price {
    text-align: right;
    margin-block: 10px;
  }
  .postpage #topblock .data dl {
    margin-block: 10px;
    gap: 10px;
  }
  .postpage #bodyblock {
    margin-block: 60px;
  }
  .postpage #kukakublock {
    display: block;
    margin-block: 70px;
  }
  .postpage #kukakublock .kukakuzu {
    width: auto;
    text-align: center;
    margin-bottom: 20px;
  }
  .postpage #mapblock {
    margin-top: 70px;
  }
  .postpage #mapblock #map {
    width: 100%;
    position: relative;
    height: 480px;
  }
  .postpage #mapblock .env {
    display: block;
    padding: 40px;
  }
  .postpage #mapblock .env::before {
    display: none;
  }
  .postpage #mapblock .env ul {
    gap: 10px 25px;
    padding: 0;
  }
  .postpage #outline {
    display: block;
    margin-block: 80px;
  }
  .postpage #outline .sectitle {
    text-align: center;
    margin-bottom: 30px;
  }
  .postpage #outline .sectitle span {
    font-size: 26px;
    letter-spacing: .1em;
  }
  .postpage #outline .outline table {
    font-size: 14px;
  }
  .postpage #outline .outline table td {
    padding: 20px 10px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-4 ( 644px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  .introduction {
    margin-bottom: 35px;
  }
  .introduction strong {
    margin-bottom: 20px;
  }

  .topimage {
    height: 60vw;
  }

  #point {
    padding-block: 50px;
  }
  #point .sectitle {
    margin-bottom: 40px;
  }
  #point .sectitle .sub {
    font-size: 14px;
  }
  #point .sectitle .en {
    margin-block: 12px;
  }
  #point .sectitle .title span {
    display: block;
    font-size: 130%;
  }
  #point ul.point li {
    padding: 25px 5vw 30px;
  }
  #point ul.point li + li {
    margin-top: 25px;
  }
  #point ul.point li::before {
    top: 25px;
    left: 35px;
    font-size: 30px;
  }
  #point ul.point li .title {
    margin-bottom: 20px;
    padding-left: 65px;
  }
  #point ul.point li .text {
    padding: 20px 0 0;
  }

  #bukkenlist {
    margin-top: 60px;
  }
  #bukkenlist .sectitle {
    margin-bottom: 50px;
  }
  #bukkenlist ul.list {
    display: block;
  }
  #bukkenlist ul.list li {
    display: block;
  }
  #bukkenlist ul.list li a {
    display: block;
    margin-bottom: 50px;
  }
  #bukkenlist ul.list li a .posttitle {
    padding-inline: 5px;
  }
  #bukkenlist ul.list li a .posttitle:has(.sub) {
    gap: 3px 8px;
  }
  #bukkenlist ul.list li a .posttitle:has(.sub) .sub {
    padding: 3px 6px;
    font-size: 12px;
  }
  #bukkenlist ul.list li a .data {
    padding-inline: 5px;
    font-size: 13px;
  }
  #bukkenlist ul.list li a .data .price strong {
    font-size: 160%;
  }
  #bukkenlist ul.list li a .menseki {
    margin-inline: 5px;
    gap: 6px 15px;
  }
  #bukkenlist ul.list li a .menseki dl dt {
    padding: 2px 10px;
  }
  #bukkenlist ul.list li a .access {
    padding: 12px 15px;
    font-size: 13px;
    margin: 15px 5px 0;
  }
}
@media only screen and (max-width: 644px) and (any-hover: hover) {
  #bukkenlist ul.list li a:hover .image figure img {
    filter: blur(2px);
  }
  #bukkenlist ul.list li a:hover .image figure::before {
    opacity: .6;
  }
  #bukkenlist ul.list li a:hover .image figure::after {
    opacity: 1;
    translate: 20px 0;
  }
}

@media only screen and (max-width: 644px) {
  /* ---------- Entry-Post-Page ---------- */
  .postpage #topblock .main {
    margin-top: 30px;
  }
  .postpage #topblock .status {
    gap: 8px;
    margin-bottom: 20px;
  }
  .postpage #topblock .status p {
    padding: 1px 10px;
    font-size: 12px;
  }
  .postpage #topblock .posttitle {
    margin-bottom: 20px;
  }
  .postpage #topblock .data dl {
    margin-block: 8px;
    gap: 6px;
  }
  .postpage #topblock .data dl dt {
    width: 60px;
  }
  .postpage #bodyblock {
    padding: 30px 5vw;
    margin-block: 50px;
  }
  .postpage #kukakublock {
    margin-block: 50px;
    gap: 40px;
  }
  .postpage #kukakublock .kukakuzu {
    margin-bottom: 10px;
  }
  .postpage #kukakublock .kukakudata {
    overflow-x: auto;
  }
  .postpage #kukakublock .kukakudata table th {
    padding: 12px 6px;
  }
  .postpage #kukakublock .kukakudata table th small {
    font-size: .85em;
  }
  .postpage #kukakublock .kukakudata table td {
    padding: 12px 10px;
  }
  .postpage #mapblock {
    margin-top: 50px;
  }
  .postpage #mapblock #map {
    height: 360px;
  }
  .postpage #mapblock .env {
    padding: 30px 5vw;
  }
  .postpage #mapblock .env ul {
    gap: 8px 4vw;
  }
  .postpage #mapblock .env ul li {
    padding-left: 12px;
    text-indent: -12px;
    font-size: 12px;
  }
  .postpage #mapblock .env ul li::before {
    width: 5px;
    height: 5px;
    vertical-align: 2px;
    margin-right: 7px;
  }
  .postpage #mapblock .env ul li span {
    padding-left: 5px;
    font-size: 12px;
  }
  .postpage #outline {
    margin-block: 60px;
  }
  .postpage #outline .sectitle {
    margin-bottom: 25px;
  }
  .postpage #outline .sectitle span {
    font-size: 19px;
  }
  .postpage #outline .outline table {
    border: none;
    display: block;
    font-size: 13px;
    letter-spacing: 0;
  }
  .postpage #outline .outline table thead, .postpage #outline .outline table tbody, .postpage #outline .outline table tr, .postpage #outline .outline table th, .postpage #outline .outline table td {
    display: block;
  }
  .postpage #outline .outline table tr {
    border-bottom: none;
    display: flex;
    flex-wrap: wrap;
  }
  .postpage #outline .outline table tr:nth-of-type(even) {
    background: none;
  }
  .postpage #outline .outline table th {
    box-sizing: border-box;
    width: 100px;
    padding: 15px 10px;
    border-top: #A2A2A2 1px solid;
  }
  .postpage #outline .outline table th:nth-of-type(odd) {
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 30%);
  }
  .postpage #outline .outline table td {
    box-sizing: border-box;
    width: calc(100% - 100px);
    padding: 15px 5px 15px 0;
    border-top: #A2A2A2 1px solid;
  }
  .postpage #outline .outline table td:nth-of-type(odd) {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0));
  }
}

/*# sourceMappingURL=rental.css.map */