/* assets/css/style.css */
/* 共通 */
html {
  scroll-behavior: smooth;
}

body {
  font-family: "shippori-mincho", serif;
  line-height: 2;
  font-weight: 400;
  font-size: 1rem;
  overflow-x: hidden;
}
.fade-in {
  opacity: 0;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
}
/* ネガティブマージンユーティリティ全種（Bootstrap 5相当） */
.mt-n1 {
  margin-top: -0.25rem !important;
}
.mt-n2 {
  margin-top: -0.5rem !important;
}
.mt-n3 {
  margin-top: -1rem !important;
}
.mt-n4 {
  margin-top: -1.5rem !important;
}
.mt-n5 {
  margin-top: -3rem !important;
}
.mb-n1 {
  margin-bottom: -0.25rem !important;
}
.mb-n2 {
  margin-bottom: -0.5rem !important;
}
.mb-n3 {
  margin-bottom: -1rem !important;
}
.mb-n4 {
  margin-bottom: -1.5rem !important;
}
.mb-n5 {
  margin-bottom: -3rem !important;
}
.ms-n1 {
  margin-left: -0.25rem !important;
}
.ms-n2 {
  margin-left: -0.5rem !important;
}
.ms-n3 {
  margin-left: -1rem !important;
}
.ms-n4 {
  margin-left: -1.5rem !important;
}
.ms-n5 {
  margin-left: -3rem !important;
}
.me-n1 {
  margin-right: -0.25rem !important;
}
.me-n2 {
  margin-right: -0.5rem !important;
}
.me-n3 {
  margin-right: -1rem !important;
}
.me-n4 {
  margin-right: -1.5rem !important;
}
.me-n5 {
  margin-right: -3rem !important;
}

img {
  max-width: 100%;
  width: auto;
}
main {
  min-height: 100vh;
}

section {
  padding: 8% 0;
}

.text-br {
  color: #9a8d75;
}
.bg-light {
  background: #f7f7f7;
}
.badge {
  border-radius: 0;
}
.container-lg {
  max-width: 1280px;
}
@media (min-width: 992px) {
  .border-start-md {
    border-left: 1px solid var(--bs-border-color) !important;
  }
  .border-end-md {
    border-right: 1px solid var(--bs-border-color) !important;
  }
}

/* 共通ここまで */

/* TOP以外のヘッダー画像 */
.plan::before,
.equipment::before,
.lifeinfo::before,
.access::before {
  display: block;
  content: "";
  font-size: clamp(2rem, 4vw + 1rem, 5rem);
  position: absolute;
  left: 5%;
  text-shadow: 0 2px 10px #fff, /* 強めに広がる白い影 */ 0 0 2px #fff; /* 輪郭のぼかし補強用 */
}
.plan::before {
  content: "PLAN";
}
.equipment::before {
  content: "EQUIPMENT";
}
.lifeinfo::before {
  content: "LIFE INFORMATION";
}
.access::before {
  content: "ACCESS";
}
@media screen and (max-width: 768px) {
  .plan .offset-2 img,
  .equipment .offset-2 img,
  .lifeinfo .offset-2 img,
  .access .offset-2 img {
    object-fit: cover;
    height: 80vw;
    width: 100%;
  }
}

/* TOP以外のヘッダー画像ここまで */

/* TOP */
.topCach {
  text-align: center;
}
.topCach span:first-child {
  position: relative;
}

.topCach span:first-child:after {
  display: inline-block;
  content: "";
  position: absolute;
  background: #333;
  height: 65px;
  width: 1px;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  transform: rotate(22deg);
}

.hero-section {
  position: relative;
  background: url(../images/top/mv.webp) bottom / contain no-repeat;
  aspect-ratio: 1920 / 1320;
  width: 100%;
}
.hero-section .hero-content {
  position: absolute;
  top: 5%; /* 上の余白に文字を置く。%で調整 */
  left: 50%;
  transform: translateX(-50%);
  width: min(92%, 900px);
  text-align: left;
}
.btn-more {
  background: #9a8d75;
  color: #fff;
  border-radius: 0;
  border: 1px solid #fff;
  padding: 0.5rem 2rem;
  font-family: "athelas", serif;
  font-size: 1.25rem;
}
.btn-more:hover {
  background: #fff;
  color: #9a8d75;
  border-radius: 0;
  border: 1px solid #9a8d75;
}

/* TOPここまで */

@media screen and (max-width: 991px) {
  .hero-section {
    position: relative;
    background: url(../images/top/mv.webp) bottom / contain no-repeat;
    aspect-ratio: 920 / 730;
    width: 100%;
  }
  .hero-section .hero-content {
    position: absolute;
    top: 5%; /* 上の余白に文字を置く。%で調整 */
    left: 50%;
    transform: translateX(-50%);
    width: min(92%, 900px);
    text-align: left;
  }
}

@media screen and (max-width: 768px) {
  .mb-5.pb-5 {
    padding-bottom: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-5.py-5 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .topCach span:first-child:after {
    display: inline-block;
    content: "";
    position: absolute;
    background: #333;
    height: 45px;
    width: 1px;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    transform: rotate(22deg);
  }

  .hero-section {
    position: relative;
    background: url(../images/top/mv.webp) bottom / contain no-repeat;
    aspect-ratio: 920 / 800;
    width: 100%;
  }
  .hero-section .hero-content {
    position: absolute;
    top: 5%; /* 上の余白に文字を置く。%で調整 */
    left: 50%;
    transform: translateX(-50%);
    width: min(92%, 900px);
    text-align: left;
  }
}
@media screen and (max-width: 500px) {
  .hero-section {
    position: relative;
    background: url(../images/top/mv.webp) bottom / contain no-repeat;
    aspect-ratio: 920 / 1050;
    width: 100%;
  }
  .hero-section .hero-content {
    position: absolute;
    top: 5%; /* 上の余白に文字を置く。%で調整 */
    left: 50%;
    transform: translateX(-50%);
    width: min(92%, 900px);
    text-align: left;
  }
}