@charset "UTF-8";
/* =======================================================
   ELEVEN BASE Custom Styles
   ======================================================= */

/* ====== Global Font ====== */
body, h1, h2, h3, h4, h5, h6, p, a, span, li, button, input, textarea {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important;
  letter-spacing: 0.05em;
}

/* ====== FontAwesome force ====== */
.fa-brands, .fab { font-family: "Font Awesome 6 Brands" !important; font-weight: 400; }
.fa-solid, .fas  { font-family: "Font Awesome 6 Free" !important; font-weight: 900; }

/* ====== Utility Colors ====== */
.text-urgent { color: #ff2a2a !important; font-weight: 900; }
.bg-urgent { background-color: #ff2a2a !important; border-color: #ff2a2a !important; color: #fff !important; }
.bg-urgent:hover { background-color: #d90000 !important; color: #fff !important; }

/* ====== Typography ====== */
.price-main { font-size: 1.5rem; font-weight: bold; color: #ff2a2a; }
.price-sub { display: block; font-size: 0.85rem; color: #666; font-weight: normal; margin-top: -5px; }
.ed-hero-content h1, .ed-hero-content p { text-shadow: 2px 2px 10px rgba(0,0,0,0.7); }

/* ====== General Images ====== */
img { max-width: 100%; height: auto; }
.ed-course-img img { height: 240px; object-fit: cover; width: 100%; }

/* ==============================================================
   Floating LINE Button
============================================================== */
.floating-line-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    align-items: center;
    background-color: #06C755; /* 公式LINEグリーン統一 */
    color: #fff !important;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(6, 199, 85, 0.4);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-weight: 700;
    font-size: 1rem;
}
.floating-line-btn i {
    font-size: 1.5rem;
    margin-right: 10px;
}
.floating-line-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 8px 25px rgba(6, 199, 85, 0.6);
}
@media (max-width: 768px) {
    .floating-line-btn {
        bottom: 20px;
        right: 20px;
        padding: 15px;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        justify-content: center;
    }
    .floating-line-btn span { display: none; }
    .floating-line-btn i { margin-right: 0; font-size: 2rem; }
}

/* ==============================================================
   About Area (クリエイティブ・サーキット) - ベタ塗りに変更
============================================================== */
.bgwall1 {
  background-color: #111111; /* 重厚感のあるダークグレーのベタ塗り */
  padding: 80px 0;
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
}
.ed-floormap-img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.ed-floormap-title {
    color: #ffd700; /* ベースカラーのイエローに変更して統一感アップ */
    font-weight: 900;
    margin-bottom: 20px;
}

/* ==============================================================
   6 Creative Spaces Slider - パララックスに変更
============================================================== */
.space-slider-section {
    position: relative;
    padding: 100px 0;
    /* 背景画像をコンクリート調（またはお好きな画像）に設定 */
    background-image: url('../img/bg_concrete_dark.jpg'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* これがパララックス（固定）の要 */
}
/* 背景画像の上に敷く暗いフィルター（文字を読みやすくする） */
.space-slider-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(17, 17, 17, 0.85); /* 85%の濃いグレー */
    z-index: 1;
}
/* コンテンツをフィルターの上に浮き上がらせる */
.space-slider-section .container,
.space-slider-section .space-slider-container {
    position: relative;
    z-index: 2;
}

.space-section-title-inline {
    color: #ffffff; /* ダーク背景に合わせて白に */
    font-weight: 900;
}
.space-section-subtitle-inline {
    color: #ffd700;
    font-weight: bold;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 10px;
    text-align: center;
    font-size: 0.9rem;
}
.space-slider-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 30px; 
    padding: 10px 15px 50px 15px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.space-slider-container::-webkit-scrollbar { display: none; }

/* カードデザイン（背景が透けるガラス風） */
.space-card {
    flex: 0 0 calc(33.333% - 20px);
    scroll-snap-align: start;
    background-color: rgba(255, 255, 255, 0.05); /* 半透明 */
    backdrop-filter: blur(10px); /* スリガラス効果 */
    -webkit-backdrop-filter: blur(10px);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.space-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(255,215,0,0.15);
    border-color: rgba(255, 215, 0, 0.5);
    background-color: rgba(255, 255, 255, 0.08);
}
.space-img-wrapper {
    position: relative;
    padding-top: 60%;
    background-color: #000;
    overflow: hidden;
}
.space-img-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: transform 0.5s ease, opacity 0.3s ease;
}
.space-card:hover .space-img-wrapper img {
    transform: scale(1.05); 
    opacity: 1;
}
.space-info { padding: 25px 20px; }
.space-name {
    color: #ffffff; /* 白抜き */
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 12px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}
.space-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 0.85rem;
    color: #aaaaaa; 
    font-weight: bold;
}
.space-meta span { display: inline-flex; align-items: center; }
.space-meta i {
    margin-right: 6px;
    color: #ffd700; 
    font-size: 1rem;
}
.space-desc {
    color: #cccccc;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0;
}
.swipe-indicator {
    text-align: right;
    color: #ffd700;
    font-size: 0.9rem;
    padding-right: 20px;
    margin-bottom: 15px;
    animation: slide-pulse 2s infinite;
}
@keyframes slide-pulse {
    0% { opacity: 0.5; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(-10px); }
    100% { opacity: 0.5; transform: translateX(0); }
}
@media (max-width: 992px) { .space-card { flex: 0 0 calc(50% - 15px); } }
@media (max-width: 768px) { .space-card { flex: 0 0 85%; scroll-snap-align: center; } }

/* =========================================================
   PRICING (ネオン×コンクリ ダークテーマ)
========================================================= */
:root {
  --eb-bg: #0f1012;         
  --eb-surface: rgba(255,255,255,.06); 
  --eb-border: rgba(255,255,255,.12);
  --eb-text: #e9eef5;
  --eb-muted: rgba(233,238,245,.72);
  --eb-accent: #f6ac00;      
  --eb-accent-2: #00ffff;    
}

.pricing-area {
  background-color: var(--eb-bg) !important;
  background-image: 
    radial-gradient(1200px 600px at 20% 0%, rgba(246,172,0,.12), transparent 55%),
    radial-gradient(900px 500px at 90% 10%, rgba(0,255,255,.10), transparent 55%) !important;
  margin-bottom: 0 !important;
}

/* 元のテンプレートの不要な装飾や白い隙間を強制リセット */
.pricing-area::before,
.pricing-area::after {
  display: none !important;
  content: none !important;
}

.pricing-area .ed-section-title h2,
.pricing-area .ed-section-title p { color: var(--eb-text); }
.pricing-area .ed-subtitle {
  color: var(--eb-accent) !important;
  letter-spacing: .12em;
}

/* Pricing Tabs (光るアンダーライン) */
#priceTab.nav-pills {
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 40px !important;
  display: flex;
  justify-content: center;
  gap: 0;
}
#priceTab.nav-pills .nav-link {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.5) !important; 
  border: none;
  font-size: 1.1rem;
  font-weight: bold;
  padding: 15px 30px;
  border-radius: 0;
  position: relative;
  transition: all 0.3s ease;
}
#priceTab.nav-pills .nav-link i { opacity: 0.8; margin-right: 5px; }
#priceTab.nav-pills .nav-link:hover { color: #ffffff !important; }
#priceTab.nav-pills .nav-link.active {
  color: #ffd700 !important; 
  background: transparent !important;
}
#priceTab.nav-pills .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -2px; 
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #ffd700;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
}
@media (max-width: 768px) {
  #priceTab.nav-pills .nav-link { padding: 12px 10px; font-size: 0.9rem; }
}

