/* =========================================================
   NEXUS PARKING 共通スタイル
   ブラック × シルバー / スマートフォン最優先
========================================================= */
:root {
   --black: #050505;
   --black-2: #0a0a0a;
   --panel: #101010;
   --white: #fff;
   --silver: #d7d7d7;
   --muted: #b0b0b0;
   --subtle: #c5c5c5;
   --quiet: #a2a2a2;
   --line: rgba(255, 255, 255, .14);
   --line-strong: rgba(255, 255, 255, .28);
   --green: #81a98c;
   --red: #bd8585;
   --header: 64px;
   --bottom: 72px;
   --max: 1160px;
   --serif-en: "Cormorant Garamond", "Times New Roman", serif;
   --serif-ja: "Yu Mincho", "Hiragino Mincho ProN", serif;
   --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans JP", "Yu Gothic", sans-serif;
   --text-body: clamp(15px, 14.4px + .18vw, 17px);
   --text-support: clamp(14px, 13.6px + .12vw, 15px);
   --text-label: clamp(13px, 12.6px + .12vw, 15px);
}

*,
*::before,
*::after {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
   background: var(--black);
}

body {
   margin: 0;
   min-width: 320px;
   color: var(--white);
   background:
      radial-gradient(circle at 15% 10%, rgba(255, 255, 255, .05), transparent 27rem),
      radial-gradient(circle at 90% 50%, rgba(255, 255, 255, .025), transparent 25rem),
      linear-gradient(145deg, #050505, #0a0a0a 48%, #050505);
   font-family: var(--sans);
   font-size: 16px;
   line-height: 1.8;
   letter-spacing: .025em;
   -webkit-font-smoothing: antialiased;
}

body::before {
   content: "";
   position: fixed;
   inset: 0;
   z-index: -1;
   pointer-events: none;
   opacity: .25;
   background: linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, .018) 30.2%, transparent 30.5%) 0 0/460px 460px;
}

a {
   color: inherit;
   text-decoration: none;
}

button,
a {
   -webkit-tap-highlight-color: transparent;
}

button {
   color: inherit;
   font: inherit;
}

img {
   display: block;
   width: 100%;
   filter: none !important;
}

figure,
h1,
h2,
h3,
p,
dl,
dd {
   margin: 0;
}

ul {
   margin: 0;
}

.container {
   width: min(calc(100% - 36px), var(--max));
   margin-inline: auto;
}

.serif {
   font-family: var(--serif-ja);
}

.eyebrow {
   color: var(--muted);
   font: var(--text-label)/1.45 var(--sans);
   letter-spacing: .16em;
}

.section-kicker {
   color: var(--muted);
   font: var(--text-label)/1.45 var(--sans);
   letter-spacing: .16em;
}

.section-title {
   margin-top: 8px;
   font: 400 clamp(25px, 7vw, 45px)/1.45 var(--serif-ja);
   letter-spacing: .08em;
}

.section-copy {
   margin-top: 14px;
   color: var(--silver);
   font-size: var(--text-body);
   line-height: 1.85;
}

/* =========================
   固定ヘッダー・メニュー
========================= */
.site-header {
   position: fixed;
   inset: 0 0 auto;
   z-index: 50;
   height: var(--header);
   background: rgba(5, 5, 5, .9);
   border-bottom: 1px solid var(--line);
   backdrop-filter: blur(18px);
}

.header-inner {
   width: min(calc(100% - 32px), var(--max));
   height: 100%;
   margin: auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.brand {
   font: 400 20px/1 var(--serif-en);
   letter-spacing: .14em;
}

.brand span {
   display: block;
   margin-top: 3px;
   color: var(--muted);
   font: 9px/1.1 var(--sans);
   letter-spacing: .24em;
}

.menu-button {
   width: 46px;
   height: 46px;
   border: 0;
   background: transparent;
   display: grid;
   place-items: center;
   cursor: pointer;
}

.menu-lines,
.menu-lines::before,
.menu-lines::after {
   width: 23px;
   height: 1px;
   background: var(--silver);
   transition: .3s ease;
}

.menu-lines {
   position: relative;
}

.menu-lines::before,
.menu-lines::after {
   content: "";
   position: absolute;
   left: 0;
}

.menu-lines::before {
   top: -7px;
}

.menu-lines::after {
   top: 7px;
}

.menu-button[aria-expanded="true"] .menu-lines {
   background: transparent;
}

.menu-button[aria-expanded="true"] .menu-lines::before {
   transform: translateY(7px) rotate(45deg);
}

.menu-button[aria-expanded="true"] .menu-lines::after {
   transform: translateY(-7px) rotate(-45deg);
}

.drawer {
   position: fixed;
   inset: var(--header) 0 0;
   z-index: 45;
   padding: 24px 20px calc(var(--bottom) + 30px);
   background: rgba(5, 5, 5, .98);
   opacity: 0;
   visibility: hidden;
   transform: translateY(-8px);
   transition: .3s ease;
   overflow: auto;
}

.drawer.is-open {
   opacity: 1;
   visibility: visible;
   transform: none;
}

.drawer-nav {
   max-width: 640px;
   margin: auto;
   border-top: 1px solid var(--line);
}

.drawer-link {
   min-height: 67px;
   padding: 12px 3px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid var(--line);
   font-family: var(--serif-ja);
}

.drawer-link small {
   display: block;
   color: var(--muted);
   font: var(--text-label)/1.5 var(--sans);
   letter-spacing: .13em;
}

.drawer-link::after {
   content: "›";
   color: var(--muted);
   font-size: 24px;
}

body.menu-open {
   overflow: hidden;
}

/* =========================
   スマホ固定ナビゲーション
========================= */
.bottom-nav {
   position: fixed;
   inset: auto 0 0;
   z-index: 40;
   min-height: var(--bottom);
   padding-bottom: env(safe-area-inset-bottom);
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   background: rgba(5, 5, 5, .94);
   border-top: 1px solid var(--line);
   backdrop-filter: blur(18px);
}

.bottom-nav a {
   position: relative;
   min-height: var(--bottom);
   padding: 10px 1px 7px;
   display: grid;
   place-content: center;
   gap: 5px;
   text-align: center;
   color: var(--muted);
   font-size: clamp(10px, 2.65vw, 11px);
   font-weight: 500;
   line-height: 1.2;
}

.bottom-nav a::before {
   content: "";
   width: 18px;
   height: 13px;
   margin: auto;
   border: 1px solid currentColor;
   border-radius: 2px;
   opacity: .8;
}

.bottom-nav a[aria-current="page"] {
   color: var(--white);
}

.bottom-nav a[aria-current="page"]::after {
   content: "";
   position: absolute;
   top: 0;
   width: 24px;
   height: 1px;
   background: var(--white);
   justify-self: center;
}

main {
   min-height: 100svh;
   padding: var(--header) 0 calc(var(--bottom) + 36px);
}

/* =========================
   共通ページHERO
========================= */
.page-hero {
   position: relative;
   padding: 54px 0 42px;
   text-align: center;
   overflow: hidden;
}

.page-hero::after {
   content: "";
   position: absolute;
   inset: auto 18% 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

.page-no {
   color: var(--quiet);
   font: 16px/1 var(--serif-en);
   letter-spacing: .15em;
}

.page-title-en {
   margin-top: 10px;
   font: 400 clamp(34px, 10vw, 67px)/1 var(--serif-en);
   letter-spacing: .05em;
}

.page-title-ja {
   margin-top: 14px;
   font: 400 clamp(21px, 5.2vw, 28px)/1.5 var(--serif-ja);
   letter-spacing: .1em;
}

.page-tagline {
   margin-top: 18px;
   color: var(--silver);
   font: 400 clamp(16px, 4.2vw, 18px)/1.8 var(--serif-ja);
   letter-spacing: .07em;
}

.page-lead {
   max-width: 1000px;
   margin: 16px auto 0;
   color: var(--silver);
   font-size: var(--text-body);
   line-height: 1.85;
}

.section {
   padding: 48px 0;
}

.section+.section {
   border-top: 1px solid rgba(255, 255, 255, .07);
}

.section-head {
   margin-bottom: 24px;
}

.back-link {
   min-height: 44px;
   display: inline-flex;
   align-items: center;
   color: var(--silver);
   font-size: var(--text-support);
   letter-spacing: .06em;
}

/* =========================
   トップ：公式LINE用ランチャー
========================= */
.home-hero {
   position: relative;
   min-height: 410px;
   display: grid;
   align-items: end;
   overflow: hidden;
   border-bottom: 0;
   background: linear-gradient(180deg, rgba(5, 5, 5, .15), rgba(5, 5, 5, .94)), url("../images/placements/home/hero.png") center/cover;
}

.home-hero::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(110deg, rgba(5, 5, 5, .78), transparent 72%);
}

.home-hero-copy {
   position: relative;
   z-index: 1;
   padding: 52px 0 42px;
}

.official-label {
   display: inline-flex;
   padding: 7px 11px;
   border: 1px solid var(--line-strong);
   color: var(--silver);
   font-size: var(--text-label);
   line-height: 1.35;
   letter-spacing: .11em;
}

.home-hero h1 {
   margin-top: 20px;
   font: 400 clamp(39px, 11vw, 74px)/.95 var(--serif-en);
   letter-spacing: .05em;
}

.home-hero h1 span {
   display: block;
}

.home-hero-copy>p:last-child {
   margin-top: 20px;
   color: var(--silver);
   font: clamp(16px, 4.2vw, 18px)/1.8 var(--serif-ja);
   letter-spacing: .07em;
}

.quick-menu {
   padding: 35px 0;
   background: #000;
}

.home-line-section {
   padding: 0 0 35px;
   background: #000;
}

.home-line-cta,
.line-button {
   min-height: 62px;
   gap: 13px;
   border: 1px solid rgba(129, 169, 140, .7);
   background: linear-gradient(135deg, rgba(129, 169, 140, .2), rgba(255, 255, 255, .04));
   color: var(--white);
}

.home-line-cta {
   width: 100%;
   padding: 12px 15px;
   display: flex;
   align-items: center;
   text-align: left;
   cursor: pointer;
}

.home-line-cta>span:nth-child(2) {
   flex: 1;
}

.home-line-cta small {
   display: block;
   color: var(--green);
   font-size: 10px;
   letter-spacing: .14em;
   line-height: 1.3;
}

.home-line-cta strong {
   display: block;
   margin-top: 3px;
   font-size: var(--text-body);
   line-height: 1.4;
}

.line-mark {
   min-width: 43px;
   min-height: 27px;
   padding: 3px 5px;
   display: inline-grid;
   place-items: center;
   border: 1px solid currentColor;
   border-radius: 6px;
   color: #d9f0dd;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .04em;
   line-height: 1;
}

.line-arrow {
   margin-left: auto;
   color: var(--green);
   font-size: 22px;
   line-height: 1;
}

.line-modal {
   position: fixed;
   inset: 0;
   z-index: 80;
   display: grid;
   align-items: end;
   visibility: hidden;
   opacity: 0;
   transition: opacity .25s ease, visibility .25s ease;
}

.line-modal.is-open {
   visibility: visible;
   opacity: 1;
}

.line-modal-backdrop {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, .72);
}

