@charset "utf-8";
/* CSS Document */
/* ===== ビフォーアフター本体 ===== */
.ba {
  --pos: 50%; /* 右側(After)の幅[%] を表す変数に統一 */
  position: relative;
  width: 100%;
  margin: 24px auto 12px;
  aspect-ratio: 1/1; /* 比率の変更はここで */
  background: #f4f4f4;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
  isolation: isolate; 
  touch-action: pan-y; /* ←これ追加 */
}
.ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
	z-index: 1; 
}
/* ←右側(After)だけを見せるクリップ。右基準＋幅=--pos */
.ba-after-clip {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
  width: var(--pos); 
  overflow: hidden;
  transition: width .25s ease;
	z-index: 2;
}
/* ハンドルは「境界線」に置く=左から(100% - 右幅) の位置 */
.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% - var(--pos));
  transform: translateX(-50%);
  width: 44px;
  border: 0;
  background: transparent;
  cursor: ew-resize;
  touch-action: none;
z-index: 10;   /* 仕切り線より前面に */
}
.ba-handle-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}
.ba-handle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #007BFF;
  border: 2px solid #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.28);
	z-index: 11;   /* 丸をさらに前に */
}
/* バッジなどはそのまま */
.ba-badge {
  position: absolute;
  top: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  background: #fff;
  color: #007BFF;
  border: 2px solid #007BFF;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  user-select: none;
	 z-index: 20;
	
}
.ba-badge-before {
  left: 10px;
}
.ba-badge-after {
  right: 10px;
}
@media (max-width: 600px) {
  .ba {
    border-radius: 8px;
  }
  .ba-handle {
    width: 36px;
  }
  .ba-handle::before {
    width: 26px;
    height: 26px;
  }
}
/* ===== ギャラリー配置 ===== */
.before-after-gallery h2 {
  margin: 24px 0 8px;
  font-size: clamp(20px, 2.6vw, 26px);
}
.ba-list {
  list-style: none;
  padding: 0;
  margin: 16px auto 40px;
  display: grid;
  gap: 32px;
  max-width: 1920px;   /* 最大幅 */
  margin-inline: auto; /* 中央寄せ */
  grid-template-columns: 1fr; /* デフォは1列 */
}