/* Pricing Cards */
.price-grid {
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}
.price-card {
  grid-column: span 6;
  background: var(--eb-surface);
  border: 1px solid var(--eb-border);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  overflow:hidden;
  height:100%;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  backdrop-filter: blur(10px);
}
.price-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  border-color: rgba(246,172,0,.35);
  background: rgba(255,255,255,.08);
}
.price-card__head {
  padding:18px 18px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  color: var(--eb-text);
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: relative;
}
.price-card__head::after {
  content:"";
  position:absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(246,172,0,.95), rgba(0,255,255,.55));
  opacity: .9;
}
.price-card__title { color:#fff; margin:0; font-size:1.08rem; font-weight:900; letter-spacing:.02em; }
.price-card__meta { margin:6px 0 0; font-size:.85rem; color: var(--eb-muted); }
.price-card__body { padding:16px 18px 18px; color: var(--eb-text); }
.price-card__content { display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 14px; align-items: start; }
.price-card__media {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  aspect-ratio: 4 / 3; 
}
.price-card__media img { width: 100%; height: 100%; display:block; object-fit: cover; transform: scale(1.01); }
.price-card__info .price-row { padding: 10px 0; }
.price-card__info .price-cta { margin-top: 12px; }

.price-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px dashed rgba(255,255,255,.10); }
.price-row:last-child { border-bottom:none; }
.price-label { font-size:.9rem; color: var(--eb-muted); font-weight:800; }
.price-value { font-size:1.22rem; font-weight:900; color: var(--eb-accent); letter-spacing: .02em; }

.price-cta { margin-top:14px; }
.price-cta a { width:100%; display:flex; justify-content:center; align-items:center; gap:8px; border-radius: 999px; }
.price-cta .ed-btn {
  background: rgba(246,172,0,.16);
  border: 1px solid rgba(246,172,0,.55);
  color: var(--eb-text);
  font-weight: 900;
  padding: 12px 14px;
  transition: all .2s ease;
}
.price-cta .ed-btn:hover { background: rgba(246,172,0,.24); transform: translateY(-1px); }

.price-card--featured { border: 1px solid rgba(246,172,0,.65); }
.price-badge {
  display:inline-block;
  margin-bottom:8px;
  background: rgba(246,172,0,.18);
  border: 1px solid rgba(246,172,0,.55);
  color: var(--eb-text);
  font-weight:900;
  font-size:.78rem;
  padding:4px 10px;
  border-radius:999px;
}
.price-card--featured .price-cta .bg-urgent { background: rgba(0,255,255,.12) !important; border: 1px solid rgba(0,255,255,.50) !important; color: var(--eb-text) !important; }
.price-card--featured .price-cta .bg-urgent:hover { background: rgba(0,255,255,.18) !important; }

/* Pricing Misc */
.alert-lobby-note {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10);
  color: var(--eb-text) !important;
  border-radius: 16px;
}
.custom-plan-note { color: var(--eb-muted); }
.custom-plan-link { text-decoration: underline; color: var(--eb-text); font-weight: 900; }

@media (max-width: 991px) { .price-card { grid-column: span 12; } }
@media (max-width: 575px) {
  .price-card__head { padding:16px 14px 10px; }
  .price-card__body { padding:14px; }
  .price-value { font-size:1.12rem; }
  .price-card__content { grid-template-columns: 1fr; gap: 12px; }
}

/* Recording Tier */
.rec-title-area h3 { color: var(--eb-text); font-weight: 900; margin-bottom: 8px; }
.rec-title-area p { color: var(--eb-muted); margin: 0; }
.tier-grid { display:grid; grid-template-columns: repeat(12, 1fr); gap: 18px; margin-top: 18px; }
.tier-card { grid-column: span 4; }
.tier-card .price-row { padding: 12px 0; }
.tier-card .tier-name { font-size: .95rem; font-weight: 900; color: var(--eb-text); opacity: .95; }
.tier-card .tier-sub { font-size: .82rem; color: var(--eb-muted); margin-top: 4px; }
@media (max-width: 991px) { .tier-card { grid-column: span 12; } }