.line-modal-panel {
   position: relative;
   width: 100%;
   padding: 30px 18px calc(24px + env(safe-area-inset-bottom));
   background: #111;
   border-top: 1px solid var(--line-strong);
   transform: translateY(20px);
   transition: transform .25s ease;
}

.line-modal.is-open .line-modal-panel {
   transform: none;
}

.line-modal-close {
   position: absolute;
   top: 16px;
   right: 15px;
   width: 44px;
   height: 44px;
   border: 1px solid var(--line);
   background: transparent;
   color: var(--silver);
   font-size: 27px;
   line-height: 1;
   cursor: pointer;
}

.line-modal-panel h2 {
   margin-top: 7px;
   font: 400 27px/1.4 var(--serif-ja);
}

.line-modal-lead {
   margin-top: 8px;
   color: var(--silver);
   font-size: var(--text-support);
}

.line-modal-list {
   margin-top: 20px;
   padding: 0;
   display: grid;
   gap: 10px;
   list-style: none;
}

.line-modal-item {
   display: grid;
   grid-template-columns: 1fr minmax(170px, auto);
   align-items: center;
   gap: 12px;
   padding: 10px 0 10px 13px;
   border-left: 2px solid var(--green);
   background: rgba(255, 255, 255, .035);
}

.line-modal-item strong {
   font-family: var(--serif-ja);
   font-size: var(--text-body);
}

.line-modal-item .line-button {
   min-height: 48px;
   padding: 10px 12px;
   gap: 8px;
   font-size: var(--text-support);
}

.line-detail-section {
   padding-top: 0;
}

.line-detail-cta {
   padding: 24px 18px;
   border: 1px solid rgba(129, 169, 140, .55);
   background: linear-gradient(135deg, rgba(129, 169, 140, .13), rgba(255, 255, 255, .025));
}

.line-detail-cta h2 {
   margin-top: 7px;
   font: 400 clamp(22px, 6vw, 31px)/1.45 var(--serif-ja);
}

.line-detail-cta p:not(.section-kicker) {
   margin-top: 8px;
   color: var(--silver);
   font-size: var(--text-support);
}

.line-detail-cta .line-button {
   margin-top: 18px;
}

.quick-menu-head {
   margin-bottom: 18px;
}

.quick-menu-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
}

.quick-card {
   min-height: 142px;
   padding: 17px 14px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   border: 1px solid var(--line);
   background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012));
   transition: transform .25s ease, border-color .25s ease;
}

.quick-card span {
   color: var(--quiet);
   font: 14px/1 var(--serif-en);
}

.quick-card small {
   display: block;
   color: var(--muted);
   font: var(--text-label)/1.4 var(--sans);
   letter-spacing: .09em;
}

.quick-card strong {
   display: block;
   margin-top: 8px;
   font: 400 clamp(16px, 4vw, 18px)/1.55 var(--serif-ja);
}

.quick-card em {
   margin-top: 12px;
   color: var(--subtle);
   font-style: normal;
   font-size: 20px;
}

/* =========================
   画像共通・仮画像ラベル
========================= */
.image-placeholder-label {
   display: none !important;
   position: absolute;
   right: 10px;
   bottom: 9px;
   padding: 5px 8px;
   border: 1px solid rgba(255, 255, 255, .28);
   background: rgba(0, 0, 0, .68);
   color: rgba(255, 255, 255, .82);
   font-size: 9px;
   line-height: 1.2;
   letter-spacing: .1em;
}

.visual-banner {
   position: relative;
   min-height: 245px;
   overflow: hidden;
   border: 1px solid var(--line);
   border-radius: 4px;
}

.visual-banner img {
   height: 100%;
   min-height: 245px;
   object-fit: cover;
   filter:none;
   transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}

.visual-banner::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(100deg, rgba(0, 0, 0, .7), transparent 60%), linear-gradient(0deg, rgba(0, 0, 0, .42), transparent);
   pointer-events: none;
}

.visual-banner-copy {
   position: absolute;
   z-index: 2;
   left: 22px;
   bottom: 20px;
}