/* 768px〜：2列 */
@media (min-width: 768px) {
  .ba-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1024px〜：3列 */
@media (min-width: 1024px) {
  .ba-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 1280px〜：4列 */
@media (min-width: 1500px) {
  .ba-list {
    grid-template-columns: repeat(4, 1fr);
	margin: 16px 20px 40px;
  }
}

.ba-card {
  margin: 0;
}
/* ===== キャプション（写真下の文章） ===== */
.ba-captions {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
@media (min-width: 768px) {
  .ba-captions {
    grid-template-columns: 1fr 1fr;
  }
}
.cap {
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px 12px;
  line-height: 1.7;
  font-size: 14px;
  color: #333;
}
.cap-label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  color: #222;
}
.cap-before {
  border-color: #e6eefc;
}
.cap-after {
  border-color: #e5f4e8;
}
/* 長文を省略したい案件だけ .-clamp を付与（任意） */
.cap.-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ===== カラー変数 ===== */
:root{
  --ba-before: #2F6B4F;     /* Before 深緑 */
  --ba-before-bg: #fff;  /* Before 背景の薄緑 */
  --ba-after:  #FF7A45;     /* After オレンジ */
  --ba-after-bg: #fff;   /* After 背景の薄オレンジ */
  --ba-handle: #007BFF;     /* 仕切り丸の色（サイトの青） */
}

/* バッジ（上のラベル） */
.ba-badge-before{
  background: var(--ba-before);
  border-color: var(--ba-before);
  color: #fff;
}
.ba-badge-after{
  background: var(--ba-after);
  border-color: var(--ba-after);
  color: #fff;
}

/* キャプション（下の枠） */
.cap{ 
  color:#444; 
  background: transparent;   /* ← グレー背景の上書きをやめる */
}
.cap-before{
  border-left: 6px solid var(--ba-before);
  background: var(--ba-before-bg);
}
.cap-after{
  border-left: 6px solid var(--ba-after);
  background: var(--ba-after-bg);
}

/* 見出しラベルの色を “施工前=深緑 / 施工後=オレンジ” に */
.cap-label{
  font-weight: 700;
}
.cap-before .cap-label{ color: var(--ba-before); }
.cap-after  .cap-label{ color: var(--ba-after); }

/* ハンドル（中央の丸）は青に固定 */
.ba-handle::before{
  background: var(--ba-handle);
  border: 2px solid #fff;
}


/* ===== 初回チュートリアル モーダル ===== */
.ba-modal[hidden]{ display:none; }

/* モーダル本文の余白を少しだけ */
.ba-modal__panel p{ margin: 6px 0 0; }

.ba-modal{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  display: grid; place-items: center;
  z-index: 9999;
}

/* パネル：常に左右の余白を確保して中央寄せ */
.ba-modal__panel{
  width: auto;            /* 端まで広がらないように */
  max-width: 520px;       /* PC上限 */
  margin: 0 20px;         /* ← 両サイドに常時20pxの隙間を確保 */
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  padding: 30px 40px;
  font-size: 16px;
  line-height: 1.7;
  color: #333;
}

/* 画面がかなり小さい時は少しだけ余白とパディングを詰める */
@media (max-width: 380px){
  .ba-modal__panel{
    margin: 0 16px;       /* サイド余白を16pxに */
    padding: 24px 18px;   /* 中身の余白も少しだけ調整 */
  }
}


.ba-modal__panel h3{
  margin: 0 0 15px; font-size: 18px; color:#111;
}

.ba-modal__hints{
  margin: 10px 0 16px; padding-left: 1.2em;
}

.ba-modal__ok{
  display: block;
  margin: 30px auto 0;   /* ← 中央寄せ */
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: #007BFF;
  color: #fff;
	font-weight: 700;
  cursor: pointer;
	font-size:18px;
}

@media (hover:none) and (pointer:coarse){
  /* モバイルで押しやすく */
  .ba-modal__ok{ padding: 12px 22px; }
}
.ba-modal__ok{
  outline: none;                 /* 既存に無ければ追加 */
}
.ba-modal__ok:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,123,255,.35);  /* キーボード操作時だけ柔らかいリング */
}

/* 追加：タイトルの見栄え（中央寄せ＆太字） */
.ba-modal__panel h3{
  text-align: center;
  font-weight: 700;
}

/* 追加：（任意）本文の行間をほんの少しだけゆったりに */
.ba-modal__panel p{
  line-height: 1.8;   /* 既に指定があれば不要。なければ読みやすさUP用 */
}
/* PCのみ：OKボタン hover */
@media (hover:hover) and (pointer:fine) {
  .ba-modal__ok:hover {
    background: #0056cc;   /* 少し濃い青に */
    transform: scale(1.05); /* ほんの少し拡大 */
  }
}

/* ---- modal fade / slide animation ---- */
.ba-modal{
  opacity: 0;
  pointer-events: none;           /* 非表示時はクリックを通す */
  transition: opacity .25s ease;  /* フェード */
}

.ba-modal.is-open{
  opacity: 1;
  pointer-events: auto;
}

.ba-modal__panel{
  transform: translateY(8px);                /* ちょい下から */
  transition: transform .25s ease;
}
.ba-modal.is-open .ba-modal__panel{
  transform: translateY(0);
}

/* 閉じるときのスッと下がる動き */
.ba-modal.is-closing{
  opacity: 0;
}
.ba-modal.is-closing .ba-modal__panel{
  transform: translateY(6px);
}
/* ===== BA タイトル（data-title がある時だけ表示） ===== */
.ba[data-title]::before{
  content: attr(data-title);
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 10px;
  transform: translateX(-50%);
  /* 視認性と軽いガラス風 */
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(6px);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 14px;
  color: #333;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  pointer-events: none;               /* ← ドラッグの邪魔をしない */
  z-index: 20;                         /* ハンドル/バッジより下げたければ調整 */
  max-width: min(80%, 420px);         /* 長文は省略 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* PC少しだけ大きく */
@media (min-width: 900px){
  .ba[data-title]::before{ font-size: 15px; padding: 7px 14px; }
}
/* ===== PCのみ：Before / After バッジはポインター表示 ===== */
@media (hover: hover) and (pointer: fine) {
  .ba-badge,
  .ba-badge-before,
  .ba-badge-after {
    cursor: pointer;
  }
}