:root{
  --brand-main:#F3C84B; /* たんぽぽの黄色 */
  --brand-accent:#5BA36A; /* アクセントの緑 */
}

.brand-badge{ background:var(--brand-main); color:#333; }

/* ===== ヘッダービュー：fade カルーセル ===== */
/* ヒーローの比率を箱で固定 → 画像は中で cover させる */
/* ▼ SPは縦長（例：4:5）、PCは横長2:1。お好みで3:4や9:16にも変更可 */
.header-carousel #heroCarousel{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;   /* ← SPの縦長比率 */
  overflow: hidden;
}
@media (min-width: 576px){
  .header-carousel #heroCarousel{ aspect-ratio: 2 / 1; } /* ← PCの横長比率 */
}

/* 中身を高さ100%で満たす（これが無いとimgのheight:autoが優先される） */
.header-carousel .carousel-inner,
.header-carousel .carousel-item,
.header-carousel picture{
  height: 100%;
}

/* 画像は常に枠いっぱいにフィット（横に縮むのを防止） */
.header-carousel .header-c-img{
  width: 100%;
  height: 100% !important;   /* Bootstrapのheight:autoを打ち消すキモ */
  object-fit: cover;          /* はみ出しはトリミング */
  object-position: center;    /* 必要なら center top などに */
  display: block;
}

/* オーバーレイとコピーは全面に重ねる */
/* ---- 重なり順（z-index）の整理 ---- */
.header-carousel .hero-copy{
  position:absolute; inset:0; z-index:3;
  display:grid;
  align-content:center;      /* 塊を天地中央に */
  justify-items:center;      /* 左右中央に */
  text-align:center; color:#fff; padding:1rem;
  row-gap:.4rem;             /* バッジ↔h1↔本文 の間隔（好みで調整） */
}
/* 既定の余白を無効化して gap に統一 */
.header-carousel .hero-copy > *{ margin:0 !important; }

/* インジケータ/矢印は更に前面（必要なら） */
.header-carousel .carousel-control-prev,
.header-carousel .carousel-control-next,
.header-carousel .carousel-indicators{ z-index:4; }

/* 行の詰め具合（お好みで） */
.header-carousel .hero-copy h1{ line-height:1.15; }
.header-carousel .hero-copy .lead{ line-height:1.35; }

@media (max-width: 575.98px){
  .header-carousel .hero-copy{ row-gap:.3rem; }
}

/* 汎用 .mb-* をヒーロー内だけ軽めにする（安全な局所オーバーライド） */
.header-carousel .hero-copy .mb-2{ margin-bottom: .5rem !important; }
.header-carousel .hero-copy .mb-4{ margin-bottom: .75rem !important; }

/* バッジも少しだけコンパクトに（任意） */
.header-carousel .hero-copy .brand-badge{
  font-size: .9rem;
  padding: .35em .6em;
}

/* スマホ時はもう少し詰める */
@media (max-width: 575.98px){
  .header-carousel .hero-copy h1{ line-height: 1.12; }
  .header-carousel .hero-copy .lead{ line-height: 1.35; }
}