.visual-banner-copy small {
   color: var(--subtle);
   font-size: var(--text-label);
   line-height: 1.4;
   letter-spacing: .14em;
}

.visual-banner-copy h2 {
   margin-top: 5px;
   font: 400 24px/1.45 var(--serif-ja);
}

/* =========================
   駐車場一覧カード
========================= */
.parking-list {
   display: grid;
   gap: 18px;
}

.parking-list-card {
   overflow: hidden;
   border: 1px solid var(--line);
   border-radius: 4px;
   background: rgba(255, 255, 255, .02);
   transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.parking-list-image {
   position: relative;
   height: 205px;
   overflow: hidden;
}

.parking-list-image::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(0deg, rgba(0, 0, 0, .62), transparent 65%);
}

.parking-list-image img {
   height: 100%;
   object-fit: cover;
   filter: none;
   transition: transform .7s ease;
}

.parking-list-body {
   min-height: 178px;
   padding: 18px 16px;
   display: grid;
   grid-template-columns: 32px 1fr 22px;
   gap: 10px;
   align-items: start;
}

.card-number {
   color: var(--quiet);
   font: 15px/1.2 var(--serif-en);
}

.card-en {
   color: var(--muted);
   font: var(--text-label)/1.45 var(--sans);
   letter-spacing: .12em;
}

.parking-list-copy h2 {
   margin-top: 5px;
   font: 400 clamp(20px, 5vw, 23px)/1.45 var(--serif-ja);
}

.card-address,
.card-feature {
   margin-top: 8px;
   color: var(--subtle);
   font-size: var(--text-body);
   line-height: 1.8;
}

.mini-spec {
   margin-top: 13px;
   display: flex;
   gap: 22px;
}

.mini-spec div {
   display: flex;
   align-items: baseline;
   gap: 7px;
}

.mini-spec dt {
   color: var(--muted);
   font-size: var(--text-label);
}

.mini-spec dd {
   font-size: var(--text-support);
}

.status-pill {
   width: max-content;
   margin-top: 14px;
   padding: 8px 16px;
   border: 1px solid currentColor;
   border-radius: 999px;
   font-size: 20px;
   font-weight: 700;
   line-height: 1.4;
}

/* 空きあり */
.status-pill.is-available {
   color: #6fcf97;
}

/* 満車 */
.status-pill.is-full {
   color: #b98b8b;
}

.card-arrow {
   align-self: center;
   color: var(--subtle);
   font-size: 22px;
   transition: transform .3s ease;
}

/* =========================
   カルーセル
========================= */
.carousel {
   position: relative;
   overflow: hidden;
   border: 1px solid var(--line);
   background: #080808;
   touch-action: pan-y;
}

.carousel-track {
   display: flex;
   transition: transform .58s cubic-bezier(.22, .7, .2, 1);
}

.carousel-slide {
   min-width: 100%;
   position: relative;
   overflow: hidden;
}

.carousel-slide img {
   aspect-ratio: 16/10;
   object-fit: cover;
   filter: none;
}

.carousel-slide::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(0deg, rgba(0, 0, 0, .5), transparent 55%);
}

.carousel-slide figcaption {
   display: none !important;
   position: absolute;
   z-index: 2;
   left: 14px;
   bottom: 12px;
   color: rgba(255, 255, 255, .84);
   font-size: 10px;
   letter-spacing: .12em;
}

.carousel-button {
   position: absolute;
   z-index: 4;
   top: 50%;
   width: 44px;
   height: 44px;
   border: 1px solid var(--line-strong);
   border-radius: 50%;
   background: rgba(0, 0, 0, .55);
   transform: translateY(-50%);
   cursor: pointer;
}

.carousel-button.prev {
   left: 10px;
}

.carousel-button.next {
   right: 10px;
}

.carousel-dots {
   min-height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 9px;
}

.carousel-dots button {
   width: 7px;
   height: 7px;
   padding: 0;
   border: 1px solid #888;
   border-radius: 50%;
   background: transparent;
}

.carousel-dots button.is-active {
   background: #eee;
   border-color: #eee;
}

/* =========================
   空き情報詳細
========================= */
.availability-summary {
   padding: 42px 0;
   text-align: center;
}

.availability-summary>p {
   color: var(--muted);
   font-size: var(--text-label);
   line-height: 1.4;
   letter-spacing: .12em;
}

.availability-big {
   margin-top: 8px;
   font: 400 clamp(52px, 17vw, 110px)/1 var(--serif-ja);
   letter-spacing: .04em;
}

.availability-big.is-full {
   color: #b98b8b;
}

.price-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
   margin-top: 24px;
}

.price-card {
   padding: 22px 14px;
   border: 1px solid var(--line);
   text-align: center;
}

.price-card dt {
   color: var(--muted);
   font-size: var(--text-support);
}

.price-card dd {
   margin-top: 7px;
   font: 26px/1.2 var(--serif-en);
}

.lot-diagram {
   margin-top: 28px;
   padding: 20px 14px;
   border: 1px solid var(--line);
   background: #0b0b0b;
}

.lot-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 6px;
}

.lot-space {
   min-height: 43px;
   display: grid;
   place-items: center;
   border: 1px solid #555;
   color: var(--muted);
   font-size: 12px;
}

.lot-space.is-open {
   border-color: #a66b6b;
   color: #e1b6b6;
   background: rgba(150, 80, 80, .15);
}

.lot-legend {
   margin-top: 14px;
   display: flex;
   gap: 18px;
   color: var(--muted);
   font-size: var(--text-label);
}

.lot-legend span::before {
   content: "";
   display: inline-block;
   width: 10px;
   height: 10px;
   margin-right: 6px;
   border: 1px solid #555;
   vertical-align: -1px;
}

.lot-legend .open::before {
   border-color: #a66b6b;
   background: rgba(150, 80, 80, .15);
}

.map-placeholder {
   min-height: 260px;
   display: grid;
   place-items: center;
   padding: 24px;
   border: 1px solid var(--line);
   background: radial-gradient(circle, #202020, #090909 68%);
   text-align: center;
}

.map-placeholder[hidden] {
   display: none;
}

.map-frame {
   width: 100% !important;
   height: 480px !important;
   border: 0;
   filter: none !important;
   opacity: 1 !important;
   display: block;
}

.carousel+.map-placeholder,
.carousel+.map-frame {
   margin-top: 24px;
}

.map-placeholder strong {
   font: 400 23px/1.4 var(--serif-en);
   letter-spacing: .1em;
}

.map-placeholder p {
   margin-top: 9px;
   color: var(--subtle);
   font-size: var(--text-body);
   line-height: 1.8;
}

/* =========================
   ボタン・案内カード
========================= */
.button {
   min-height: 54px;
   padding: 14px 18px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--line-strong);
   background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .018));
   font-size: var(--text-body);
   line-height: 1.5;
   letter-spacing: .05em;
   text-align: center;
   transition: .25s ease;
   cursor: pointer;
}

.button-block {
   width: 100%;
}

.button+.button {
   margin-top: 10px;
}

.action-grid {
   display: grid;
   gap: 14px;
}

.photo-action-card {
   position: relative;
   min-height: 285px;
   overflow: hidden;
   border: 1px solid var(--line);
}

.photo-action-card>img {
   position: absolute;
   inset: 0;
   height: 100%;
   object-fit: cover;
   filter: none;
   transition: transform .8s ease;
}

.photo-action-card::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(0deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .12));
}

.photo-action-copy {
   position: absolute;
   z-index: 2;
   inset: auto 20px 20px;
}

.photo-action-copy .number {
   color: var(--muted);
   font: 14px/1 var(--serif-en);
}

