@charset "UTF-8";

/* ── フォント ── */
body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  line-height: 1.6;
  color: #fff;
  background-color: #000;
  -webkit-font-smoothing: antialiased;
}
.en-font { font-family: "Lato", sans-serif; }

/* ── ユーティリティ ── */
.text-center { text-align: center; }
.fit-img     { width: 100%; height: auto; vertical-align: middle; }
.bg-white    { background-color: #fff; }

/* ── タイポグラフィ ── */
.primary-heading {
  font-size: 1.8rem;
  letter-spacing: 0.1em;
  margin-bottom: 24px;
  color: #c4bba6;
}
.note {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.08em;
}
.caption { font-size: 1.2rem; }

/* ── セクション .inner ── */
.general-section .inner {
  margin-inline: auto;
  padding: 80px 16px;
}
@media screen and (max-width: 767px) {
  .general-section .inner { padding: 50px 16px; }
}

/* ── ボーダーグリッド背景 ── */
.border-bg {
  border-bottom: 1px solid #f0f0f0;
  background-image:
    linear-gradient(0deg,   transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
    linear-gradient(90deg,  transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
  background-size: 25% 132px;
  background-repeat: repeat;
  background-position: center top;
}

/* ── ボタン ── */
.btn {
  margin-top: 48px;
}
.btn.-l a { width: 430px; height: 67px; font-size: 2.6rem; }
.btn.-l a::before { width: 15px; }
.btn.-sp a { width: 100%; height: 53px; font-size: 1.3rem; border: none; }
.btn.-sp a::before { width: 15px; }
.btn a {
  position: relative;
  font-size: 1.6rem;
  width: min(100%, 240px);
  height: 50px;
  display: grid;
  place-content: center;
  background-color: #fff;
  color: #000;
  margin-inline: auto;
  border: 1px solid #000;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  letter-spacing: 0.08em;
}
.btn a:hover {
  background-color: #000;
  color: #fff;
  border-color: #fff;
}
.btn a::before {
  content: "";
  position: absolute;
  width: 7.5px;
  aspect-ratio: 1/1;
  top: 50%;
  right: 12px;
  transform-origin: top right;
  rotate: 45deg;
  transform: skew(15deg, 15deg);
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}

/* ── SP/PC 表示切替 ── */
@media screen and (max-width: 767px)  { .sp-none { display: none !important; } }
@media screen and (min-width: 768px)  { .pc-none { display: none !important; } }

/* ── レスポンシブ ボタン ── */
@media screen and (max-width: 1600px) { .btn.-l a { width: 240px; height: 50px; font-size: 1.6rem; } }
@media screen and (max-width: 1024px) { .btn.-l a { width: 180px; height: 40px; font-size: 1.2rem; } .btn.-l a::before { width: 8px; } }
@media screen and (max-width: 767px)  { .primary-heading { font-size: 1.6rem; } .note { font-size: 1.4rem; } .btn a { font-size: 1.2rem; width: min(100%, 180px); height: 36px; } }