.single-realestate .single-realestate-new article {
  display: block;
}

.single-realestate main .single-realestate-new .container {
  max-width: 1100px;
}

:root {
  --page-bg: #fff;
  /* ページ背景と一致させる */
}

body {
  background: var(--page-bg);
}

.r-box {
  --r: 18px;
  /* ノッチ半径 */
  --b: 3px;
  /* ボーダー太さ */
  --line: #111;
  /* ボーダー色 */
  --fill: #fff;
  /* 中の色 */

  position: relative;
  padding: 6px;
  background: var(--fill);
  border: var(--b) solid var(--line);
  border-radius: 12px;
}

.r-box .r-box {
  --b: 2px;
  padding: 40px;
}

/* 1) 欠けを作る（背景色の“面”でえぐる） */
.r-box::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--b));
  /* 枠線も一緒に欠けさせる */
  pointer-events: none;
  background:
    radial-gradient(circle var(--r) at 0 0, var(--page-bg) 0 99%, transparent 100%),
    radial-gradient(circle var(--r) at 100% 0, var(--page-bg) 0 99%, transparent 100%),
    radial-gradient(circle var(--r) at 0 100%, var(--page-bg) 0 99%, transparent 100%),
    radial-gradient(circle var(--r) at 100% 100%, var(--page-bg) 0 99%, transparent 100%);
}

/* 2) ノッチの縁に“線だけ”描く（=リング） */
.r-box::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--b));
  pointer-events: none;
  background:
    radial-gradient(circle var(--r) at 0 0,
      transparent calc(var(--r) - var(--b)),
      var(--line) calc(var(--r) - var(--b)) var(--r),
      transparent calc(var(--r) + 0.5px)),
    radial-gradient(circle var(--r) at 100% 0,
      transparent calc(var(--r) - var(--b)),
      var(--line) calc(var(--r) - var(--b)) var(--r),
      transparent calc(var(--r) + 0.5px)),
    radial-gradient(circle var(--r) at 0 100%,
      transparent calc(var(--r) - var(--b)),
      var(--line) calc(var(--r) - var(--b)) var(--r),
      transparent calc(var(--r) + 0.5px)),
    radial-gradient(circle var(--r) at 100% 100%,
      transparent calc(var(--r) - var(--b)),
      var(--line) calc(var(--r) - var(--b)) var(--r),
      transparent calc(var(--r) + 0.5px));
}


.ticket-svg {
  width: 100%;
  aspect-ratio: 16 / 10;
  display: block;
}

.main-contents-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 1rem 6%;
  background: linear-gradient(to bottom,
      #fff 0,
      #fff 30px,
      #f6f4f2 30px,
      #f6f4f2 calc(100% - 30px),
      #fff calc(100% - 30px),
      #fff 100%);
}

.single-realestate .single-realestate-new article .left-box {
  width: 60%;
}

.right-box {
  padding: 50px 0 50px 2%;
  width: 35%;
}

.data {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid;
  margin-bottom: 2rem;
}

.type {
  background: #fbf9f6;
  padding: 2px 6px;
}

.right-box li {
  margin-bottom: 1rem;

}
.slider .swiper-slide {
  opacity: 0.35;
  transform: scale(0.92);
  transition: opacity 0.25s, transform 0.25s;
}

.slider .swiper-slide-active {
  opacity: 1;
  transform: scale(1);
}
.single-realestate .thumbnail-wrap {
  margin-bottom: 6rem;
}
.datalist {
  background: #f6f4f2;
  padding: 6rem 0;
  margin-bottom: 3rem;
}

.datalist ul {
  display: flex;
  flex-wrap: wrap;
}

.datalist ul li {
  width: 50%;
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
}

.datalist ul li h3 {
  width: 30%;
}

.datalist ul li div {
  width: 70%;
}

@media screen and (max-width: 768px) {
  .main-contents-wrapper {
      background: none;
}
.single-realestate .single-realestate-new article .left-box {
  width: 100%;
}
.right-box {
  margin-top: 2rem;
  padding: 50px 2%;
  width: 100%;
  background:#f6f4f2;
}
}
@media screen and (max-width: 480px) {
  .datalist ul li {
      width: 100%;
}
}