.photo-action-copy .en {
   margin-top: 8px;
   color: var(--subtle);
   font: var(--text-label)/1.4 var(--sans);
   letter-spacing: .13em;
}

.photo-action-copy h2 {
   margin-top: 7px;
   font: 400 23px/1.4 var(--serif-ja);
}

.process-grid {
   display: grid;
   gap: 10px;
}

.process-card {
   padding: 21px 18px;
   border: 1px solid var(--line);
   background: rgba(255, 255, 255, .02);
}

.process-card span {
   color: var(--muted);
   font: var(--text-label)/1.2 var(--serif-en);
   letter-spacing: .13em;
}

.process-card h3 {
   margin-top: 10px;
   font: 400 clamp(18px, 4.5vw, 20px)/1.5 var(--serif-ja);
}

.process-card p {
   margin-top: 8px;
   color: var(--subtle);
   font-size: var(--text-body);
   line-height: 1.8;
}

.download-grid {
   display: grid;
   gap: 10px;
}

.download-card {
   min-height: 76px;
   padding: 14px 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 15px;
   border: 1px solid var(--line);
}

.download-card small {
   display: block;
   color: var(--muted);
   font-size: var(--text-label);
   letter-spacing: .1em;
}

.download-card strong {
   display: block;
   margin-top: 4px;
   font: 400 clamp(15px, 4vw, 17px)/1.55 var(--serif-ja);
}

.download-card::after {
   content: "↓";
   color: var(--subtle);
}

/* =========================
   お支払い
========================= */
.payment-choice {
   display: grid;
   gap: 12px;
}

.payment-choice button {
   width: 100%;
   min-height: 122px;
   padding: 19px;
   border: 1px solid var(--line);
   background: rgba(255, 255, 255, .025);
   text-align: left;
   cursor: pointer;
}

.payment-choice button[aria-expanded="true"] {
   border-color: var(--line-strong);
   background: rgba(255, 255, 255, .06);
}

.payment-choice small {
   color: var(--muted);
   font: var(--text-label)/1.3 var(--serif-en);
   letter-spacing: .12em;
}

.payment-choice strong {
   display: block;
   margin-top: 10px;
   font: 400 clamp(18px, 4.7vw, 21px)/1.55 var(--serif-ja);
}

.payment-note {
   max-width: 1100px;
   margin-left: auto;
   margin-right: auto;
}

.bank-panel {
   margin-top: 20px;
   padding: 22px 17px;
   border: 1px solid var(--line-strong);
   background: rgba(255, 255, 255, .025);
}

.bank-panel h2 {
   font: 400 20px/1.5 var(--serif-ja);
}

.bank-panel-close {
   margin-top: 24px;
}

.bank-list {
   margin-top: 18px;
}

.bank-list div {
   min-height: 50px;
   padding: 11px 0;
   display: grid;
   grid-template-columns: 100px 1fr;
   gap: 8px;
   border-top: 1px solid var(--line);
}

.bank-list dt {
   color: var(--muted);
   font-size: var(--text-support);
}

.bank-list dd {
   font-size: var(--text-body);
}

.placeholder-note {
   margin-top: 14px;
   color: var(--muted);
   font-size: var(--text-support);
   line-height: 1.7;
}

.notice-card {
   margin-top: 18px;
   padding: 21px 17px;
   border: 1px solid var(--line);
}

.notice-card h2 {
   font: 400 19px/1.45 var(--serif-ja);
}

.notice-card ul {
   margin-top: 12px;
   padding-left: 1.3em;
   color: var(--silver);
   font-size: var(--text-body);
   line-height: 1.85;
}

.account-number-wrap {
   display: flex;
   align-items: center;
   gap: 16px;
}

.copy-button {
   padding: 6px 12px;
   border: 1px solid var(--line-strong);
   border-radius: 6px;
   background: transparent;
   color: var(--silver);
   font-size: 13px;
   cursor: pointer;
}

.copy-button:hover {
   background: #fff;
   color: #000;
}

/* =========================
   お問い合わせ・変更・解約
========================= */
.contact-hero {
   margin-top: 22px;
}

.phone-card {
   padding: 25px 18px;
   border: 1px solid var(--line-strong);
   text-align: center;
   background: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .012));
}

.phone-card h2 {
   font: 400 21px/1.5 var(--serif-ja);
}

.phone-card p:not(.section-kicker) {
   margin-top: 9px;
   color: var(--subtle);
   font-size: var(--text-body);
   line-height: 1.8;
}

.phone-card .button {
   margin-top: 18px;
}

.phone-area {
   margin-top: 18px;
}

.phone-area a {
   font: 28px/1 var(--serif-en);
   letter-spacing: .06em;
}

.change-list {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px;
   margin-top: 22px;
   padding: 0;
}

.change-list li {
   min-height: 78px;
   padding: 14px 10px;
   display: grid;
   place-items: center;
   border: 1px solid var(--line);
   color: var(--silver);
   font-size: var(--text-support);
   line-height: 1.55;
   text-align: center;
   list-style: none;
}

.change-item {
   position: relative;
   cursor: default;
}

.change-tooltip {
   position: absolute;
   left: 50%;
   bottom: calc(100% + 14px);
   transform: translateX(-50%) translateY(8px);

   width: max-content;
   min-width: 220px;
   max-width: 280px;

   padding: 18px 20px;

   background: rgba(18, 18, 18, 0.96);
   border: 1px solid rgba(255, 255, 255, 0.18);
   box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);

   color: #fff;

   opacity: 0;
   visibility: hidden;
   pointer-events: none;

   transition:
      opacity 0.28s ease,
      transform 0.28s ease,
      visibility 0.28s ease;

   z-index: 20;
}

.change-tooltip p {
   margin: 0 0 10px;
   font-size: 13px;
   letter-spacing: 0.12em;
   color: var(--silver);
}

.change-tooltip ul {
   margin: 0;
   padding-left: 18px;
}

.change-tooltip li {
   margin: 6px 0;
   font-size: 15px;
   line-height: 1.6;
}

/* PC：マウスを当てている間だけ表示 */
.change-item:hover .change-tooltip {
   opacity: 1;
   visibility: visible;
   transform: translateX(-50%) translateY(0);
}

/* スマホ：長押し中だけ表示 */
.change-item.is-pressing .change-tooltip {
   opacity: 1;
   visibility: visible;
   transform: translateX(-50%) translateY(0);
}

.cancel-card {
   margin-top: 18px;
   padding: 23px 18px;
   border: 1px solid var(--line);
   background: linear-gradient(145deg, rgba(255, 255, 255, .04), transparent);
}

.cancel-card p:not(.section-kicker) {
   margin-top: 12px;
   color: var(--silver);
   font-size: var(--text-body);
   line-height: 1.85;
}

.faq-link {
   min-height: 64px;
   margin-top: 22px;
   padding: 14px 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
   font-family: var(--serif-ja);
}

/* =========================
   ニュース・口コミ
========================= */
.news-hero-image {
   margin-top: 24px;
}

.news-list {
   border-top: 1px solid var(--line);
}

.news-item {
   padding: 24px 2px;
   border-bottom: 1px solid var(--line);
}

.news-item time {
   color: var(--muted);
   font: var(--text-label)/1.3 var(--serif-en);
   letter-spacing: .12em;
}

.news-item h2 {
   margin-top: 10px;
   font: 400 clamp(18px, 4.7vw, 21px)/1.55 var(--serif-ja);
}

.news-item p {
   margin-top: 9px;
   color: var(--subtle);
   font-size: var(--text-body);
   line-height: 1.8;
}

.news-more {
   display: flex;
   justify-content: center;
   margin-top: 40px;
}