/* 目立つ配色と視認性向上 */
.badge.brand-badge{
  /* 背景はグラデを直接指定（Bootstrapのbg変数より優先） */
  background: linear-gradient(180deg, #ffe36d 0%, #ffb800 100%);
  color: #2b2300;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  letter-spacing: .02em;
  --pad-x: .8em; --pad-y: .5em;
  padding: var(--pad-y) var(--pad-x);
  font-weight: 700;
  font-size: 0.95rem;          /* ほんの少し大きく */
  border-radius: 999px;
  backdrop-filter: saturate(120%) blur(1.2px); /* 画像の上でもクッキリ */
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

/* 表示時アニメ（.enter が付いた時だけ発動） */
@keyframes badge-pop {
  0%   { transform: translateY(6px) scale(.85); opacity: 0; filter: blur(2px); }
  60%  { transform: translateY(0)   scale(1.05); opacity: 1; filter: blur(0); }
  100% { transform: translateY(0)   scale(1); }
}
@keyframes badge-glow {
  0%   { box-shadow: 0 0 0 0 rgba(255,184,0,.45); }
  70%  { box-shadow: 0 0 0 14px rgba(255,184,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,184,0,0); }
}

/* ヒーロー内のバッジだけを対象に */
.hero-copy .brand-badge.enter{
  animation:
    badge-pop .55s cubic-bezier(.2,.7,.2,1) both,
    badge-glow 1.2s ease-out .55s 2 both;
    animation-delay: .5s;/* 2回だけ光る */
}

/* 動きを苦手とする環境ではアニメ無効 */
@media (prefers-reduced-motion: reduce){
  .hero-copy .brand-badge.enter{ animation: none; }
}


/* カードの陰影を軽く統一 */
.card{ border:0; box-shadow:0 4px 14px rgba(0,0,0,.06); }


/* ===== クイック問い合わせ（常時表示） ===== */
.contact-quick{
  position: fixed;
  z-index: 1040;
  display: flex;
  gap: .5rem;
}

/* モバイル：下部フルワイドのバー */
@media (max-width: 767.98px){
  .contact-quick{
    left: 0; right: 0; bottom: 0;
    padding: .5rem .75rem;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(6px);
    box-shadow: 0 -6px 18px rgba(0,0,0,.08);
    justify-content: space-between;
  }
  .contact-quick .btn{ flex: 1; }
  /* 下部固定バーの分だけ本文に余白を確保 */
  body{ padding-bottom: 70px; }
}

/* PC：右下に縦積み */
@media (min-width: 768px){
  .contact-quick{
    right: 1rem; bottom: 1rem;
    flex-direction: column;
  }
  .contact-quick .btn{
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
  }
}

/* 遷移時に軽く強調（任意） */
@keyframes pulseBorder{
  0%{ box-shadow: 0 0 0 0 rgba(91,163,106,.45); }
  100%{ box-shadow: 0 0 0 12px rgba(91,163,106,0); }
}
.pulse{
  animation: pulseBorder .9s ease-out 2;
  border-radius: .5rem;
}

/* 代表あいさつの見栄え調整 */
#greeting .card { border-radius: 1rem; }
.rep-portrait { max-height: 320px; object-fit: cover; object-position: center; }
.rep-sign { border-top: 1px solid rgba(0,0,0,.08); padding-top: .75rem; }

/* 写真なしで使う場合、左右余白を整える（上の<figure>を削除したとき用） */
@media (min-width: 768px){
  #greeting .card-body { padding-left: 2rem !important; padding-right: 2rem !important; }
}

/* ==== Day Schedule Timeline ==== */
#day-schedule .timeline{ position: relative; }

/* モバイル（～lg未満）：左に縦線・カードは縦並び */
@media (max-width: 991.98px){
  #day-schedule .timeline{ padding-left: 1.6rem; }
  #day-schedule .tl-row{ position: relative; }
  #day-schedule .tl-time{ color: var(--bs-success); font-weight:700; font-variant-numeric: tabular-nums; }
  #day-schedule .tl-time + .col-12{ margin-top: .25rem; } /* 時刻の下に余白 */
  #day-schedule .tl-dot{
    position:absolute; left: .55rem; top: .5rem;
    width:.8rem; height:.8rem; border-radius:50%;
    background: var(--bs-success);
    border:2px solid var(--bs-success);
    box-shadow: 0 0 0 3px var(--bs-body-bg);
  }
  #day-schedule .tl-card{ border-radius: .75rem; background: var(--bs-body-bg); }
}

/* PC（lg以上）：中央に軸線・左右交互レイアウト */
@media (min-width: 992px){
  #day-schedule .tl-time{
    min-height: 100%;
    display:flex; flex-direction: column; justify-content: center; align-items: center;
    color: var(--bs-success); font-weight:700; font-variant-numeric: tabular-nums;
  }
  #day-schedule .tl-dot{
    width:.9rem; height:.9rem; border-radius:50%;
    background: var(--bs-success);
    border:2px solid var(--bs-success);
    box-shadow: 0 0 0 4px var(--bs-body-bg);
    margin-bottom: .25rem;
  }
  #day-schedule .tl-card{ border-radius: .75rem; height: 100%; }
}

/* 共通のカード微調整 */
#day-schedule .tl-card ul{ margin-bottom: 0; }


/* ギャラリー内のSVGに適用 */
#gallery svg{ width:100%; height:auto; display:block; }
#gallery svg #base{ pointer-events:none; }  /* 壁線はクリックを奪わない */
#gallery svg #base *{ fill:none; }          /* ベースの塗りは消す（必要なら個別で戻す） */

/* 操作感（任意） */
#gallery svg #zoons > * { cursor:pointer; }
#gallery svg #zoons > *:hover { filter:brightness(1.05); }

/* 凡例の色はSVGのゾーン色と合わせる */
.legend{display:inline-block; width:1em; height:1em; vertical-align:-0.15em; border-radius:2px; margin-right:.25rem; border:1px solid rgba(0,0,0,.15)}
.legend-public{ background:#FFF3B0; }
.legend-room{   background:#E6F4D7; }
.legend-kitchen{background:#FFE5D0; }
.legend-bath{   background:#E6F7FF; }
.legend-toilet{ background:#F3E8FF; }
.legend-laundry{background:#E8FBF3; }

/* クリック可能の“気配” */
#gallery svg #zoons > *{ cursor:pointer; }
#gallery svg [tabindex="0"]:focus{ outline:2px solid var(--bs-success); outline-offset:2px; }