.note-box {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--eb-text);
}
.note-box strong { color: var(--eb-accent); }
.note-box-title { font-weight: 900; margin-bottom: 8px; }
.note-box-subtitle { color: var(--eb-muted); font-weight: 800; }
.chorus-note { margin-top: 20px; }

/* Recording Compare */
.rec-compare {
  margin-top: 22px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}
.rec-compare__grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; }
.rec-compare__cell { padding: 14px 16px; border-right: 1px solid rgba(255,255,255,.10); border-bottom: 1px solid rgba(255,255,255,.10); color: var(--eb-text); font-weight: 700; }
.rec-compare__cell:last-child { border-right: none; }
.rec-compare__head { background: rgba(255,255,255,.06); font-weight: 900; }
.rec-compare__head.plan { text-align: center; letter-spacing: .06em; }
.rec-compare__head.plan span { display:block; font-size: .82rem; color: var(--eb-muted); letter-spacing: 0; margin-top: 4px; font-weight: 800; }
.rec-compare__head.category { color: var(--eb-text); font-weight: 900; }
.rec-compare__category { background: rgba(255,255,255,.03); color: var(--eb-muted); font-weight: 900; }
.rec-compare__value { text-align: center; color: var(--eb-text); }
.rec-compare__value .yen { color: var(--eb-accent); font-weight: 900; }
.rec-compare__value .sub { display:block; margin-top: 4px; font-size: .85rem; color: var(--eb-muted); font-weight: 800; }
.rec-compare__value.deluxe .yen { color: var(--eb-accent-2); }
.rec-compare__desktop { display:grid; }
.rec-compare__mobile { display:none; }

@media (max-width: 767px) {
  .rec-compare__desktop { display:none; }
  .rec-compare__mobile { display:grid; grid-template-columns: 1fr; gap: 14px; }
  .rec-compare { border: none; background: transparent; box-shadow: none; backdrop-filter: none; }
  .rec-compare__cell { border: none; padding: 0; }
  .rec-compare__mobcard { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); border-radius: 16px; overflow: hidden; }
  .rec-compare__mobhead { padding: 14px 14px 12px; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); border-bottom: 1px solid rgba(255,255,255,.10); font-weight: 900; letter-spacing: .06em; color: var(--eb-text); }
  .rec-compare__mobhead span { display:block; margin-top: 4px; font-size: .82rem; color: var(--eb-muted); font-weight: 800; }
  .rec-compare__mobbody { padding: 10px 14px 14px; }
  .rec-compare__item { display:flex; justify-content:space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed rgba(255,255,255,.12); }
  .rec-compare__item:last-child { border-bottom: none; }
  .rec-compare__k { color: var(--eb-muted); font-weight: 900; font-size: .9rem; }
  .rec-compare__v { text-align: right; color: var(--eb-text); font-weight: 900; }
  .rec-compare__v .yen { color: var(--eb-accent); }
  .rec-compare__v .sub { display:block; margin-top: 3px; font-size: .84rem; color: var(--eb-muted); font-weight: 800; }
}

/* =========================================================
   Package Options (表の線の崩れ修正済み)
========================================================= */
.pkg-option-wrap {
  margin-top: 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12); /* 表の外枠線 */
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 45px rgba(0,0,0,.30);
  overflow: hidden;
}
.pkg-option-head {
  padding: 16px 18px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.pkg-option-title { margin:0; color: var(--eb-text); font-weight: 900; font-size: 1.05rem; }
.pkg-option-lead { margin: 6px 0 0; color: var(--eb-muted); font-weight: 800; font-size: .88rem; }

/* ▼▼▼ ここが修正ポイント（線の表示制御） ▼▼▼ */
.pkg-option-grid {
    grid-template-columns: repeat(3, 1fr); 
}
.pkg-option-cell { 
    padding: 14px 16px; 
    border-right: 1px solid rgba(255,255,255,.10); /* 各セルの右の線 */
    border-bottom: 1px solid rgba(255,255,255,.10); /* 各セルの下の線 */
    color: var(--eb-text); 
    font-weight: 800; 
}
/* 3列レイアウトに変更したため、4nではなく【3n（右端）】の線を消す */
.pkg-option-cell:nth-child(3n) { 
    border-right: none; 
}
/* 最下部の行（最後から3つのセル）の下線を消し、外枠と二重になるのを防ぐ */
.pkg-option-cell:nth-last-child(-n+3) {
    border-bottom: none;
}
/* ▲▲▲ ここまで ▲▲▲ */

.pkg-option-cell--head { background: rgba(255,255,255,.06); font-weight: 900; text-align: center; } /* プラン等見出しを中央に */
.pkg-option-cell--head.plan { text-align:center; letter-spacing:.06em; }
.pkg-option-cell--head.plan span { display:block; margin-top:4px; font-size:.82rem; color: var(--eb-muted); font-weight: 800; }
.pkg-option-cell.cat { background: rgba(255,255,255,.03); color: var(--eb-muted); font-weight: 900; text-align: center; }
.pkg-option-cell.val { text-align:center; }
.pkg-option-cell .yen { color: var(--eb-accent); font-weight: 900; }
.pkg-option-cell .sub { display:block; margin-top:4px; font-size:.85rem; color: var(--eb-muted); font-weight: 800; }
.pkg-option-cell.val.deluxe .yen { color: var(--eb-accent-2); }
.pkg-option-note { padding: 12px 18px 16px; color: var(--eb-muted); font-weight: 800; font-size: .88rem; border-top: 1px solid rgba(255,255,255,.10); }
.pkg-option-note strong { color: var(--eb-accent); }

.pkg-option__desktop { display:grid; }
.pkg-option__mobile { display:none; }
@media (max-width: 767px) {
  .pkg-option__desktop { display:none; }
  .pkg-option__mobile { display:block; }
  .pkg-option-mobcard { border-top: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); }
  .pkg-option-mobhead { padding: 14px 14px 12px; font-weight: 900; letter-spacing: .06em; color: var(--eb-text); background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); border-bottom: 1px solid rgba(255,255,255,.10); }
  .pkg-option-mobhead span { display:block; margin-top:4px; font-size:.82rem; color: var(--eb-muted); font-weight: 800; }
  .pkg-option-mobbody { padding: 10px 14px 14px; }
  .pkg-option-item { display:flex; justify-content:space-between; gap:12px; padding: 10px 0; border-bottom: 1px dashed rgba(255,255,255,.12); }
  .pkg-option-item:last-child { border-bottom:none; }
  .pkg-option-item .k { color: var(--eb-muted); font-weight: 900; font-size:.92rem; }
  .pkg-option-item .v { text-align:right; color: var(--eb-text); font-weight: 900; }
  .pkg-option-item .yen { color: var(--eb-accent); }
  .pkg-option-item .yen.deluxe { color: var(--eb-accent-2); }
  .pkg-option-item .sub { display:block; margin-top:3px; font-size:.84rem; color: var(--eb-muted); font-weight: 800; }
}