.news-more .button {
   width: auto;
   min-height: auto;
   padding: 10px 2px;

   border: none;
   border-bottom: 1px solid rgba(255, 255, 255, 0.35);
   border-radius: 0;

   background: transparent;
   color: rgba(255, 255, 255, 0.78);

   font-size: 14px;
   font-weight: 400;
   letter-spacing: 0.12em;

   cursor: pointer;
   transition:
      color 0.25s ease,
      border-color 0.25s ease,
      opacity 0.25s ease;
}

.news-more .button:hover {
   color: #fff;
   border-bottom-color: #fff;
}

.news-more .button:active {
   opacity: 0.55;
}

.review-grid {
   display: grid;
   gap: 14px;
}

.review-card {
   overflow: hidden;
   border: 1px solid var(--line);
}

.review-card figure {
   position: relative;
   height: 175px;
   overflow: hidden;
}

.review-card figure::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent);
}

.review-card img {
   height: 100%;
   object-fit: cover;
   filter: none;
}

.review-card-body {
   padding: 18px;
}

.review-card h3 {
   font: 400 clamp(19px, 5vw, 21px)/1.5 var(--serif-ja);
}

.review-card p {
   margin-top: 8px;
   color: var(--subtle);
   font-size: var(--text-body);
   line-height: 1.8;
}

.review-card .button {
   margin-top: 15px;
}

/* =========================
   FAQ
========================= */
.faq-list {
   border-top: 1px solid var(--line);
}

.faq-item {
   border-bottom: 1px solid var(--line);
}

.faq-question {
   width: 100%;
   min-height: 72px;
   padding: 17px 4px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   border: 0;
   background: transparent;
   font-size: var(--text-body);
   line-height: 1.65;
   text-align: left;
   cursor: pointer;
}

.faq-question::after {
   content: "+";
   color: var(--muted);
   font-size: 20px;
}

.faq-question[aria-expanded="true"]::after {
   content: "−";
}

.faq-answer {
   padding: 0 4px 22px;
   color: var(--subtle);
   font-size: var(--text-body);
   line-height: 1.85;
}

/* =========================
   ブランド詳細ページ
========================= */
.brand-hero {
   position: relative;
   min-height: calc(100svh - var(--header));
   display: grid;
   align-items: end;
   overflow: hidden;
}

.brand-hero>img {
   position: absolute;
   inset: 0;
   height: 100%;
   object-fit: cover;
   filter: none;
   animation: heroZoom 12s ease-out both;
}

.brand-hero::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(0deg, rgba(0, 0, 0, .9), transparent 65%), linear-gradient(90deg, rgba(0, 0, 0, .55), transparent);
}

.brand-hero-copy {
   position: relative;
   z-index: 2;
   padding: 70px 0 54px;
}

.brand-hero-copy h1 {
   font: 400 clamp(31px, 8vw, 68px)/1.45 var(--serif-ja);
}

.brand-hero-copy p {
   margin-top: 10px;
   color: var(--silver);
   font: var(--text-label)/1.45 var(--serif-en);
   letter-spacing: .12em;
}

.story-section {
   min-height: 72svh;
   padding: 64px 0;
   display: grid;
   align-items: center;
}

.story-grid {
   display: grid;
   gap: 28px;
   align-items: center;
}

.story-photo {
   position: relative;
   overflow: hidden;
   min-height: 330px;
}

.story-photo img {
   height: 100%;
   min-height: 330px;
   object-fit: cover;
   filter: none;
   transition: transform 1.2s ease;
}

.story-photo::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(0deg, rgba(0, 0, 0, .35), transparent);
}

.story-copy .big-number {
   color: #e8e8e8;
   margin: 0;
}

.story-copy .big-number {
   color: #e8e8e8;
   font: 400 clamp(70px, 24vw, 150px)/.8 var(--serif-en);
   letter-spacing: -.04em;
}

.story-copy .big-number .unit {
   display: block;
   margin-top: 14px;
   font: 400 14px/1.4 var(--sans);
   letter-spacing: 0.18em;
   color: var(--silver);
}

.story-copy h2 {
   margin-top: 24px;
   font: 400 clamp(28px, 8vw, 54px)/1.45 var(--serif-ja);
   letter-spacing: .07em;
}

.story-copy p {
   margin-top: 16px;
   color: var(--silver);
   font-size: var(--text-body);
   line-height: 1.85;
}

.width-overlay {
   position: absolute;
   z-index: 3;
   inset: auto 8% 28px;
   display: flex;
   align-items: center;
   color: #fff;
   font: 18px/1 var(--serif-en);
   text-shadow: 0 2px 10px #000;
}

.width-overlay::before,
.width-overlay::after {
   content: "";
   flex: 1;
   height: 1px;
   background: #fff;
}

.width-overlay span {
   padding: 0 10px;
}

.total-overlay {
   position: absolute;
   z-index: 3;
   left: 22px;
   bottom: 22px;
}

.total-overlay strong {
   display: block;
   font: 90px/.78 var(--serif-en);
}

.total-overlay span {
   font: 11px/1.3 var(--sans);
   letter-spacing: .14em;
}

@keyframes heroZoom {
   from {
      transform: scale(1.02);
   }

   to {
      transform: scale(1.08);
   }
}

/* =========================
   スクロール表示アニメーション
========================= */
.reveal {
   opacity: 0;
   transform: translateY(18px);
   transition: opacity .65s ease, transform .65s ease;
}

.reveal.from-left {
   transform: translateX(-22px);
}

.reveal.from-right {
   transform: translateX(22px);
}

.reveal.is-visible {
   opacity: 1;
   transform: none;
}

.reveal.is-visible .story-photo img {
   transform: scale(1.035);
}

/* =========================
   PC表示
========================= */
@media (min-width: 760px) {
   :root {
      --header: 72px;
      --bottom: 0px;
   }

   .bottom-nav {
      display: none;
   }

   main {
      padding-bottom: 0;
   }

   .container {
      width: min(calc(100% - 72px), var(--max));
   }

   .home-hero {
      min-height: 620px;
   }

   .home-hero-copy {
      padding-bottom: 78px;
   }

   .quick-menu {
      padding: 62px 0 78px;
   }

   .quick-menu-grid {
      grid-template-columns: repeat(3, 1fr);
   }

   .quick-card {
      min-height: 190px;
      padding: 25px;
   }

   .page-hero {
      padding: 82px 0 66px;
   }

   .section {
      padding: 78px 0;
   }

   .parking-list {
      gap: 30px;
   }

   .parking-list-card {
      display: grid;
      grid-template-columns: 48% 1fr;
   }

   .parking-list-image {
      height: 100%;
      min-height: 300px;
   }

   .parking-list-body {
      min-height: 300px;
      padding: 36px 30px;
   }

   .parking-list-card:hover {
      transform: translate(3px, -3px);
      border-color: var(--line-strong);
      box-shadow: 0 22px 60px rgba(0, 0, 0, .45);
   }

   .parking-list-card:hover img {
      transform: scale(1.035);
   }

   .parking-list-card:hover .card-arrow {
      transform: translateX(5px);
   }

   .quick-card:hover,
   .button:hover {
      transform: translateY(-2px);
      border-color: var(--line-strong);
   }

   .visual-banner {
      min-height: 390px;
   }

   .visual-banner img {
      min-height: 390px;
   }

   .visual-banner:hover img {
      transform: scale(1.025);
   }

   .carousel-slide img {
      aspect-ratio: 16/8.5;
   }

   .action-grid {
      grid-template-columns: 1fr 1fr;
   }

   .photo-action-card {
      min-height: 420px;
   }

   .photo-action-card:hover img {
      transform: scale(1.035);
   }

   .process-grid {
      grid-template-columns: repeat(4, 1fr);
   }

   .download-grid {
      grid-template-columns: repeat(3, 1fr);
   }

   .payment-choice {
      grid-template-columns: 1fr 1fr;
   }

   .bank-panel {
      padding: 34px;
   }

   .change-list {
      grid-template-columns: repeat(5, 1fr);
   }

   .review-grid {
      grid-template-columns: repeat(3, 1fr);
   }

   .story-grid {
      grid-template-columns: 1.1fr .9fr;
      gap: 8vw;
   }

   .story-grid.reverse .story-photo {
      order: 2;
   }

   .story-grid.reverse .story-copy {
      order: 1;
   }

   .story-photo,
   .story-photo img {
      min-height: 580px;
   }

   .story-section {
      min-height: 92svh;
   }
}

@media (max-width: 759px) {

   .parking-list-card:active,
   .quick-card:active,
   .button:active {
      transform: scale(.985);
   }

   .carousel-button {
      width: 40px;
      height: 40px;
   }
}

@media (prefers-reduced-motion: reduce) {

   *,
   *::before,
   *::after {
      scroll-behavior: auto !important;
      animation-duration: .01ms !important;
      transition-duration: .01ms !important;
   }

   .reveal {
      opacity: 1;
      transform: none;
   }
}

/* ACCESS 上部余白 */
.access-head {
   margin-top: 155px;
}

/* ========================
   契約ステップ 横スライダー
======================== */

.contract-step-slider {
   display: flex;
   gap: 20px;

   overflow-x: auto;
   overflow-y: hidden;

   padding: 10px 6vw 34px;

   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;

   -webkit-overflow-scrolling: touch;

   scrollbar-width: none;
}

.contract-step-slider::-webkit-scrollbar {
   display: none;
}

.contract-step-card {
   flex: 0 0 clamp(420px, 42vw, 620px);
   min-height: 560px;

   overflow: hidden;

   border: 1px solid rgba(255, 255, 255, 0.14);
   border-radius: 24px;

   background: #0b0b0b;

   scroll-snap-align: start;
}

.contract-step-visual {
   position: relative;

   height: 300px;
   overflow: hidden;

   background: #111;
}

.contract-step-visual img {
   width: 100%;
   height: 100%;

   display: block;

   object-fit: cover;

   filter: none;
}

.contract-step-big {
   position: absolute;

   left: 28px;
   bottom: 12px;

   font-family: var(--serif-en);
   font-size: clamp(90px, 10vw, 150px);
   font-weight: 400;
   line-height: 0.85;

   color: rgba(255, 255, 255, 0.92);

   letter-spacing: -0.05em;
}

.contract-step-content {
   padding: 34px 36px 40px;
}

.contract-step-no {
   margin: 0 0 14px;

   color: var(--silver);

   font-size: 13px;
   letter-spacing: 0.18em;
}

.contract-step-card h3 {
   margin: 0 0 16px;

   color: #fff;

   font-family: var(--serif-ja);
   font-size: clamp(28px, 3vw, 40px);
   font-weight: 400;
}

.contract-step-copy {
   margin: 0;

   color: var(--silver);

   font-size: 17px;
   line-height: 1.8;
}

/* スマホ */
@media (max-width: 768px) {

   .contract-step-card {
      flex: 0 0 84vw;
      min-height: 500px;
   }

   .contract-step-visual {
      height: 250px;
   }

   .contract-step-big {
      left: 20px;
      bottom: 10px;

      font-size: 90px;
   }

   .contract-step-content {
      padding: 28px 24px 32px;
   }

   .contract-step-card h3 {
      font-size: 28px;
   }
}

/* ========================
   契約フォーム モーダル
======================== */

.contract-modal {
   position: fixed;
   inset: 0;

   z-index: 9999;

   display: flex;
   align-items: center;
   justify-content: center;

   padding: 40px;

   opacity: 0;
   visibility: hidden;
   pointer-events: none;

   transition:
      opacity 0.3s ease,
      visibility 0.3s ease;
}

.contract-modal.is-open {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
}

.contract-modal-backdrop {
   position: absolute;
   inset: 0;

   background: rgba(0, 0, 0, 0.72);
   backdrop-filter: blur(10px);
}

.contract-modal-panel {
   position: relative;
   z-index: 1;

   width: min(100%, 1100px);
   max-height: 88vh;
   overflow-y: auto;

   padding: 70px;

   background: #0b0b0b;

   border: 1px solid rgba(255, 255, 255, 0.18);
   border-radius: 28px;

   box-shadow:
      0 40px 100px rgba(0, 0, 0, 0.65);
}

.contract-modal-close {
   position: absolute;

   top: 24px;
   right: 24px;

   width: 48px;
   height: 48px;

   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 50%;

   background: rgba(255, 255, 255, 0.06);
   color: #fff;

   font-size: 28px;
   line-height: 1;

   cursor: pointer;
}

.contract-modal-kicker {
   margin: 0 0 20px;

   color: var(--silver);

   font-size: 14px;
   letter-spacing: 0.18em;
}

.contract-modal-title {
   margin: 0;

   color: #fff;

   font-family: var(--serif-ja);
   font-size: clamp(38px, 5vw, 70px);
   font-weight: 400;
   line-height: 1.35;
}

.contract-modal-copy {
   margin: 26px 0 46px;

   color: var(--silver);

   font-size: 17px;
   line-height: 1.8;
}

.contract-form-list {
   display: grid;
   gap: 14px;
}

.contract-form-item {
   display: grid;

   grid-template-columns:
      70px 1fr auto;

   gap: 24px;

   align-items: center;

   padding: 26px 28px;

   border: 1px solid rgba(255, 255, 255, 0.16);

   color: #fff;
   text-decoration: none;

   background:
      linear-gradient(135deg,
         rgba(255, 255, 255, 0.035),
         rgba(255, 255, 255, 0.01));

   transition:
      transform 0.25s ease,
      border-color 0.25s ease,
      background 0.25s ease;
}

.contract-form-item:hover {
   transform: translateY(-3px);

   border-color: rgba(255, 255, 255, 0.36);

   background:
      linear-gradient(135deg,
         rgba(255, 255, 255, 0.065),
         rgba(255, 255, 255, 0.02));
}

.contract-form-number {
   font-family: var(--serif-en);
   font-size: 42px;
   color: rgba(255, 255, 255, 0.72);
}