/* ==============================================================
   Equipment & Options Section 
============================================================== */
.equipment-section {
    background-color: #111111; 
    padding: 100px 0;
    color: #ffffff;
}
.equip-title {
    color: #ffffff;
    font-weight: 900;
    text-align: center;
    margin-bottom: 40px;
    letter-spacing: 0.05em;
}
.equip-subtitle { color: #aaa; }

.equip-tabs {
    border-bottom: 2px solid #333;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
}
.equip-tabs .nav-link {
    background: transparent;
    color: #888;
    border: none;
    font-size: 1.1rem;
    font-weight: bold;
    padding: 15px 30px;
    border-radius: 0;
    position: relative;
    transition: all 0.3s ease;
}
.equip-tabs .nav-link:hover { color: #fff; }
.equip-tabs .nav-link.active { color: #ffd700; background: transparent; }
.equip-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #ffd700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.equip-slider-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 20px;
    padding-bottom: 30px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #ffd700 #333;
}
.equip-slider-container::-webkit-scrollbar { height: 6px; }
.equip-slider-container::-webkit-scrollbar-track { background: #222; border-radius: 10px; }
.equip-slider-container::-webkit-scrollbar-thumb { background: #ffd700; border-radius: 10px; }

.equip-card {
    flex: 0 0 calc(33.333% - 14px);
    scroll-snap-align: start;
    background-color: #1e1e1e; 
    border: 1px solid #333;
    border-radius: 8px;
    padding: 30px 25px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.equip-card:hover {
    transform: translateY(-5px);
    border-color: #555;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}
.equip-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
    padding-bottom: 15px;
}
.equip-card-header i { font-size: 1.8rem; color: #ffd700; margin-right: 15px; }
.equip-card-title { font-size: 1.2rem; font-weight: 700; color: #fff; margin: 0; }

.equip-list { list-style: none; padding: 0; margin: 0; }
.equip-list li { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed #333; font-size: 0.95rem; color: #ccc; }
.equip-list li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.equip-item-name { display: block; color: #fff; font-weight: bold; margin-bottom: 5px; }
.equip-item-desc { display: block; font-size: 0.85rem; color: #888; }

.badge-free {
    background-color: #06C755; /* 公式LINEグリーン統一 */
    color: #fff;
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
}
.badge-price {
    background-color: #ff2a2a;
    color: #fff;
    font-size: 0.8rem;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
    font-weight: bold;
}

@media (max-width: 992px) { .equip-card { flex: 0 0 calc(50% - 10px); } }
@media (max-width: 768px) {
    .equip-card { flex: 0 0 85%; scroll-snap-align: center; }
    .equip-tabs .nav-link { padding: 12px 15px; font-size: 0.95rem; }
}

/* ==============================================================
   Business & Event Section
============================================================== */
.business-section {
    position: relative;
    padding: 120px 0;
    background-image: url( "../img/bg/lobi.jpg"); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed; 
    color: #fff;
}
.business-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(17,17,17,0.45) 0%, rgba(35,35,35,0.2) 100%);
    z-index: 1;
}
.business-section .relative-content { position: relative; z-index: 2; }
.business-subtitle {
    color: #ffd700;
    font-weight: bold;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 10px;
    font-size: 0.95rem;
}
.business-title { color: #fff; font-weight: 900; font-size: 2.2rem; margin-bottom: 20px; }
.business-desc { color: #ddd; font-size: 1.05rem; line-height: 1.8; }

.business-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 8px;
    height: 100%;
    padding: 30px 20px;
    transition: all 0.4s ease;
}
.business-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 215, 0, 0.6);
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    background: rgba(255, 255, 255, 0.06);
}
.business-card-icon { color: #ffd700; margin-bottom: 20px; font-size: 2rem; }
.business-card-title {
    color: #fff;
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
    font-size: 1.15rem;
    margin-bottom: 15px;
}
.business-card-text { color: #ccc; line-height: 1.8; font-size: 0.9rem; margin-bottom: 0; }

.btn-business-cta {
    display: inline-flex;
    align-items: center;
    background-color: #ffd700;
    color: #111 !important;
    border: none;
    padding: 16px 45px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}
.btn-business-cta i { margin-left: 12px; margin-right: 0; }
.btn-business-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.3);
    background-color: #e6c200;
}

.business-line-link {
    color: #ccc;
    text-decoration: underline;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}
.business-line-link:hover { color: #fff; }

@media (max-width: 768px) {
    .business-title { font-size: 1.8rem; }
}

/* ==============================================================
   FAQ & Sponsor Area
============================================================== */
.business-case-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: #ffffff;
    color: #232323;
    border: 2px solid #eaeaea;
    text-decoration: none;
    padding: 18px 20px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1.05rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    box-sizing: border-box;
}
.business-case-btn i { font-size: 1.4rem; margin-right: 10px; }
.business-case-btn:hover {
    background-color: #ffd700;
    border-color: #ffd700;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 215, 0, 0.3);
}

.ed-sponsor-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
    margin-bottom: 40px;
    padding-bottom: 60px;
}
.ed-sponsor-item {
    display: block;
    width: 200px;
    height: 95px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.ed-sponsor-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-color: #ddd;
}
.ed-sponsor-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 5px;
    background-color: #fff;
}
@media (max-width: 450px) {
    .ed-sponsor-item { width: 46%; height: auto; aspect-ratio: 200 / 95; }
}

/* ==============================================================
   Share Production Section (Parallax)
============================================================== */
.share-production-section {
    position: relative;
    padding: 100px 0;
    background-image: url('../img/bg_concrete_dark.jpg'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* パララックス固定 */
}
.share-production-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(17,17,17,0.92) 0%, rgba(35,35,35,0.85) 100%);
    z-index: 1;
}
.share-production-section .relative-content { 
    position: relative; 
    z-index: 2; 
}

/* ダーク背景に合わせて文字色を白と黄色に変更 */
.share-production-section .ed-section-title h2,
.share-production-section .ed-section-title p {
    color: #ffffff;
}
.share-production-section .ed-subtitle {
    color: #ffd700 !important;
}

/* ロゴの背景を少し馴染ませる（高級感アップ） */
.share-production-section .ed-sponsor-item {
    background-color: rgba(255, 255, 255, 0.95);
    border: none;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}
.share-production-section .ed-sponsor-item:hover {
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.5);
}

/* ==============================================================
   Banner Area (Parallax)
============================================================== */
.banner-parallax {
    position: relative;
    background-image: url('../img/bg_concrete_dark.jpg'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* パララックス固定 */
}

/* 背景画像の上に敷く暗いフィルター */
.banner-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(17,17,17,0.8) 0%, rgba(35,35,35,0.6) 100%);
    z-index: 1;
}

/* フィルターの上に文字や画像を浮き上がらせる */
.banner-parallax .relative-content {
    position: relative;
    z-index: 2;
}

/* ダーク背景に合わせて文字色を白と黄色に変更 */
.banner-parallax .title {
    color: #ffffff;
    text-shadow: 2px 2px 15px rgba(0,0,0,0.8); /* 文字をくっきりさせる影 */
}
.banner-parallax .sub-title {
    color: #ffd700;
    letter-spacing: 2px;
}

/* 「料金表を見る」ボタンを暗い背景に映えるデザインに上書き */
.banner-parallax .btn-border-black {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff !important;
    border: 1px solid #ffffff;
    backdrop-filter: blur(5px); /* 背景を少しぼかす */
    -webkit-backdrop-filter: blur(5px);
}
.banner-parallax .btn-border-black:hover {
    background-color: #ffffff;
    color: #111111 !important;
}

/* ==============================================================
   Global Navigation Menu (視認性アップ)
============================================================== */
/* 通常時のメニュー文字（白文字＋影でくっきり浮き出させる） */
.navbar-area .navbar-nav li a {
    color: #ffffff !important;
    font-weight: 900 !important;
    font-size: 1.05rem;
    letter-spacing: 0.05em;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8); 
    transition: color 0.3s ease, transform 0.3s ease;
}

/* マウスホバー時のみメニューを黄色にする（LPの複数カレント光りを防止） */
.navbar-area .navbar-nav li a:hover {
    color: #ffd700 !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); /* 黄色く光るエフェクト */
}

/* スマホサイズの時にメニューを開いた際の背景色調整 */
@media (max-width: 991px) {
    .navbar-collapse {
        background-color: rgba(17, 17, 17, 0.95); /* スマホではダークな半透明背景を敷く */
        padding: 10px 20px;
        border-radius: 8px;
        margin-top: 15px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }
    .navbar-area .navbar-nav li a {
        text-shadow: none; /* スマホの黒背景の上では影を消す */
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* ==============================================================
   Intro Area (コンセプト ＆ 3つのサービス)
============================================================== */
/* 全体の背景色（深いネイビー） */
.bg-dark-navy {
    background-color: #0a1526;
    border-radius: 8px; /* 全体を少し角丸に */
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
    overflow: hidden;
}

/* 左側：コンセプト部分 */
.intro-title {
    padding: 50px 40px;
}
.intro-main-title {
    color: #ffffff;
    font-weight: 900;
    font-size: 1.8rem;
    line-height: 1.4;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}
.intro-lead {
    color: #cccccc;
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 30px;
}
.intro-usp-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.intro-usp-list li {
    color: #ffffff;
    font-weight: bold;
    font-size: 0.95rem;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}
.intro-usp-list li i {
    margin-right: 12px;
    font-size: 1.1rem;
}

/* 右側：3つのサービス部分 */
.intro-service-row {
    height: 100%;
}
.single-intro-inner {
    padding: 50px 20px;
    height: 100%;
    border-left: 1px solid rgba(255, 255, 255, 0.08); /* サービス間のうっすらとした区切り線 */
    transition: background-color 0.3s ease;
}
.single-intro-inner:hover {
    background-color: rgba(255, 255, 255, 0.03); /* ホバーで少し明るく */
}
.single-intro-inner .thumb {
    margin-bottom: 20px;
}
.single-intro-inner .thumb img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffd700; /* 画像を黄色い枠で囲んでアクセントに */
}

/* サービスの見出しとテキスト */
.service-title {
    color: #ffffff;
    font-weight: 900;
    font-size: 1.1rem;
    margin-bottom: 15px;
    letter-spacing: 0.05em;
}
.service-title span {
    font-size: 0.85rem;
    color: #aaaaaa;
    font-weight: normal;
}
.service-catch {
    color: #ffd700; /* キャッチコピーは黄色で目立たせる */
    font-weight: bold;
    font-size: 0.95rem;
    margin-bottom: 10px;
}
.service-desc {
    color: #cccccc;
    font-size: 0.85rem;
    line-height: 1.7;
    margin-bottom: 0;
}

/* スマホ用の調整 */
@media (max-width: 991px) {
    .intro-title { padding: 40px 20px; text-align: center; }
    .intro-usp-list li { justify-content: center; }
    .single-intro-inner { 
        border-left: none; 
        border-top: 1px solid rgba(255, 255, 255, 0.08); 
        padding: 40px 20px; 
    }
}

/* ==============================================================
   Concept & About Section (分かりやすさ特化型 3 Pillars)
============================================================== */
.concept-section {
    padding: 100px 0;
    background-color: #ffffff;
}

/* タイトル周り */
.concept-subtitle {
    color: #ffd700;
    font-weight: bold;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 15px;
    font-size: 0.95rem;
}
.concept-title {
    color: #232323;
    font-weight: 900;
    font-size: 2.4rem;
    margin-bottom: 25px;
    line-height: 1.4;
}

/* 3つの柱（カードデザイン） */
.concept-card {
    background: #fcfcfc;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 40px 25px;
    height: 100%;
    transition: all 0.4s ease;
    text-align: center;
}
.concept-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    border-color: #ffd700;
}
.concept-icon {
    font-size: 3rem;
    color: #ffd700;
    margin-bottom: 20px;
}

/* タイトルと翻訳キャッチコピー */
.concept-card h3 {
    font-size: 1.4rem;
    font-weight: 900;
    color: #232323;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}
.concept-translation {
    display: inline-block;
    background: rgba(255, 215, 0, 0.2); /* 蛍光ペンのような背景 */
    color: #111;
    font-size: 0.9rem;
    font-weight: bold;
    padding: 5px 12px;
    border-radius: 4px;
    margin-bottom: 20px;
}

/* ターゲット層のラベルと説明文 */
.concept-target {
    display: block;
    color: #06C755; /* 公式LINEグリーン統一 */
    font-size: 0.85rem;
    font-weight: bold;
    margin-bottom: 8px;
    text-align: left;
}
.concept-card p {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
    text-align: left;
}

/* インフラボックス */
.infra-box { padding: 20px; text-align: center; }
.infra-icon-wrap {
    display: inline-flex; align-items: center; justify-content: center;
    width: 60px; height: 60px; background-color: #f9f9f9;
    border-radius: 50%; margin-bottom: 15px; color: #232323;
    font-size: 1.5rem; transition: all 0.3s ease;
}
.infra-box:hover .infra-icon-wrap { background-color: #ffd700; color: #fff; }
.infra-box h4 { font-size: 1.1rem; font-weight: bold; margin-bottom: 10px; }
.infra-box p { font-size: 0.9rem; color: #777; margin: 0; }

@media (max-width: 768px) {
    .concept-title { font-size: 1.8rem; }
    .concept-card { padding: 30px 20px; }
}

/* ==============================================================
   文字間隔を詰めて1行に収める専用クラス
============================================================== */
.text-narrow-nowrap {
    letter-spacing: -0.1em; /* 文字間隔を詰める（マイナスの値） */
    white-space: nowrap;     /* 絶対に改行させない */
    display: inline-block;   /* レイアウト崩れを防止 */
}
.space-equipment-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #eaeaea;
}
.equip-tag {
    background-color: #f0f0f0;
    color: #555;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: bold;
}
.equip-tag i {
    color: #ffd700;
    margin-right: 4px;
}

/* ==============================================================
   FAQ Section (タブ切替 ＋ アコーディオンUI) - ズレ完全解消版
============================================================== */
.faq-section {
    padding: 80px 0;
    background-color: #ffffff;
}
.faq-sec-title {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 900;
    color: #232323;
    margin-bottom: 40px;
}

/* ▼▼ タブメニューのUI ▼▼ */
.faq-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0 auto 30px;
    max-width: 900px;
}
.faq-tab {
    flex: 1;
    text-align: center;
    padding: 18px 20px;
    background: #f5f5f5;
    color: #888;
    font-weight: bold;
    font-size: 1.05rem;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 4px solid #eaeaea;
}
.faq-tab:hover {
    background: #e9e9e9;
    color: #555;
}
/* 選択中のタブ */
.faq-tab.active {
    background: #fff;
    color: #232323;
    border-bottom: 4px solid #ffd700;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.03);
}
.faq-tab i {
    margin-right: 8px;
}

/* タブの中身（切り替わるエリア） */
.faq-tab-content {
    display: none;
    max-width: 900px;
    margin: 0 auto;
    animation: fadeInTab 0.4s ease forwards;
}
.faq-tab-content.active {
    display: block;
}
@keyframes fadeInTab {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ▼▼ アコーディオン部分 ▼▼ */
.faq-item {
    background: #f9f9f9;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
}
.faq-question {
    width: 100%;
    text-align: left;
    padding: 20px 25px;
    background: transparent;
    border: none;
    font-size: 1.05rem;
    font-weight: bold;
    color: #232323;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: flex-start; /* 上揃えに変更 */
    gap: 15px;
    transition: background 0.3s ease;
}
.faq-question:hover {
    background: #f0f0f0;
}
/* ▼【重要】QとAの幅を固定し縦ラインを揃える ▼ */
.faq-question span.q-mark {
    color: #ffd700;
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1.2;
    flex-shrink: 0;
    width: 30px; /* 固定幅 */
    text-align: center; /* 中央揃え */
}
/* 質問テキスト部分 */
.faq-question span:nth-child(2) {
    flex-grow: 1;
    line-height: 1.5;
}
/* 開閉アイコン（＋/－） */
.faq-question::after {
    content: '\f067';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: auto;
    color: #888;
    transition: transform 0.3s ease;
    margin-top: 2px; /* 少し下げる */
}
.faq-question.active::after {
    content: '\f068';
    color: #ffd700;
    transform: rotate(180deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: #fff;
}
.faq-answer-inner {
    padding: 0 25px 25px 25px; /* 左パディングを元に戻す */
    display: flex; /* Flexbox化 */
    align-items: flex-start;
    gap: 15px;
    border-top: 1px dashed #eaeaea;
    margin-top: 10px;
    padding-top: 20px;
}
/* ▼【重要】Aマークの絶対配置を解除し、Qと同じ幅に ▼ */
.faq-answer-inner span.a-mark-icon {
    color: #06C755; /* 公式LINEグリーン統一 */
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1.2;
    flex-shrink: 0;
    width: 30px; /* Qと同じ固定幅 */
    text-align: center; /* 中央揃え */
    display: block;
}
/* 回答テキスト部分 */
.faq-answer-inner > div {
    color: #555;
    line-height: 1.8;
    flex-grow: 1;
    font-size: 0.95rem;
}

/* スマホ対応（タブを押しやすい形に変形） */
@media (max-width: 768px) {
    .faq-tabs {
        flex-direction: column;
        gap: 5px;
        padding: 0 15px;
    }
    .faq-tab {
        border-radius: 8px;
        border-bottom: none;
        border-left: 5px solid #eaeaea;
        text-align: left;
    }
    .faq-tab.active {
        border-bottom: none;
        border-left: 5px solid #ffd700;
        box-shadow: 0 5px 10px rgba(0,0,0,0.05);
    }
}

/* ==============================================================
   最強の出口 (CTA Banner Section)
============================================================== */
.cta-banner-section {
    background: linear-gradient(135deg, #111111 0%, #2a2a2a 100%);
    padding: 80px 0;
    text-align: center;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

/* 背景の装飾（さりげないアクセント） */
.cta-banner-section::before {
    content: '';
    position: absolute;
    top: -50px; right: -50px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, rgba(0,0,0,0) 70%);
    border-radius: 50%;
}
.cta-banner-section::after {
    content: '';
    position: absolute;
    bottom: -50px; left: -50px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.05) 0%, rgba(0,0,0,0) 70%);
    border-radius: 50%;
}

.cta-banner-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.cta-banner-title {
    font-size: 2.4rem;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 15px;
    line-height: 1.4;
}

.cta-banner-title span {
    color: #ffd700; /* ゴールドのハイライト */
}

.cta-banner-text {
    font-size: 1.1rem;
    color: #cccccc;
    margin-bottom: 40px;
    line-height: 1.8;
}

/* ボタン群のラッパー */
.cta-btn-group {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* メインボタン（RESERVA・予約） */
.btn-cta-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffd700;
    color: #111111 !important;
    font-size: 1.2rem;
    font-weight: 900;
    padding: 20px 40px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(255, 215, 0, 0.2);
    min-width: 300px;
}
.btn-cta-main:hover {
    transform: translateY(-5px);
    background: #e6c200;
    box-shadow: 0 15px 30px rgba(255, 215, 0, 0.4);
}

/* サブボタン（LINE相談） */
.btn-cta-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #06C755; /* 公式LINEグリーン統一 */
    color: #ffffff !important;
    font-size: 1.2rem;
    font-weight: 900;
    padding: 20px 40px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(6, 199, 85, 0.2);
    min-width: 300px;
}
.btn-cta-line:hover {
    transform: translateY(-5px);
    background: #05b34c;
    box-shadow: 0 15px 30px rgba(6, 199, 85, 0.4);
}

.cta-micro-copy {
    display: block;
    font-size: 0.85rem;
    color: #999;
    margin-top: 20px;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .cta-banner-title { font-size: 1.8rem; }
    .cta-btn-group { flex-direction: column; gap: 15px; }
    .btn-cta-main, .btn-cta-line { width: 100%; min-width: auto; }
}

/* ==============================================================
   Banner Buttons (スマホ対応・サイズ均一化)
============================================================== */
.banner-btn-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* ボタン同士の隙間を15pxに固定 */
    justify-content: center; /* タブレット以下では中央寄せ */
    margin-top: 30px;
}

.banner-btn-wrap .btn {
    margin: 0 !important; /* 元の不要な余白を強制リセット */
    width: 240px; /* PCでのボタンの幅を同じサイズに統一 */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 20px;
    box-sizing: border-box;
}

/* PCサイズ以上の時は左寄せにする */
@media (min-width: 992px) {
    .banner-btn-wrap {
        justify-content: flex-start;
    }
}

/* スマホサイズの時は縦並びにして、幅を100%にする */
@media (max-width: 575px) {
    .banner-btn-wrap {
        flex-direction: column; /* 縦並びに変更 */
    }
    .banner-btn-wrap .btn {
        width: 100%; /* スマホでは画面の横幅いっぱいに統一 */
    }
}
/* 「空き状況を見る」ボタンの文字色を黒に固定し、太字で強調 */
.banner-btn-wrap .btn-base,
.banner-btn-wrap .btn-base:hover {
    color: #111111 !important;
    font-weight: 900 !important;
}

/* ==============================================================
   CTAボタン（ページ下部）のサイズ・配置を完璧に揃える最強設定
============================================================== */
.cta-btn-group {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important; /* ボタン同士の隙間を均等に */
    margin-top: 30px !important;
}

.btn-cta-main,
.btn-cta-line {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 380px !important; /* 2つのボタンを同じ幅に強制固定 */
    max-width: 100% !important; /* スマホでの画面はみ出しを防止 */
    padding: 16px 20px !important; /* 内側の余白も統一 */
    box-sizing: border-box !important;
    margin: 0 !important; /* 元の不要なズレ（マージン）を無効化 */
}

/* スマホ表示の時は縦に並べて幅を100%にする */
@media (max-width: 768px) {
    .cta-btn-group {
        flex-direction: column !important;
        align-items: center !important;
    }
    .btn-cta-main,
    .btn-cta-line {
        width: 100% !important; /* スマホでは画面横幅いっぱいに統一 */
    }
}
/* ==============================================================
   Concept Cards (3つの利用コンセプト)
============================================================== */
.concept-card {
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 35px 25px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top: 4px solid #232323; /* デフォルトのトップボーダー */
}

.concept-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

/* ターゲットごとのボーダーカラー変更（視覚的な差別化） */
.concept-card.card-rental { border-top-color: #232323; }
.concept-card.card-support { border-top-color: #ffd700; }
.concept-card.card-business { border-top-color: #06C755; }

.concept-icon {
    font-size: 2.5rem;
    color: #ffd700; /* ELEVEN BASEのゴールド */
    margin-bottom: 20px;
    text-align: center;
}

.concept-card h3 {
    font-size: 1.3rem;
    font-weight: 900;
    color: #232323;
    text-align: center;
    margin-bottom: 5px;
    letter-spacing: 0.05em;
}

.concept-translation {
    display: block;
    text-align: center;
    font-size: 0.85rem;
    color: #888;
    font-weight: bold;
    margin-bottom: 5px;
}

.concept-target {
    display: block;
    text-align: center;
    font-size: 0.9rem;
    color: #111;
    font-weight: bold;
    background: #f4f4f4;
    padding: 4px 10px;
    border-radius: 4px;
    margin: 0 auto 20px;
    width: max-content;
}

/* 特徴リスト（チェックマーク付き） */
.concept-features {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    flex-grow: 1; /* ボタンを常にカード下部に揃えるための余白調整 */
}

.concept-features li {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 12px;
    position: relative;
    padding-left: 1.5em;
}

.concept-features li::before {
    content: '\f00c'; /* FontAwesomeのチェックマーク */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #ffd700;
    position: absolute;
    left: 0;
    top: 2px;
}

/* ボタンデザイン */
.concept-btn-wrap {
    margin-top: auto; /* ボタンをカードの最下部に押し下げる */
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.btn-concept-main {
    display: inline-block;
    width: 100%;
    text-align: center;
    background: #232323;
    color: #ffd700 !important;
    padding: 12px 20px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-concept-main:hover {
    background: #111;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.btn-concept-line {
    display: inline-block;
    flex: 1; /* 2つ並べる場合に幅を均等にする */
    text-align: center;
    background: #06C755;
    color: #ffffff !important;
    padding: 12px 15px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-concept-line:hover {
    background: #05b34c;
    transform: translateY(-2px);
}

.btn-concept-outline {
    display: inline-block;
    flex: 1;
    text-align: center;
    background: transparent;
    border: 2px solid #232323;
    color: #232323 !important;
    padding: 10px 15px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-concept-outline:hover {
    background: #232323;
    color: #ffd700 !important;
}
/* 箇条書きは左揃えに固定（親の text-align:center の影響を切る） */
.concept-card .concept-features{
  width: 100%;
  text-align: left;
}

.concept-card .concept-features li{
  text-align: left;
}

/* もし li 内の改行がセンター寄りに見える場合の保険 */
.concept-card .concept-features li{
  display: block;
}
/* 修正前：ただのテキストだったものを、丸いバッジ状に変更 */
.concept-translation {
    display: table; /* 幅を文字数に合わせ、marginで中央寄せを可能にする */
    margin: 0 auto 12px auto; /* 下に余白を取る */
    padding: 6px 20px; /* 内側の余白で丸みを作る */
    background-color: #ffffff;
    border: 1px solid #cccccc; /* 薄いグレーの枠線 */
    border-radius: 50px; /* かなり丸い角丸（ピル形状） */
    text-align: center;
    font-size: 0.85rem;
    color: #333333;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02); /* ほんの少しだけ立体感を出す */
}


/* ==============================================================
   簡易ステップ ＆ ガイド誘導 (トップページ用)
============================================================== */
.step-guide-section {
    padding: 60px 0;
    background-color: #f9f9f9;
    text-align: center;
}
.step-guide-title {
    font-size: 1.8rem;
    font-weight: 900;
    color: #232323;
    margin-bottom: 40px;
}
.step-wrap {
    display: flex;
    justify-content: center;
    gap: 30px;
    max-width: 900px;
    margin: 0 auto 40px;
    flex-wrap: wrap;
}
.step-box {
    flex: 1;
    min-width: 250px;
    background: #fff;
    padding: 30px 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    position: relative;
}
.step-box i {
    font-size: 2.5rem;
    color: #ffd700;
    margin-bottom: 15px;
}
.step-box h4 {
    font-size: 1.1rem;
    font-weight: bold;
    color: #232323;
    margin-bottom: 10px;
}
.step-box p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
    margin: 0;
}
/* 矢印アイコン（PC時のみ表示） */
.step-box:not(:last-child)::after {
    content: '\f0da';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 2rem;
    color: #ccc;
    position: absolute;
    top: 50%;
    right: -22px;
    transform: translateY(-50%);
}
@media (max-width: 768px) {
    .step-box:not(:last-child)::after { display: none; }
}
/* 誘導ボタン */
.btn-guide-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #232323;
    color: #fff !important;
    padding: 15px 40px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}
.btn-guide-link:hover {
    background: #ffd700;
    color: #111 !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}