.contract-form-text {
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.contract-form-text small {
   color: var(--silver);

   font-size: 11px;
   letter-spacing: 0.15em;
}

.contract-form-text strong {
   font-family: var(--serif-ja);

   font-size: 24px;
   font-weight: 400;
}

.contract-form-text span {
   color: var(--silver);

   font-size: 14px;
}

.contract-form-arrow {
   font-size: 28px;
   color: var(--silver);
}


/* スマホ */
@media (max-width: 768px) {

   .contract-modal {
      padding: 14px;
   }

   .contract-modal-panel {
      padding:
         70px 22px 28px;

      border-radius: 22px;
   }

   .contract-modal-title {
      font-size: 38px;
   }

   .contract-modal-copy {
      margin-bottom: 32px;

      font-size: 15px;
   }

   .contract-form-item {
      grid-template-columns:
         48px 1fr auto;

      gap: 14px;

      padding: 20px 16px;
   }

   .contract-form-number {
      font-size: 30px;
   }

   .contract-form-text strong {
      font-size: 19px;
   }

}

/* =========================
   紙契約 ダウンロードボタン
========================= */

.paper-download-actions {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 20px;
   width: 100%;
   margin-top: 36px;
}

/* ボタンは既存の .button .button-block のデザインをそのまま使用 */
.paper-download-actions .button {
   width: 100%;
   margin: 0;
   box-sizing: border-box;
}

/* スマホ */
@media (max-width: 768px) {
   .paper-download-actions {
      grid-template-columns: 1fr;
      gap: 14px;
   }
}

/* =========================
   車庫証明
========================= */

.certificate-actions {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 20px;
   width: 100%;
   margin-top: 36px;
}

/* 他のボタンと同じサイズを使用 */
.certificate-actions .button {
   width: 100%;
   margin: 0;
   box-sizing: border-box;
}

/* モーダル内 */
.certificate-modal-group {
   display: grid;
   gap: 8px;
}

.certificate-guide-link {
   display: flex;
   justify-content: flex-end;
   padding: 6px 4px 12px;
   color: var(--silver);
   text-decoration: none;
   font-size: 13px;
   letter-spacing: 0.06em;
   transition: color 0.25s ease;
}

.certificate-guide-link:hover {
   color: #fff;
}

/* スマホ */
@media (max-width: 768px) {
   .certificate-actions {
      grid-template-columns: 1fr;
      gap: 14px;
   }
}

/* =========================
   シャトー岐大前駐車場 区画図
========================= */

.parking-layout-section {
   padding-top: 80px;
   padding-bottom: 100px;
}

.parking-layout {
   padding: 28px;

   border: 1px solid rgba(255, 255, 255, 0.16);

   background:
      linear-gradient(180deg,
         rgba(255, 255, 255, 0.018),
         rgba(255, 255, 255, 0.006));
}

/* A棟側・B棟側 */
.parking-row-block {
   width: 100%;
}

.parking-row-label {
   margin: 0 0 10px;

   color: #fff;

   font-size: 15px;
   font-weight: 400;
   letter-spacing: 0.08em;
}

/* 区画の横並び */
.parking-row {
   display: grid;

   grid-template-columns:
      repeat(16, minmax(58px, 1fr));

   width: 100%;

   overflow-x: auto;
   overflow-y: hidden;

   scrollbar-width: none;

   -webkit-overflow-scrolling: touch;
}

.parking-row::-webkit-scrollbar {
   display: none;
}

/* 共通区画 */
.parking-space {
   min-width: 58px;
   height: 180px;

   display: flex;
   align-items: center;
   justify-content: center;

   border-top: 1px solid rgba(255, 255, 255, 0.65);
   border-bottom: 1px solid rgba(255, 255, 255, 0.65);
   border-left: 1px solid rgba(255, 255, 255, 0.65);

   font-family: var(--serif-en);
   font-size: 20px;
   font-weight: 400;

   transition:
      background 0.25s ease,
      border-color 0.25s ease,
      color 0.25s ease,
      transform 0.25s ease;
}

.parking-space:last-child {
   border-right: 1px solid rgba(255, 255, 255, 0.65);
}


/* =========================
   契約中
   赤表示
========================= */

.parking-space.is-occupied {
   background: rgba(120, 45, 45, 0.22);

   border-color: rgba(198, 88, 88, 0.78);

   color: #e9b4b4;
}


/* =========================
   空き
   白表示
========================= */

.parking-space.is-available {
   background: rgba(255, 255, 255, 0.035);

   border-color: rgba(255, 255, 255, 0.88);

   color: #fff;
}


/* PCで少し反応を付ける */
@media (hover: hover) {

   .parking-space.is-available:hover {
      background: rgba(255, 255, 255, 0.09);
   }

}


/* =========================
   駐車場中央通路
========================= */

.parking-lane {
   display: flex;
   align-items: center;
   justify-content: space-around;

   min-height: 150px;

   color: rgba(255, 255, 255, 0.94);

   font-size: 58px;
   font-weight: 300;
   line-height: 1;
}

.parking-lane span {
   display: block;
}


/* =========================
   凡例
========================= */

.parking-legend {
   display: flex;
   align-items: center;
   flex-wrap: wrap;

   gap: 28px;

   margin-top: 28px;

   color: var(--silver);

   font-size: 14px;
}

.parking-legend span {
   display: flex;
   align-items: center;

   gap: 8px;
}

.legend-box {
   width: 18px;
   height: 18px;

   display: inline-block;

   box-sizing: border-box;
}


/* 契約中 凡例 */
.legend-box.occupied {
   background: rgba(120, 45, 45, 0.22);

   border: 1px solid rgba(198, 88, 88, 0.85);
}


/* 空き 凡例 */
.legend-box.available {
   background: rgba(255, 255, 255, 0.035);

   border: 1px solid rgba(255, 255, 255, 0.88);
}


/* =========================
   スマートフォン
========================= */

@media (max-width: 768px) {

   .parking-layout-section {
      padding-top: 60px;
      padding-bottom: 80px;
   }

   .parking-layout {
      padding: 18px 14px;
   }

   .parking-row-label {
      font-size: 13px;
      margin-bottom: 8px;
   }

   .parking-row {
      grid-template-columns:
         repeat(16, 62px);
   }

   .parking-space {
      min-width: 62px;
      height: 130px;

      font-size: 18px;
   }

   .parking-lane {
      min-height: 105px;

      font-size: 40px;
   }

   .parking-legend {
      gap: 20px;

      margin-top: 22px;

      font-size: 13px;
   }

   .legend-box {
      width: 16px;
      height: 16px;
   }

}

/* =========================
   老ノ上駐車場 区画図
   PC・スマホ完全レスポンシブ
========================= */

.oinokami-layout {
   position: relative;

   width: 100%;
   aspect-ratio: 16 / 10;

   margin-top: 40px;

   background: #171717;
   border: 1px solid rgba(255, 255, 255, 0.16);

   overflow: hidden;
   box-sizing: border-box;
}


/* =========================
   1〜9番
========================= */

.oinokami-top-row {
   position: absolute;

   left: 2%;
   top: 4%;

   width: 96%;
   height: 30%;

   display: grid;
   grid-template-columns: repeat(9, 1fr);
}


/* =========================
   区画 共通
========================= */

.oinokami-space {
   display: flex;
   align-items: center;
   justify-content: center;

   box-sizing: border-box;

   font-family: var(--serif-en);
   font-size: clamp(13px, 2vw, 28px);
   font-weight: 400;

   line-height: 1;

   transition:
      background 0.25s ease,
      border-color 0.25s ease,
      color 0.25s ease;
}


/* 契約中 */
.oinokami-space.is-occupied {
   background: rgba(120, 45, 45, 0.24);

   border: 2px solid rgba(208, 88, 88, 0.88);

   color: #f0b3b3;
}


/* 空き */
.oinokami-space.is-available {
   background: rgba(255, 255, 255, 0.015);

   border: 2px solid rgba(255, 255, 255, 0.88);

   color: #fff;
}


/* =========================
   左側 出入口
========================= */

.oinokami-entry-left {
   position: absolute;

   left: 2%;
   top: 42%;

   display: flex;
   align-items: center;

   gap: clamp(8px, 1.5vw, 24px);
}


/* 出入口 共通 */
.oinokami-entry-label {
   color: #fff;

   font-size: clamp(10px, 1.2vw, 16px);
   font-weight: 500;

   letter-spacing: 0.08em;
}


/* 左側だけ縦書き */
.oinokami-entry-label.vertical {
   writing-mode: vertical-rl;
   text-orientation: upright;

   line-height: 1.1;
}


/* =========================
   両向き矢印 共通
========================= */

.oinokami-direction-arrow {
   display: block;

   color: #fff;

   font-family: Arial, sans-serif;

   font-size: clamp(30px, 4vw, 58px);
   font-weight: 300;

   line-height: 1;

   pointer-events: none;
}


/* =========================
   10・11番
========================= */

.oinokami-bottom-group {
   position: absolute;

   left: 13%;
   bottom: 8%;

   width: 32%;
   height: 34%;

   transform: rotate(30deg);
   transform-origin: center;
}


/*
   10・11は同じサイズ
*/
.oinokami-bottom-group .oinokami-space {
   position: absolute;

   width: 78%;
   height: 42%;

   margin: 0;
}


/*
   11番
   10番より右上へずらす
*/
.oinokami-bottom-group .oinokami-space:first-child {
   left: 18%;
   top: 0;
}


/*
   10番
*/
.oinokami-bottom-group .oinokami-space:last-child {
   left: 0;
   top: 42%;
}


/* =========================
   右下 出入口
========================= */

.oinokami-entry-right {
   position: absolute;

   right: 6%;
   bottom: 10%;

   display: flex;
   flex-direction: column;
   align-items: center;

   gap: 4px;
}


/* 左側と同じ ↔ を斜めにする */
.oinokami-direction-arrow.diagonal {
   transform: rotate(45deg);
}


/* =========================
   凡例
========================= */

.oinokami-legend {
   display: flex;
   align-items: center;
   justify-content: center;

   gap: 34px;

   margin-top: 24px;

   color: var(--silver);

   font-size: 14px;
}

.oinokami-legend span {
   display: flex;
   align-items: center;

   gap: 9px;
}

.legend-box {
   width: 18px;
   height: 18px;

   display: inline-block;

   box-sizing: border-box;
}


/* 契約中 */
.legend-box.occupied {
   background: rgba(120, 45, 45, 0.24);

   border: 1px solid rgba(208, 88, 88, 0.88);
}


/* 空き */
.legend-box.available {
   background: rgba(255, 255, 255, 0.015);

   border: 1px solid rgba(255, 255, 255, 0.88);
}


/* =========================
   スマホ
========================= */

@media (max-width: 768px) {

   .oinokami-layout {
      width: 100%;

      /* 縦方向を少し広めに */
      aspect-ratio: 4 / 5;

      margin-top: 24px;
   }


   /* 1〜9 */
   .oinokami-top-row {
      left: 2%;
      top: 3%;

      width: 96%;
      height: 23%;
   }


   .oinokami-space {
      font-size: clamp(11px, 3vw, 17px);
   }


   .oinokami-space.is-occupied,
   .oinokami-space.is-available {
      border-width: 1px;
   }


   /* 左出入口 */
   .oinokami-entry-left {
      left: 3%;
      top: 33%;

      gap: 10px;
   }


   .oinokami-entry-label {
      font-size: 11px;
   }


   .oinokami-direction-arrow {
      font-size: 34px;
   }


   /* 10・11 */
   .oinokami-bottom-group {
      left: 13%;
      bottom: 13%;

      width: 54%;
      height: 37%;
   }


   .oinokami-bottom-group .oinokami-space {
      width: 53%;
      height: 23%;
   }


   .oinokami-bottom-group .oinokami-space:first-child {
      left: 18%;
      top: 0;
   }


   .oinokami-bottom-group .oinokami-space:last-child {
      left: 0;
      top: 23%;
   }


   /* 右下出入口 */
   .oinokami-entry-right {
      right: 5%;
      bottom: 12%;
   }


   /* 凡例 */
   .oinokami-legend {
      margin-top: 18px;

      gap: 22px;

      font-size: 12px;
   }


   .legend-box {
      width: 15px;
      height: 15px;
   }
}

/* =========================================
   高田駐車場 区画図
   完成版
========================================= */

.takada-layout {
   /* 全区画で共通のサイズ */
   --takada-space-width: 150px;
   --takada-space-height: 90px;

   position: relative;

   width: min(100%, 1000px);
   height: 650px;

   margin: 40px auto 0;

   background: #171717;

   border: 1px solid rgba(255, 255, 255, 0.16);

   box-sizing: border-box;
   overflow: hidden;
}


/* =========================================
   区画 共通
========================================= */

.takada-space {
   width: var(--takada-space-width);
   height: var(--takada-space-height);

   display: flex;
   align-items: center;
   justify-content: center;

   box-sizing: border-box;

   font-family: var(--serif-en);
   font-size: 24px;
   font-weight: 400;

   line-height: 1;

   transition:
      background 0.25s ease,
      border-color 0.25s ease,
      color 0.25s ease;
}


/* =========================================
   契約中
========================================= */

.takada-space.is-occupied {
   background: rgba(120, 45, 45, 0.24);

   border: 2px solid rgba(208, 88, 88, 0.88);

   color: #f0b3b3;
}


/* =========================================
   空き
========================================= */

.takada-space.is-available {
   background: rgba(255, 255, 255, 0.015);

   border: 2px solid rgba(255, 255, 255, 0.88);

   color: #fff;
}


/* =========================================
   1〜5番
   右側・縦並び
========================================= */

.takada-right-row {
   position: absolute;

   right: 7%;
   top: 7%;

   width: var(--takada-space-width);

   display: grid;

   grid-template-columns:
      var(--takada-space-width);

   grid-template-rows:
      repeat(5, var(--takada-space-height));

   gap: 0;
}


/* =========================================
   6〜9番
   下側・横並び

   HTML上では
   9 → 8 → 7 → 6
========================================= */

.takada-bottom-row {
   position: absolute;

   left: 7%;
   bottom: 7%;

   display: grid;

   grid-template-columns:
      repeat(4, var(--takada-space-width));

   grid-template-rows:
      var(--takada-space-height);

   gap: 0;
}


/* =========================================
   凡例
========================================= */

.takada-legend {
   display: flex;
   align-items: center;
   justify-content: center;

   gap: 34px;

   margin-top: 24px;

   color: var(--silver);

   font-size: 14px;
}


.takada-legend span {
   display: flex;
   align-items: center;

   gap: 9px;
}


.takada-legend .legend-box {
   width: 18px;
   height: 18px;

   display: inline-block;

   box-sizing: border-box;
}


/* 契約中 */
.takada-legend .legend-box.occupied {
   background: rgba(120, 45, 45, 0.24);

   border: 1px solid rgba(208, 88, 88, 0.88);
}


/* 空き */
.takada-legend .legend-box.available {
   background: rgba(255, 255, 255, 0.015);

   border: 1px solid rgba(255, 255, 255, 0.88);
}


/* =========================================
   PC ホバー
========================================= */

@media (hover: hover) {

   .takada-space.is-available:hover {
      background: rgba(255, 255, 255, 0.06);
   }

}


/* =========================================
   タブレット
========================================= */

@media (max-width: 900px) {

   .takada-layout {
      --takada-space-width: 110px;
      --takada-space-height: 66px;

      height: 500px;
   }

   .takada-space {
      font-size: 20px;
   }

}


/* =========================================
   スマートフォン
========================================= */

@media (max-width: 768px) {

   .takada-layout {
      /*
      画面幅に合わせて全区画を縮小
      4区画並べても切れないサイズ
    */
      --takada-space-width: 21vw;
      --takada-space-height: 13vw;

      width: 100%;
      height: 115vw;

      max-height: 570px;

      margin-top: 24px;
   }


   /* 1〜5 */
   .takada-right-row {
      right: 5%;
      top: 5%;
   }


   /* 9〜6 */
   .takada-bottom-row {
      left: 5%;
      bottom: 6%;
   }


   /* 数字 */
   .takada-space {
      font-size: 16px;
   }


   /* 線をスマホでは少し細く */
   .takada-space.is-occupied,
   .takada-space.is-available {
      border-width: 1px;
   }


   /* 凡例 */
   .takada-legend {
      gap: 22px;

      margin-top: 18px;

      font-size: 12px;
   }


   .takada-legend .legend-box {
      width: 15px;
      height: 15px;
   }

}